一、Ajax簡介

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

    在沒有Ajax的時候，客戶端提交資料後，會等待伺服器返回結果，期間出現假死狀態，直到伺服器返回結果才會載入新的頁面，呈現頁面請求結果。而使用Ajax就不會出現假死狀態，區域性重新整理資料而不影響整個頁面的呈現和使用，同時客戶端也沒有等待伺服器的返回結果的時間開銷，展現出良好的互動性。

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

接下來我們來看看實現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 時，我們才執行程式碼。下面是有關的五個狀態：

三、基於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"){
	}

  });
});
}