window.XMLHttpRequest对象详解——2应用实例

from：http://blog.csdn.net/u012110719/article/details/45268149

 

发送POST请求(如果发送请求时需要带有参数，一般都用POST请求)

* open：xmlHttp.open("POST" ....);
* 添加一步：设置Content-Type请求头：
  > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

* send：xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体

servlet类：

 
  1. package cn.edu.web.servlet;  
  2.   
  3. import java.io.IOException;  
  4. import javax.servlet.ServletException;  
  5. import javax.servlet.annotation.WebServlet;  
  6. import javax.servlet.http.HttpServlet;  
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.http.HttpServletResponse;  
  9.   
  10. @WebServlet("/AServlet")  
  11. public class AServlet extends HttpServlet {  
  12.     private static final long serialVersionUID = 1L;  
  13.          
  14.     //下面是GET请求时执行的方法  
  15.     @Override  
  16.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  17.         //设置编码(因为胡没有获取参数就不用设置request.set那个UTF-8)  
  18.         response.setContentType("text/html;charset=utf-8");  
  19.         //在控制台输出Hello AJAX  
  20.         System.out.println("(GET:)Hello AJAX");  
  21.         //在浏览器里面点击按钮局部刷新后输出  
  22.         response.getWriter().print("(GET:)Hello AJAX<br />"+"服务器响应了页面的局部刷新，这就是AJAX");  
  23.     }  
  24.     //下面是POST请求执行时的方法  
  25.     @Override  
  26.     protected void doPost(HttpServletRequest request, HttpServletResponse response)  
  27.             throws ServletException, IOException {  
  28.         response.setContentType("text/html;charset=utf-8");//把信息响应到浏览器里面要设置编码为UTF-8(不然在浏览器里面的中文会乱码)  
  29.           
  30.         request.setCharacterEncoding("utf-8");//获取请求的编码为UTF-8(如果获取的参数值中有中文作用就来了)  
  31.         String username = request.getParameter("username");//utf-8,获取请求参数  
  32.           
  33.         System.out.println("(POST:) Hello AJAX"+",username:"+username);  
  34.         response.getWriter().print("(POST:) Hello AJAX<br />"+"服务器响应了页面的局部刷新，这就是AJAX"+",username"+username);//utf-8  
  35.     }  
  36. }  


jsp页面：

 
    1. <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
    2. <%@ page language="java" contentType="text/html; charset=UTF-8"  
    3.     pageEncoding="UTF-8"%>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    5. <html>  
    6. <head>  
    7. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
    8. <title>POST-AJAX</title>  
    9. <script type="text/javascript">  
    10. //创建异步对象  
    11. function createXMLHttpRequest(){  
    12.     try {  
    13.         return new XMLHttpRequest();//大多数浏览器支持  
    14.     } catch (e) {  
    15.         try {  
    16.             return ActiveXObject("Msxml2.XMLHTTP");//IE6.0    
    17.         } catch (e) {  
    18.             try {  
    19.                 return ActiveXObject("Microsoft.XMLHTTP");//IE5.5之前  
    20.             } catch (e) {  
    21.                 alert("你的浏览器是啥呀，古董吗！");  
    22.                 throw e;  
    23.             }  
    24.         }  
    25.     }  
    26. }  
    27.   
    28. window.onload = function(){//文档加载完毕后执行  
    29.     var btn = document.getElementById("btn");  
    30.     btn.onclick = function(){//给按钮的点击事件注册监听  
    31.         /* 
    32.         ajax四步操作，得到服务器的响应 
    33.         把响应结果显示到h1元素中 
    34.         */  
    35.         /* 
    36.         1.得到异步对象 
    37.         */  
    38.         var xmlHttp = createXMLHttpRequest();  
    39.         /* 
    40.         2.打开与服务器的连接 
    41.             指定请求方式 
    42.             指定请求URL 
    43.             指定是否为异步请求 
    44.         */  
    45.         /****修改open方法，指定请求方式为POST*****/  
    46.         //注意最上面要加上jstl头部标签声明  
    47.         xmlHttp.open("post","<c:url value='/AServlet' />",true);  
    48.         /****设置请求头，Content-Type****/  
    49.         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
    50.         /* 
    51.         3.发送请求 
    52.         */  
    53.         xmlHttp.send("username=张三&password=123");//如果是get请求没有请求体，但也要给出null,不然FireFox可能会不能发送！  
    54.         /* 
    55.         4.给异步对象的onreadystatechange时间注册监听器 
    56.         */  
    57.         xmlHttp.onreadystatechange =function(){//当xmlHttp的状态发生变化时执行  
    58.             //双重判断：xmlHttp的状态为4(服务器响应结果),以及服务器响应的状态码为200  
    59.             if(xmlHttp.readyState==4 && xmlHttp.status==200){  
    60.                 //获取服务器的响应结果  
    61.                 var text=xmlHttp.responseText;  
    62.                 //获取h1元素  
    63.                 var h1 = document.getElementById("h1");  
    64.                 h1.innerHTML=text;  
    65.             }  
    66.               
    67.         }  
    68.     }  
    69. }  
    70. </script>  
    71. </head>  
    72. <body>  
    73. <button id="btn">点击这里</button>  
    74. <h1 id="h1"></h1>  
    75. </body>  
    76. </html> 
posted @ 2017-10-26 09:55  Allen101  阅读(175)  评论(0)    收藏  举报