一.ajax例子一:hello ajax

@L_404_0@

二.ajax例子二:发送POST请求

1.与GET请求不同的地方

• Open:xmlHttp.open(“POST”,….);
• 它有一个请求头

Content-Type:application/x-www-form-urlencoded   //是html的默认值,ajax你要自己设置

• 所以我们要添加一步,来设置Content-Type请求头

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

• 发送请求时指定请求体
  send:xmlHttp.send(“username=zhangsan&password=123”);

2.服务端代码

public class AServlet extends HttpServlet {


    public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        System.out.println("Hello AJAX");
        response.getWriter().print("Hello AJAX!!!");

    }


    public void doPost(HttpServletRequest request,IOException {

        response.setContentType("text/html;charset=utf-8");  //响应编码 
        request.setCharacterEncoding("UTF-8");//post请求含中文

        String username=request.getParameter("username");//获取请求参数


                System.out.println("(POST:)Hello AJAX"+username);
                response.getWriter().print("(POST:)Hello AJAX!!!"+username);
    }

}

3.页面代码

<script type="text/javascript">

      //创建异步对象
      function createXMLHttpRequest(){
          try{
              return new XMLHttpRequest();//大多数浏览器
          }catch (e) {
            try{
                return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
            }catch (e) {
                try {
                 return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
                } catch (e) {
                    alert("哥们儿,你用的什么浏览器????");
                    throw e;
                }
        }

      }

      }

      window.onload = function(){      //在文档加载完成后马上执行!
      //得到btn元素
      var btn = document.getElementById("btn");
      //给btn的click事件注册监听
      btn.onclick = function(){

           /* ajax四步操作,得到服务器的响应 把响应记过显示到h1元素中 */

           /* 1.得到异步对象 */
           var xmlHttp= createXMLHttpRequest();

           /* 2.打开与服务器的连接 *指定请求方式 *指定请求的URL *指定是否为异步请求 */

           /***修改open方法,指定请求方式为POST***/
           xmlHttp.open("POST","/day23_01/AServelt",true);

           /***设置请求头:Content-Type******/
           xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
           /* 3.发送请求 */
           /**发送指定请求体****/
           xmlHttp.send("username=张三&password=123");

           /* 4.给异步对象的onreadystatechange事件注册监听器 */
           xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
               //双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
               if(xmlHttp.readyState ==4 && xmlHttp.status ==200 ){
                   //获取服务器的响应结束
                   var text=xmlHttp.responseText;

                   //获取h1元素
                   var h1=document.getElementById("h1");
                   h1.innerHTML = text;
               }


           };
      };

      };

      </script>

<button id="btn">点击这里</button>
             <h1 id="h1"></h1>

点击按钮后