ajax原理
1、ajax
即“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML），也就是無刷新數據讀取。
通俗地講就是：AJAX 通過在后台與服務器交換少量數據的方式，允許在不重新加載整個頁面的情況下，對網頁的一部分內容進行數據更新。
2、http 請求
http（超文本傳輸協議）是一個基於請求與響應模式的、無狀態的、應用層的協議。
這里需要了解 http 請求的兩個方法：GET方法 和 POST方法。
①、GET 用於獲取數據。GET 是在 URL 中傳遞數據，它的安全性低，容量低。
②、POST 用於上傳數據。POST 安全性一般，容量幾乎無限。
PS：有興趣的同學可以參考Http協議詳解
3、XMLHttpRequest
XMLHttpRequest 是一個用於在后台與服務器交換數據的對象。目前幾乎所有瀏覽器支持該對象。
XMLHttpRequest是ajax技術的核心部分，在javascript中就是利用XMLHttpRequest對象來實現ajax功能，以便給用戶帶來好的體驗，其他的方法實現ajax功能也都是實現此功能。
XMLHttpRequest常用的方法、屬性：
①、open()方法：用於向服務器發送一個請求；該方法有3個參數，第一個參數表示發送請求的方式（即連接服務器的方式）即“GET”或“POST”，第二個參數表示要請求的URL地址，第三個參數表示是否以異步方式發出請求，若為true則表示是異步，否則為同步。
②、send()方法：發送請求。
③、onreadystatechange 事件：緊跟其后是一個函數名或是一個匿名函數，發送請求以后XMLHttpRequest對象一直處於等待狀態，直到服務器響應后激發 onreadystatechange事件，緊跟其后的方法就是當XMLHttpRequest對象的onreadystatechange事件激發之后 的客戶端方法。
④、readyState屬性：XMLHttpRequest對象的請求狀態，返回的是整數（0-4），具體意思如下：
0（未初始化）：還沒有調用 open() 方法。
1（載入）：已調用 send() 方法，正在發送請求。
2（載入完成）：send() 方法完成，已收到全部響應內容。
3（解析）：正在解析響應內容。
4（完成）：響應內容解析完成，可以在客戶端調用。
⑤、status：請求結果，返回 200 或者 404。
200 => 成功。
404 => 失敗。
⑥、responseText：返回內容，即我們所需要讀取的數據。注意：responseText 返回的是字符串。
實現例子
1、創建 ajax 對象
在創建對象時，要考慮瀏覽器兼容性問題，即IE瀏覽器和非IE瀏覽器（如firefox、chrome等）：
var ajaxObj=null; if(window.XMLHttpRequest){ ajaxObj = new XMLHttpRequest();//IE6以上及非IE瀏覽器 }else if(window.ActiveXObject){ ajaxObj = new ActiveXObject('Microsoft.XMLHTTP');//IE6以下的IE瀏覽器 }else{ throw new Error('no ajax object available.'); }
2、連接服務器
這里就用上面講到的open方法。
ajaxObj.open('GET',URL,true);
3、發送請求
ajaxObj.send();
4、接受數據
ajaxObj.onreadystatechange=function(){ if(ajaxObj.readyState==4){ if(ajaxObj.status==200){ funSucc(ajaxObj.responseText);//funSucc是獲取成功時處理的函數 }else{ if(funFaild){ funFaild();//funFaild是獲取失敗時處理的函數 } } } };
將以上代碼連起來：
function ajax(url, funSucc, funFaild){ //1.創建ajax對象 var ajaxObj = null; if(window.XMLHttpRequest){ ajaxObj = new XMLHttpRequest(); }else if(window.ActiveObject){ ajaxObj = new ActiveXObject("Microsoft.XMLHTTP"); }else{ throw new Error('no ajax object available.') } //2.連接服務器 ajaxObj.open('GET', URL, true);//open(方法, url, 是否異步) //3.發送請求 ajaxObj.send(); //4.接收返回 ajaxObj.onreadystatechange = function(){ //OnReadyStateChange事件 if(ajaxObj.readyState == 4){ //4為完成 if(ajaxObj.status == 200){ //200為成功 funSucc(ajaxObj.responseText) }else{ if(funFaild){ funFaild(); } } } }; }
最后是一個簡單實例：
<!DOCTYPE HTML> <html> <head> <title>ajax基礎</title> </head> <body> 點擊按鈕的時候，讀取abc.txt<input id="btn" type="button" value="讀取"/><br/> <div id="con"></div> </body> </html> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn'); var oCon = document.getElementById('con'); oBtn.onclick = function(){ ajax('abc.txt',function(str){ oCon.innerHTML = str; }); } } </script>
abc.txt 內容：
這是ajax調用的內容1。
這是ajax調用的內容2。
這是ajax調用的內容3。
總結：
利用純javascript實現ajax效果的主要步驟如下：
1、根據瀏覽器類型實例化XMLHttpRequest對象
2、利用XMLHttpRequest對象向服務器發出一個動態請求
3、編寫XMLHttpRequest對象接收服務器的響應時要執行客戶端代碼，在客戶端做一些設置來響應客戶端操作
4、編寫服務器方法，用於處理客戶端請求並作出響應。