AJAX的學習筆記（二）

Charles 發布于2019-08-22 14:06 / 1568人閱讀

摘要：與不同的是，應該以發送的數據作為請求的主體。有了這些不同的事件支持，開發者可以免去檢查之類的工作，更加的方便。其中事件和事件比較重要。而事件則會為在瀏覽器接收數據期間周期性地觸發。

在上篇筆記中，我們主要談了一些概述和跨域的問題，這一次我們聊聊請求和響應的具體內容。

向服務器發起請求

我們在創建了XHR對象后，接著需要用兩個方法來發送請求：open()和send()，這兩個方法有點像賽跑前的兩個步驟：預備、跑。在open()中，并沒有實際發送請求，只是一個“預備”動作，真正的發送要到send()中了。

open和send

open()可以傳遞三個參數：

method：請求的類型，GET或POST之類；

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

async：同步或是異步，默認異步，當選擇默認時，我們可以選擇不填這個參數。

send()的參數只有一個，是運用在post方式的請求中，以string的形式。

以下是一個例子：

xhr.open("GET","example.php",true);
xhr.send();
//post不需要傳遞參數；
xhr.open("POST","example.php",true);
xhr.send();
//post需要傳遞參數；
xhr.open("POST","example.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlcoded");
xhr.send("fname=henry&lname=ford")

get和post

get常用于查詢數據，有時候，需要我們用某種指定的格式把參數追加到url的末尾。如果格式不正確的話，會出現錯誤。

舉一個例子：

xhr.open("get","example.php?name1=value1&name2=value2",true");
xhr.send();

post多用于向服務器提交應該被保存的數據。與get不同的是，post應該以發送的數據作為請求的主體。參數則不需要寫在url里了，而是寫在send里，在這里，可以傳遞XML DOM文檔也可以傳遞字符串。當然，要注意的是，如果只是簡單的，沒有數據傳遞的POST請求，那么和GET請求一樣，在send()中不需要添加什么。如果需要POST數據，我么要用setRequestHeader()來添加HTTP頭，然后在send()中用參數的形式添加數據傳遞。

HTTP頭部信息

每個HTTP請求都帶有頭信息，所以我們發送一個AJAX請求時，實際上也會發送相關的頭信息。默認情況下，下列的頭信息會被發送出去：

Accept；

Accept-Charset；

Accept-Ending；

Accept-Language；

Connection；

Cookie；

Host；

Refer；

User-Agent；

使用setRequestHeader()可以設置自定義的頭信息。這個方法接收兩個參數：頭部字段的名稱和值。例如：

xhr.setRequestHeader("Content-type","application/x-www-form-urlcoded");

xhr.setRequestHeader("MyHeader","MyValue");

要注意的是：setRequestHeader方法需要在open()和send()中間設置，這樣才能成功發送請求的頭部信息。

服務器響應

當我們發送請求后，一切順利，服務器也順利發回了響應，那么我們要怎么來獲取這些響應呢？

responseText和responseXML

這是獲取兩種不同格式的響應，esponseText是字符串形式，responseXML則是XML形式。

舉一個例子：

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
}else{
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
  if(xhr.readyState==4 && xhr.status==200){
    document.getElementById("myDiv").innerHTML=xhr.responseText;
  }
}
xhr.open("get","example.php",true);
xhr.send();

就是這樣。

XHR 2級

XHR的發展也促使W3C著手制定更為完善的2級規范。在這套規范里，有一些內容需要了解。

FormData

為了實現表單數據的序列化，在Web應用中更方便地傳輸數據，2級規范定義了FormData類型。

下面是一個創建FormData實例的例子：


    名字
    密碼

var data=new FormData();
//直接添加鍵值對
data.append("nama","Mike");
//通過向構造函數中傳入表單元素也可
  //這是一個表單元素
var form=document.getElementById("myForm");
  //傳入
var data=new FormData(form);
xhr.send(data);
  //獲取
var name=data.get("name");
var psw=data.get("psw");

創建了FormData的實例后，可以直接傳到send中。

關于更詳細的FormData知識，請參考這篇文章：
系統學習前端之FormData詳解 - 前端與生活 - SegmentFault

超時設置

最早是IE8為XHR添加了timeout屬性，后來被XHR 2級規范收入。

當給timeout設置了數值后，規定時間內沒有響應，就會觸發timoeout事件，進而調用ontimeout。

這是一個例子：

var xhr;
...
xhr.open("get","example.php",true);
xhr.timeout=1000;
xhr.ontimeout=function(){
  alert("Request is not return in a second"
};
xhr.send();

進度事件

XHR 2的進度事件定義了XHR在請求的不同階段觸發不同的事件，具體的有6個事件：

loadstart；

progress；

error；

abort；

load；

loadend；

每個瀏覽器所支持的事件不完全相同，比如IE8就支持load事件。有了這些不同的事件支持，開發者可以免去檢查readyState之類的工作，更加的方便。

其中load事件和progress事件比較重要。load事件會在接收到完整的響應數據時觸發，因此我們就不需要再檢查readyState屬性了，只要確保XHR的status為200就可以了。

而progress事件則會為XHR在瀏覽器接收數據期間周期性地觸發。在觸發時，它會額外地提供三個屬性：

lengthComputable；表示進度信息是否可用

position；表示已經接收的字節數

totalSize；表示響應頭確定的預期字節數

有了這些信息，我們可以創造一個進度指示器：

var xhr=createXHR();
xhr.onload=function(event){
...
}
xhr.onprogress=function(event){
  var divStatus=document.getElementById("status");
if(event.lengthCoputable){
  divStatus.innerHTML="Reiceived"+event.position+"of"+event.totalSize+"bytes";
}
};

這里要注意的是：必須在調用open()方法之前添加progress事件處理程序。

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92857.html

26天學通前端開發（配資料）

摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。前言好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。網上有很多前端的學習路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0
Ajax筆記

摘要：本文主要是我學習的筆記，不涉及到原理，只是記錄如何使用。成功的含義取決于方法資源已被提取并在消息正文中傳輸。是請求鏈接到服務器，服務器響應錯誤后服務器返回瀏覽器的狀態碼。是指響應時間，開始請求到接收到響應開始處理的時間，單位為。本文主要是我學習ajax的筆記，不涉及到原理，只是記錄如何使用。如果有錯歡迎各位大佬指出。提前先轉一篇寫的非常全面的博客你真的會使用XMLHttpReques...

macg0406 2019-08-23 13:48 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
JSON學習筆記（一）

先學習阮大神的數據類型和Json格式一、js中解析JSON的方式 eval() JSON.parse var jsondata = {staff:[{name:小紅,age:16},{name:小明,age:20},{name:小芳,age:18}]} var jsonobj = eval(( + jsondata + )) alert( jsonobj.staff[0].name); s...

Scott 2019-08-20 15:55 評論0 收藏0
Ajax學習筆記

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

Forest10 2019-08-23 14:01 評論0 收藏0