Ajax异步开发学习笔记

1、创建Ajax异步对象;

function createAjax(){var ajax = null;try {
      //IE浏览器
      ajax = new ActiveXObject("microsoft.xmlhttp");
   } catch (e1) {
   try {
         //火狐或者谷歌浏览器
         ajax =  new XMLHttpRequest();
       } catch (e2) {
       alert("您的浏览器不支持异步对象");
       }

}return ajax;

}

2、准备发送异步请求

a)如果是GET方式的话，且如果是汉字的话，要进行URL编码

eg.

            //对汉字进行URI编码
            username = encodeURI(username);
            //创建ajax对象,调用上面的方法
            var ajax = createAjax();
            //准备发送ajax请求，以get形式发送
            var method="GET";
            var url="${pageContext.request.contextPath}/UserServlet?time="
                     +new Date().getTime()+"&username="+username;
            ajax.open(method, url);
            //发送ajax请求，括号参数为null
            ajax.send(null);

b)如果是POST方式的话，要设置请求头

            //创建ajax对象
            var ajax = createAjax();
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="
                       +new Date().getTime();
            ajax.open(method,url);
            //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
            var content = "username=" + username;
            ajax.send(content);

3、真正发送请求到服务端

          a)GET方式---   ajax.send(null);
          b)POST方式---ajax.send(content);

----------------------等待-----------------------------------------------------------------------------

4、不断监听服务器状态变化（0-1-2-3-【4】）

5、从Ajax异步对象中获取服务器响应的结果

  ajax.onreadystatechange = function(){
    //4 表示已经加载且收到数据完毕，下面还要保证http状态码为200才能成功
    if(ajax.readyState == 4){
       if(ajax.status == 200){
         var tip = ajax.responseText;
       }
   }
 }

6、处理响应结果

比如：将响应的结果按照DOM规则添加到web页面指定的标签中
   var $img = $("<img src='"+backDate+"' width='14px' height='14px'>");
   $("span").text("");
   $("span").append($img);

Jquery Ajax开发：

1、简单形式：JQuery对象.load(url);返回结果自动添加到JQuery对象代表的标签中间。如果是Servlet的话，采用的是GET方式。

2、复杂形势：//JSON格式发送给servlet处理数据

var sendDate={"name":"哈哈",
            "sal": 60000};JQuery对象.load(url,sendDate,function(backDate){
     //对收到的数据进行打印或者其他操作
     //backDate：
     //如果服务器返回html，即backDate就是string，不要解析
     //如果服务器返回json，即backDate就是object，要解析   
     //如果服务器返回xml，即backDate就是object，要解析    
     alert(backDate)});

注意：使用load方法，自动进行编码，无需手工编码