一、什麼是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提供了一個更好的替代方法,它不僅提供了一種簡單,合乎邏輯的方式來跨網絡異步獲取資源,而且可以很容易地被其他技術使用。
閱讀更多 程序猿的內心獨白 的文章