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.οnlοad=function (){
  //<input type="button" value="测试服务器连接" id="ok" name="ok"/>
  
  	document.getElementById("ok").οnclick=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);		
		 });	  	
	  });
   });