基本過程

Ajax 提供異步通信和同步通信

核心為XMLHTTPRrequest（IE6不支持）

使用過程：

1.創建Ajax調用

2.向服務器發送請求open(參數1，參數2，參數3，[參數4]，[參數5])

　　參數1：請求方式，有GET和POST兩種方法，GET性能好，但是會暴露數據，且數據有上限；POST不會暴露數據，且沒有傳輸上限。

　　參數2：請求URL地址，注意路徑

　　參數3：是否異步，true為異步

　　參數4和5：用戶名密碼

3.通過open方法將調用所需數據準備好，然后通過send方法發送請求。

4.接收服務器傳回數據

readyState屬性反應調用狀態：

0——open方法尚未被調用（uninitialized）

1——open方法已被調用（loading）

2——send方法已被調用(loaded)

3——開始回傳服務器的應答(interacting)

4——請求已完成（complete）

當readyState發生變化時會觸發readystatechange事件，通過事件來判斷狀態

服務器狀態：

200——服務器正常

?

將Ajax調用封裝為函數

??

1 function getHTTPObject(){ 2 var xhr; 3 if (window.XMLHttpRequest) {//IE7及以上及其他瀏覽器 4 xhr = new XMLHttpRequest(); 5 } else if(window.ActiveXObject){//IE6 6 xhr = new ActiveXObject("Msxml2.XMLHTTP"); 7 } 8 return xhr; 9 } 10 11 function ajaxCall(dataUrl,callback){//請求地址，回調函數 12 var request = getHTTPObject(); 13 request.onreadystatechange = function(){ 14 if(request.readyState === 4 && request.status === 200){//ajax請求完成且服務器狀態正常 15 console.log(request.responseText); 16 var contacts = JSON.parse(request.responseText);//將字符串轉化為JSON 17 if(typeof callback === "function"){ 18 callback(contacts);//利用回調函數處理請求結果 19 } 20 } 21 } 22 request.open("GET",dataUrl,true); 23 request.send(null); 24 }

?

?

AJAX數據格式

XML	JSON	HTML
可擴展、符合DOM標準	易讀、迅速靈活與平臺無關、跨站容易	速度快、不需要解析
不能跨域名Ajax調用	語法對符號要求嚴格，容易被遠程注入惡意腳本	無法精細控制

?

AJAX的易訪問性

易于訪問的富因特網應用程序Accessible Rich Internet Applications=ARIA

ARIA活動區域：

1.aria-atomic：當頁面發生改變，屏幕閱讀器根據該屬性決定是否展示某個活動區域內的內容。

2.aria-busy：當活動區域內容正在更新，該值返回true；

3.aria-live：標識文檔活動區域中內容變更的重要程度，off、polite、asserive

4.aria-relevant：標志單個活動區域內發生了何種變化，additions、removals、text、all

<div id="output" aria-atomic="true" aria-live="polite" aria-relevant="additions"></div>

?

改善用戶體驗

為用戶的每一個操作提供反饋，告訴他們你正在用AJAX調用數據，于是修改前面的代碼,橙色部分

1 function getHTTPObject(){ 2 var xhr; 3 if (window.XMLHttpRequest) {//IE7及以上及其他瀏覽器 4 xhr = new XMLHttpRequest(); 5 } else if(window.ActiveXObject){//IE6 6 xhr = new ActiveXObject("Msxml2.XMLHTTP"); 7 } 8 return xhr; 9 } 10 function ajaxCall(dataUrl,outputElement,callback){//請求地址，回調函數 11 var request = getHTTPObject(); 12 outputElement.innerHTML = "Loading..."; 13 request.onreadystatechange = function(){ 14 if(request.readyState === 4 && request.status === 200){//ajax請求完成且服務器狀態正常 15 console.log(request.responseText); 16 var contacts = JSON.parse(request.responseText);//將字符串轉化為JSON 17 if(typeof callback === "function"){ 18 callback(contacts);//利用回調函數處理請求結果 19 } 20 } 21 } 22 request.open("GET",dataUrl,true); 23 request.send(null); 24 }

?

后退返回

History API

轉載于:https://www.cnblogs.com/jellybaobao/p/3956264.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript复习笔记(1)——AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。