AJAX詳解
Ajax概述
Ajax全稱：Asynchronous Javascript and XML（異步JavaScript和XML）
它並不是Javascript的一種單一技術，而是利用了一系列交互式網頁應用相關的技術所形成的結合體（AJAX 不是新的編程語言，而是一種使用現有標準的新方法。）主要有：
Javascript，通過用戶或者其他與瀏覽器相關事件捕獲交互行為
XMLHttpRequest對象，通過這個對象可以在不中斷其他瀏覽器任務的情況下向服務器發送請求
服務器上的文件，以XML，HTML或者JSON格式保存文本數據
其他JavaScript，解釋來自服務器的數據，（比如PHP從MySQL獲取的數據）並將其呈現到頁面上
Ajax作用
使用Ajax，可以無刷新狀態更新頁面，並且實現異步提交，提升用戶體驗。
Ajax優勢
不需要插件支持（一般瀏覽器且默認開啟Javascript即可）
用戶體驗極佳（不刷新網頁即可獲取可更新的數據）
提升Web程序的性能（在傳遞數據方面做到按需放松，不必整體提交）
減輕服務器和帶寬的負擔（將服務器的一些操作轉移到客戶端）
Ajax不足之處
前進，後退的功能被破壞（因為Ajax永遠在當前頁面，不會幾率前後頁面）
搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解js引起變化數據的內容）
開發調試工具缺乏（相對於其他語言的工具集來說，js或AJax調試開發很少）
一個簡單的Ajax程序的流程（獲取一個文件的內容）
第一步：打開瀏覽器，創建一個ajax對象，ie6及以下new ActiveXObject(‘Microsoft.XMLHTTP‘)，使用try，catch或者使用if進行判斷進行兼容性的處理
var xhr = null; ActiveXObject(‘Microsoft.XMLHTTP‘) try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); }
var xhr = null; if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); } else { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); }
第二步：調用ajax對象的open方法，這個方法有三個參數，分別表示提交方式 Form-method，提交地址 Form-action，異步（同步）
xhr.open(‘get‘,‘1.txt‘,true);
第三步：提交，發送請求，調用ajax對象的send()方法，相當於Form的submit
xhr.send();
第四步：等待服務器返回內容，請求狀態監控，使用ajax對象的onreadystatechange事件，該事件有如下屬性：
readyState屬性（請求狀態）
0 （未初始化）還沒有調用open()方法
1 （載入）已調用send()方法，正在發送請求
2 （載入完成）send()方法完成，已收到全部響應內容
3 （解析）正在解析響應內容
4 （完成）響應內容解析完成，可以在客戶端調用了
status屬性：服務器(請求資源)的狀態
返回的內容的形式
responseText：返回以文本形式存放的內容
responseXML：返回XML形式的內容
xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert( xhr.responseText ); } else { alert(‘出錯了,Err：‘ + xhr.status); } } }
整體代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <script> window.onload = function () { var oBtn = document.getElementById(‘btn‘); oBtn.onclick = function () { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); } xhr.open(‘get‘, ‘1.txt‘, true); //在地址欄輸入地址 xhr.send(); //提交 //等待服務器返回內容 xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert( xhr.responseText ); } else { alert(‘出錯了,Err：‘ + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按鈕" id="btn"/> </body> </html>
同步與異步
使用AJax最關鍵的地方，就是實現異步請求，接受響應及執行回調，那麽異步與同步有什麽區別呢？
同步：即執行一段程序才能執行下一段，類似電話中的通話，一個電話接完才能接聽下個電話（我們普通的WEB程序開發基本都是同步的）
異步：可以同時執行多條任務，使用異步模式執行，感覺有多條路線，類似於短信，不會因為看一條短信而停止接受另一條短信
Ajax也可以使用同步模式執行，但同步的模式屬於阻塞模式，這樣會導致多條線路執行時又必須一條一條執行，會讓Web頁面出現假死狀態，所以一般Ajax大部分采用異步模式
AJAX詳解