大話AJAX原理

?

一、什么是Ajax

Ajax（Asynchronous JavaScript and XML的縮寫）是一種異步請求數據的web開發技術，對于改善用戶的體驗和頁面性能很有幫助。簡單地說，在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載后臺數據，并在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。
Ajax目的：提高用戶體驗，較少網絡數據的傳輸量

二、Ajax原理是什么

在解釋Ajax原理之前，我們不妨先舉個“領導想找小李匯報一下工作”例子，領導想找小李問點事，就委托秘書去叫小李，自己就接著做其他事情，直到秘書告訴他小李已經到了，最后小李跟領導匯報工作。

Ajax請求數據流程與“領導想找小李匯報一下工作”類似。其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，它扮演的角色相當于秘書，使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接著做其他事情，等收到XHR返回來的數據再渲染頁面。理解了Ajax的工作原理后，接下來我們探討下如何使用Ajax。

?

三、Ajax的使用

1.創建Ajax核心對象XMLHttpRequest(記得考慮兼容性)

? ?1. var xhr=null; ?2. if (window.XMLHttpRequest) ?3. ? {// 兼容 IE7+, Firefox, Chrome, Opera, Safari ?4. ? xhr=new XMLHttpRequest(); ?5. ? } else{// 兼容 IE6, IE5 6. ? ? xhr=new ActiveXObject("Microsoft.XMLHTTP"); ?7. ? }

2.向服務器發送請求

? ?1. xhr.open(method,url,async); ?2. send(string);//post請求時才使用字符串參數，否則不用帶參數。

method：請求的類型；GET 或 POST

url：文件在服務器上的位置

async：true（異步）或 false（同步）
注意：post請求一定要設置請求頭的格式內容

xhr.open("POST","test.html",true); ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ? xhr.send("fname=Henry&lname=Ford"); ?//post請求參數放在send里面，即請求體

3.服務器響應處理（區分同步跟異步兩種情況）

responseText 獲得字符串形式的響應數據。

responseXML 獲得XML 形式的響應數據。

①同步處理

? ?1. xhr.open("GET","info.txt",false); ?2. xhr.send(); ?3. document.getElementById("myDiv").innerHTML=xhr.responseText; //獲取數據直接顯示在頁面上

②異步處理

相對來說比較復雜，要在請求狀態改變事件中處理。

? ?1. xhr.onreadystatechange=function() ?{ 2. ? ?if (xhr.readyState==4 &&xhr.status==200) ?{ 3. ? ? ? document.getElementById("myDiv").innerHTML=xhr.responseText; ?4. ? ? ?} ? ?5. ? ?}

readyState

0-（未初始化）還沒有調用send()方法

1-（載入）已調用send()方法，正在發送請求

2-（載入完成）send()方法執行完成，已經接收到全部響應內容

3-（交互）正在解析響應內容

4-（完成）響應內容解析完成，可以在客戶端調用了

status

?

③GET和POST請求數據區別

請求數據時的區別，詳情見下面兩張圖：

?

總而言之：

• GET請求的差數直接拼接在url上面

• POST請求的參數就不是放在url了，而是放在send里面，即請求體

四、結束語

其實通過 XMLHttpRequest或者封裝后的框架進行網絡請求,這種方式已經有點老舊了，配置和調用方式非常混亂，近幾年剛剛出來的Fetch提供了一個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網絡異步獲取資源，而且可以很容易地被其他技術使用。

?

**********轉摘：http://url.cn/52GlrTk

浪里行舟

?

贊賞

長按二維碼向我轉賬

?

受蘋果公司新規定影響，微信 iOS 版的贊賞功能被關閉，可通過二維碼轉賬支持公眾號。

轉載于:https://www.cnblogs.com/linybo/p/10312698.html

總結

以上是生活随笔為你收集整理的大话AJAX原理的全部內容，希望文章能夠幫你解決所遇到的問題。

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