Ajax的原生代碼實現和jQuery實現

一、Ajax簡介

    Ajax（Asynchhronous Javascript And XML）是指一種創建網頁應用的網頁開發技術。Ajax通過後臺與服務器進行少量的數據交換，可以使網頁實現異步更新，創建快速動態網頁，無需加載整個頁面的情況下，能夠更新部分網頁技術。Ajax不是一種新的編程語言，它是一種獨立於web服務器軟件的瀏覽器技術。

    在沒有Ajax的時候，客戶端提交數據後，會等待服務器返回結果，期間出現假死狀態，直到服務器返回結果纔會載入新的頁面，呈現頁面請求結果。而使用Ajax就不會出現假死狀態，局部刷新數據而不影響整個頁面的呈現和使用，同時客戶端也沒有等待服務器的返回結果的時間開銷，展現出良好的交互性。

Ajax的核心是XMLHttpRequest對象，這是一個Javascript對象。下面是XMLHttpRequest對象的一些方法描述：

方法	描述
Abort()	停止當前請求
getAllResponseHeaders()	把HTTP請求的所有響應首部作爲鍵/值對返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立對服務器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否異步，用戶名，密碼
send(content)	向服務器發送請求
setRequestHeader("header", "value")	把指定首部設置爲所提供的值。在設置任何首部之前必須先調用open()。設置header並和請求一起發送 ('post'方法一定要 )

 

接下來我們來看看實現Ajax的兩種方式（使用XMLHttpRequest對象做原生代碼實現和基於Jquery實現），還有Ajax實現的GET和POST兩種方法。

二、原生代碼實現Ajax

GET請求：

var request=false;
function createRequest(){
	try{
		request=new XMLHttpRequest(); //創建XMLHttpRequest對象，大部分瀏覽器
	
}catch(trymicrosoft){
	try{
		request=new ActiveXObject("Msxml2.XMLHTTP"); //高版本Microsoft瀏覽器
	}catch(othermicrosoft){
		try{
			request=new ActiveXObject("Microsoft.XMLHTTP"); //低版本Microsoft瀏覽器，如IE5、IE6
		}catch(failed){
			request=false;
		}
	}
}
    if(!request){
	    alert("Error");
	}
}
function getCustomerInfo(){
	//1.創建異步對象
	createRequest();
   //設置參數，與服務器交互信息
	request.open("GET",url,true);
   //發送請求
	request.send(null);
   //註冊事件
	request.onreadystatechange=function(){
	    //狀態碼
	if(request.readyState==0||request.readyState==1||request.readyState==2||request.readyState==3){
           //更新數據
	        document.getElementById("b").innerHTML="aaaaaaaa";
		}
	if(request.readyState==4){
		if(request.status==200){
          //更新數據
			document.getElementById("b").innerHTML=request.responseText;
		}
	}
}
}

POST請求：

var request=false;
function createRequest(){
	try{
		request=new XMLHttpRequest(); //創建XMLHttpRequest對象，大部分瀏覽器
	
}catch(trymicrosoft){
	try{
		request=new ActiveXObject("Msxml2.XMLHTTP"); //高版本Microsoft瀏覽器
	}catch(othermicrosoft){
		try{
			request=new ActiveXObject("Microsoft.XMLHTTP"); //低版本Microsoft瀏覽器，如IE5、IE6
		}catch(failed){
			request=false;
		}
	}
}
    if(!request){
	    alert("Error");
	}
}
function getCustomerInfo(){
	//1.創建異步對象
	createRequest();
   //請求頭，POST請求必須要加
 request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   //設置參數，與服務器交互信息
	request.open("POST",url);
   //發送請求
	request.send("name=iii&age=1");
   //註冊事件
	request.onreadystatechange=function(){
	    //狀態碼,判斷服務器是否響應
	if(request.readyState==4){
		if(request.status==200){
          //更新數據
			
		}
	}
}
}

注：onreadystatechange 是一個事件句柄。它的值 (state_Change) 是一個函數的名稱，當 XMLHttpRequest 對象的狀態發生改變時，會觸發此函數。狀態從 0 (uninitialized) 到 4 (complete) 進行變化。僅在狀態爲 4 時，我們才執行代碼。下面是有關的五個狀態：

狀態	名稱	描述
0	Uninitialized	初始化狀態。XMLHttpRequest 對象已創建或已被 abort() 方法重置。
1	Open	open() 方法已調用，但是 send() 方法未調用。請求還沒有被髮送。
2	Sent	Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。
3	Receiving	所有響應頭部都已經接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經完全接收。

 

三、基於jQuery

jQuery是一個快速、簡潔的JavaScript框架，它是一個優秀的JavaScript代碼庫。利用它實現Ajax相對與原生代碼實現好使多了。

GET請求：

$.get() 方法通過 HTTP GET 請求從服務器上請求數據。

function ajax_get(){
	$("button").click(function(){
	//url請求地址，function 完成後執行的函數，參數爲返回數據和狀態碼
        $.get(url,function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
  });
});
	}

POST請求:

$.post() 方法通過 HTTP POST 請求從服務器上請求數據。

function ajax_post(){
$("button").click(function(){
	//url請求地址，請求發送數據，完畢後執行函數
  $.post(url,
  {
    name:"1",
  },
  function(data,status){
  });
});
	}

 

 

 

四、其他

下面談談jQuery簡單又強大的Ajax方法：loas() ，load()方法從服務器加載數據，並把返回的數據放入被選元素中。

 

function test_load(){
	$("button").click(function(){
		//必需url，可選data與請求同一發送查詢字符，function方法完成後的執行函數
		//responseTxt結果內容,statusTxt狀態,xhr包含 XMLHttpRequest 對象
  $("#div1").load(url,data,function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success"){
	}
    if(statusTxt=="error"){
	}

  });
});
}