Ajax和Jquery学习总结(1)

说到Ajax(Asynchronous JavaScript and Xml)可以说的是它是一项非常优秀的综合技术，它可以完成客户端的异步请求，这里要理解同步和异步请求。

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个 数据包的通讯方式。 

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

易懂的理解: 异步传输:   你传输吧，我去做我的事了，传输完了告诉我一声   同步传输:  你现在传输，我要亲眼看你传输完成，才去做别的事

它的核心是XmlHttpRequest对象，首先应该创建一个Ajax对象：

/** * AJAX建立和服务器的连接，接收服务器的请求，处理服务器返回的数据 * 开发步骤： *   1.创建XMLHttpRequest对象 *   2.接收服务器端的响应 *   3.打开和服务器的链接 *   4.发送数据 *   */function ajaxFunction(){   var xmlHttp;   try{ // Firefox, Opera 8.0+, Safari        xmlHttp=new XMLHttpRequest();    }    catch (e){   try{// Internet Explorer         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e){      try{         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }      catch (e){}      }    }return xmlHttp; }//浏览器加载时就创建这个函数window.onload=function (){  //<input type="button" value="测试服务器连接" id="ok" name="ok"/>    document.getElementById("ok").onclick=function (){//alert("hello!");//1 创建XmlHttpRequest对象var xmlHttp=ajaxFunction();/** * 2.接收服务器的响应 *  * onreadystatechange事件处理函数由服务器触发，而不是用户              * 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。通信状态的改变要激发函数的执行              *               *               * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。0 代表未初始化。 还没有调用 open 方法1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用2 代表已加载完毕。send 已被调用。请求已经开始3 代表交互中。服务器正在发送响应4 代表完成。响应发送完毕 */xmlHttp.onreadystatechange=function (){//alert("xxxxxxxxx");//当请求结束时每个浏览器会把readyState值置为4//响应发送完毕 if(xmlHttp.readyState==4){ if(xmlHttp.status==200||xmlHttp.status==304){//接收服务器端返回的数据var data=xmlHttp.responseText;alert(data);} } }/** * 3打开和服务器的连接 *///alert("haha!");xmlHttp.open("post","/JsProject/TestServlet?timeStamp="+new Date().getTime()+"&a=9",true);   /* * 如果请求方法是post,需要设置Content-Type的类型 *  * 该方法必须放置在open方法的后面 */   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  /** * 4.向服务器发送数据 *  发送数据到服务器端 *   * 如果请求方法是get,此时send方法不能发送数据到服务器端 *     即使发送了数据,服务器端也接收不到,该参数设置null *   * 此时传递参数可以使用url方式传递参数   *///xmlHttp.send(null);//get方法不想服务器发送数据，所以为空xmlHttp.send("b=80&c=name");}}

对于JQuery它则封装了很多JS的类库真正实现用更少的代码，做更多的事。使用JQuery与服务器端交互的代码如下：

  $(document).ready(function(){  $("#b1").click(function(){/* * $("#one").load("load01.jsp",xxx,function(data,textStatus,xmlHttpRequest){}); *  * 载入远程HTML文件代码并插入至DOM中。 *  * 该方法不是jquery的全部函数,所以必须用对象调用 *  * 参数1:请求的url *  * 参数2:发送到服务器的数据,格式:{key01:value01,key02:vlaue02} *  * 参数3:回调函数function(data,textStatus,xmlHttpRequest) *        * data:代表请求返回内容的 data,服务器端返回的内容 *        * textStatus:代表请求状态的 textStatus 对象,其值可能为: succuss, error, notmodify, timeout 4 种 *        * xmlHttpRequest对象 *         *  * 如果没有向服务器传递参数:则此时的请求方法是get *  * 如果向服务器传递参数:则此时的请求方法是post *   */var jsonObj={username:$("#username").val(),psw:$("#psw").val()//psw:&("#psw").val()}//$("#one").load("load01.jsp",jsonObj,function(data,textStatus,xmlHttpRequest){$("#one").load("load01.jsp h2",jsonObj,function(data,textStatus,xmlHttpRequest){// alert(data);alert(xmlHttpRequest.readyState+" "+xmlHttpRequest.status);}); }); }); 

同样的Jquery中提供了类似Ajax中post和get请求的方法：

 $().ready(function(){//     $("#b1").click(function(){// /*//  *  $.get("get.jsp",function(data,textStatus){});//  *    * 通过远程 HTTP GET 请求载入信息。//  *    * 参数1:请求的url//  *    * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}//  *    * 回调函数:function(data,textStatus)//  *          * data:服务器返回的数据//  *          * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.//  *    * 方法的返回值是xmlHttpRequest对象//  */// var jsonObj={// username:$("#username").val(),//psw:$("#psw").val()// }// //     var xmlHttp=  $.get("get.jsp",jsonObj,function(data,textStatus){//             //alert(data);    //          alert(textStatus);        //    $("#one").text(data);// });  //  }); /*alert(xmlHttp.readyState); * alert(xmlHttp.status); */  $("#b1").click(function(){ /*  *  $.post("get.jsp",function(data,textStatus){});  *    * 通过远程 HTTP post 请求载入信息。  *    * 参数1:请求的url  *    * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}  *    * 回调函数:function(data,textStatus)  *          * data:服务器返回的数据  *          * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.  *    * 方法的返回值是xmlHttpRequest对象  */// var jsonObj={// username:$("#username").val(),//psw:$("#psw").val()// }//   var jsonObj=$("#form1").serialize();//serialize 连续的，连载  ----序列化          $.post("get.jsp",jsonObj,function(data,textStatus){             //alert(data);               $("#one").text(data); });    });   });