Ajax學習筆記整理_AJAX相關

Ajax: Asynchronous JavaScript and Xml , 非同步js指令碼和xml , 常用來實現頁面局部的非同步重新整理, 對提高使用者體驗有很大協助. Xml在多語言時較有優勢, 但Ajax技術實際上較多採用Json對象而不是Xml來處理資料.

Ajax曆史....瞭解性知識

Ajax歸屬於Web前端開發技術, 與javascript有著異常緊密的聯絡. Ajax就是一種實現非同步通訊無重新整理的技術, 而這種技術可以有很多種實現方式. 瀏覽器的鼻祖網景(NetScape)公司最早發明了LiveScript指令碼語言, 用來豐富網頁元素的表現形式, 使網頁能夠呈現出動態效果. 隨後的曆次改版升級後就誕生了JavaScript語言, 與此同期微軟(Microsoft)公司也看到互連網的前景, 開始涉足並發力於互連網行業, 推出了JScript語言, 可惜沒有JavaScript成熟, 發展遲滯. 最終微軟公司對互連網的決心促成了MS對NS的漫長曲折的收購曆程.

這裡提一下, 動態HTML語言(Dynamic Hyper Text Markup Language)就是將javascript放在Dom樹的元素節點中, 為元素提供動態展示行為.

Ajax代碼思路

建立請求對象

配置請求對象並發送到伺服器

伺服器應答請求對象

（1） 建立請求對象，作為和伺服器進行通訊的對象：

function createRequest(){try{var request=new XMLHttpRequest();}catch(tryMS){try{request=new ActiveXObject("Msxml2.XMLHTTP");}catch(otherMS){try{request=new ActiveXObject("Microsoft.XMLHTTP");}catch(failed){request=null;}}}return request;}

註：ActiveXObject是Microsoft特定的一種編程對象，有兩個不同版本由不同瀏覽器分別支援。XMLHTTP是可以在Javascript等指令碼語言中通過http協議傳送或接收XML及其他資料的一套API。

獲得請求對象request後，它有這麼些個屬性：

常用的有onreadystatechange,readyState,responseText,status。

（2）配置請求對象並發送到伺服器：

var request=createRequest();request.open("GET",url,true);request.onreadystatechange=showResponse;request.send(null);

open,send方法均來自request對象的原型XMLHttpRequest，開啟__proto__:XMLHttpRequest可看到：

open()方法有三個參數，第一個是發送請求所使用的方法（GET還是POST,區別以後再總結）,第二個是規定伺服器端指令碼的url（該檔案可以是任何類型的檔案），第三個參數規定是否進行非同步處理（預設true非同步）

send()方法將請求送往伺服器。

我在這裡注意到，request.onreadystatechange=showResponse;這句代碼所在的位置不同，控制台輸出的響應內容就不同。想來也是，回呼函數加入任務隊列的時機不同肯定輸出不同啊，就比如現在這個位置，

request.onreadystatechange=showResponse;在open之後send之前，當代碼解析到request.onreadystatechange=showResponse;時，此時的readyStates=1（請求已和伺服器建立接連），此後當readyStates由1變為2，回呼函數showResponse加入任務隊列中等待被執行，readyState從2變化到3，回呼函數showResponse第二次加入任務隊列，readyState從3變化到4，回呼函數再次排入佇列。所以猜想當主代碼執行完畢後，控制台會輸出“請求已發送，伺服器已接收，send之後”，“請求正在處理”，“請求已完成”；確實如此：

（3）伺服器應答請求對象，js就可以處理響應內容了：

function showResponse(){if(request.readyState==0){console.log('請求未初始化，調用open之前');}else if(request.readyState==1){console.log('請求已提出，伺服器串連已建立，open之後send之前');}else if(request.readyState==2){console.log('請求已發送，伺服器已接收，send之後');}else if(request.readyState==3){console.log('請求正在處理');}else if(request.readyState==4){console.log('請求已完成');if(request.status==200){//處理request.responseText;}}}

上面代碼僅是為了跟蹤readyState變化，實際項目代碼要不了這麼多。底下才是實際主要代碼：

function showResponse(){if(request.readyState==4){if(request.status==200){//處理request.responseText;}}}

ps:Ajax解決什麼問題

我們都知道, 在用戶端向伺服器請求一個頁面時, 伺服器首先動態計算並產生出頁面, 然後再發給用戶端. 用戶端瀏覽器順序編譯並呈現頁面.

在沒有Ajax時: 假如說頁面有個使用者驗證控制項, 那麼在用戶端瀏覽器呈現使用者驗證控制項時, 會等待伺服器的驗證結果, 收到結果後才能繼續呈現頁面元素. 而這個驗證過程通常要進行讀取資料庫等操作, 這就是所謂的同步方式. 而這種方式, 會造成網頁呈現的假死狀態.

在使用Ajax後: 同樣是驗證控制項, 用戶端提交了驗證請求後, 便繼續順序呈現其他元素. 當取得驗證結果後, 由javascript在用戶端修改記憶體中的DOM對象後並呈獻給使用者(注意: 這裡修改的只是記憶體中的DOM對象, 而用戶端接收的分頁檔並沒有修改). 這樣, 使用非同步方式, 就不會出現假死狀態, 同時用戶端也節省了等待伺服器返回結果時的時間開銷.