ajax原理

1、什麼是Ajax

Ajax(Asynchronous Java and XML的縮寫)是一種異步請求數據的web開發技術，對於改善用戶的體驗和頁面性能頗有幫助。簡單地說，在不須要從新刷新頁面的狀況下，Ajax 經過異步請求加載後臺數據，並在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。

Ajax目的：提升用戶體驗，較少網絡數據的傳輸量

2、Ajax原理是什麼

在解釋Ajax原理以前，咱們不妨先舉個「領導想找小李彙報一下工做」例子，領導想找小李問點事，就委託祕書去叫小李，本身就接着作其餘事情，直到祕書告訴他小李已經到了，最後小李跟領導彙報工做。

Ajax請求數據流程與「領導想找小李彙報一下工做」相似。其中最核心的依賴是瀏覽器提供的對象，它扮演的角色至關於祕書，使得瀏覽器能夠發出HTTP請求與接收HTTP響應。瀏覽器接着作其餘事情，等收到XHR返回來的數據再渲染頁面。理解了Ajax的工做原理後，接下來咱們探討下如何使用Ajax。

3、Ajax的使用

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

1. var xhr=null;

2. if (window.)

3. {// 兼容 IE7+, Firefox, Chrome, Opera, Safari

4. xhr=new ();

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=Henrylname=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裏面，即請求體4、結束語

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

參考：http://www.sohu.com/a/238246281_100109711