AJAX在網站的數據交互中起着重要的作用，它在不用刷新整個網頁的情況下，能對網頁的局部內容進行更新。當然它並不是一種新的編程語言，而是一種使用現有標準的方法。
我們知道，在傳統的網頁數據交互中，都是遵循這樣一個流程：首先是客戶端向服務器發送請求，服務器收到相應請求後，將所有頁面內容的數據一起返回到客戶端，也就是整個html文檔。這樣做一個很明顯的缺點是當頁面中的某個位置需要更新時，數據整體提交，整個html文檔都會加載，這樣就會浪費網絡帶寬，還有就是用戶體驗不好，同時它一個響應對應一個請求，如無響應，不能再繼續。
AJAX就可以解決以上傳統網頁數據交互中所存在的問題。以內容主要介紹一下如何用原生JS實現AJAX的基本思路。
在這之前，首先要知道的是在AJAX機制下，客戶端和服務器之間的數據交互是以AJAX引擎爲中介進行的。客戶端可以用GET和POST兩種方式和服務器完成數據交互，其中兩者都可以用於傳輸數據，但GET主要用於從服務器獲取數據，相對來說它的安全性較POST方式低，加爲所發送的數據都是通過URL來傳輸的，同時傳輸的數據量較少。而POST主要用於發送數據，安全性相對較高，同時輸送的數據量較大。
客戶端要和服務器進行數據交互時，大致的流程是:首先發送一個連接請求，建立連接，然後進行數據請求，等待服務器返回的響應，最後對收到的數據進行解析處理。
發送一個連接請求，建立連接代碼如下：
var xhr; //創建XMLHttpRequest或ActiveXObject對象
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject("Microsoft.XMLHTTP"); //兼容低版本IE
}
xhr.open(method,url,true);//method：傳輸數據的方式，url：資源地址，第三個參數通常爲true表示異步模式
xhr.open(method,url,true);//建立連接
數據請求:
if(method=='GET'){//當使用GET方法時send()函數的參數可不寫或置null
xhr.send(null);
}
else{ //POST方法需設一個要傳輸的數據
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
對收到的數據進行解析處理（代碼如下）：
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
/*readyState分4種狀態。
0表示（未初始化）還沒有調用open()方法
1表示（載入）已調用send()方法，正在發送請求
2表示（載入完成）send()方法完成，已收到全部響應內容
3表示（解析）正在解析響應內容
4表示（完成）響應內容解析完成，可以在客戶端調用了
*/
if(xhr.status==200){ //200表示確定。客戶端請求已成功。
funsucc&&funsucc(xhr.responseText);
}
else{
alert(" 出錯了，狀態碼爲"+xhr.status);
}
}
}
收到的內容對於以XML方式組成的則調用xhr.responseXML，這在老版本的網站中可能會乃至。而對於以字符串，JSON，html存儲的數據，則應以xhr.responseText的方式來獲取。
封裝後的代碼如下：
function ajax(method,url,data,funsucc){ //method：數據傳輸的方式，url:數據地址，data要發送的數據，
var xhr; //funsucc:回調函數，用於在客戶端對返回的數據進行處理
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
if(method=='GET'&&data){
url+='?'+data;
}
xhr.open(method,url,true);
if(method=='GET'){
xhr.send(null);
}
else{
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
funsucc&&funsucc(xhr.responseText);
}
else{
alert(" 出錯了，狀態碼爲"+xhr.status);
}
}
}
}