成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

AJAX的學(xué)習(xí)筆記（二）

Charles / 1572人閱讀

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

在上篇筆記中，我們主要談了一些概述和跨域的問(wèn)題，這一次我們聊聊請(qǐng)求和響應(yīng)的具體內(nèi)容。
向服務(wù)器發(fā)起請(qǐng)求

我們?cè)趧?chuàng)建了XHR對(duì)象后，接著需要用兩個(gè)方法來(lái)發(fā)送請(qǐng)求：open()和send()，這兩個(gè)方法有點(diǎn)像賽跑前的兩個(gè)步驟：預(yù)備、跑。在open()中，并沒(méi)有實(shí)際發(fā)送請(qǐng)求，只是一個(gè)“預(yù)備”動(dòng)作，真正的發(fā)送要到send()中了。

open和send

open()可以傳遞三個(gè)參數(shù)：

method：請(qǐng)求的類型，GET或POST之類；

url：文件在服務(wù)器的位置；

async：同步或是異步，默認(rèn)異步，當(dāng)選擇默認(rèn)時(shí)，我們可以選擇不填這個(gè)參數(shù)。

send()的參數(shù)只有一個(gè)，是運(yùn)用在post方式的請(qǐng)求中，以string的形式。

以下是一個(gè)例子：

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

get常用于查詢數(shù)據(jù)，有時(shí)候，需要我們用某種指定的格式把參數(shù)追加到url的末尾。如果格式不正確的話，會(huì)出現(xiàn)錯(cuò)誤。

舉一個(gè)例子：

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

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

HTTP頭部信息

每個(gè)HTTP請(qǐng)求都帶有頭信息，所以我們發(fā)送一個(gè)AJAX請(qǐng)求時(shí)，實(shí)際上也會(huì)發(fā)送相關(guān)的頭信息。默認(rèn)情況下，下列的頭信息會(huì)被發(fā)送出去：

Accept；

Accept-Charset；

Accept-Ending；

Accept-Language；

Connection；

Cookie；

Host；

Refer；

User-Agent；

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

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

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

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

服務(wù)器響應(yīng)

當(dāng)我們發(fā)送請(qǐng)求后，一切順利，服務(wù)器也順利發(fā)回了響應(yīng)，那么我們要怎么來(lái)獲取這些響應(yīng)呢？

responseText和responseXML

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

舉一個(gè)例子：

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級(jí)

XHR的發(fā)展也促使W3C著手制定更為完善的2級(jí)規(guī)范。在這套規(guī)范里，有一些內(nèi)容需要了解。

FormData

為了實(shí)現(xiàn)表單數(shù)據(jù)的序列化，在Web應(yīng)用中更方便地傳輸數(shù)據(jù)，2級(jí)規(guī)范定義了FormData類型。

下面是一個(gè)創(chuàng)建FormData實(shí)例的例子：


    名字
    密碼
    

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

創(chuàng)建了FormData的實(shí)例后，可以直接傳到send中。

關(guān)于更詳細(xì)的FormData知識(shí)，請(qǐng)參考這篇文章：
系統(tǒng)學(xué)習(xí)前端之FormData詳解 - 前端與生活 - SegmentFault

超時(shí)設(shè)置

最早是IE8為XHR添加了timeout屬性，后來(lái)被XHR 2級(jí)規(guī)范收入。

當(dāng)給timeout設(shè)置了數(shù)值后，規(guī)定時(shí)間內(nèi)沒(méi)有響應(yīng)，就會(huì)觸發(fā)timoeout事件，進(jìn)而調(diào)用ontimeout。

這是一個(gè)例子：

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

XHR 2的進(jìn)度事件定義了XHR在請(qǐng)求的不同階段觸發(fā)不同的事件，具體的有6個(gè)事件：

loadstart；

progress；

error；

abort；

load；

loadend；

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

其中l(wèi)oad事件和progress事件比較重要。load事件會(huì)在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)，因此我們就不需要再檢查readyState屬性了，只要確保XHR的status為200就可以了。

而progress事件則會(huì)為XHR在瀏覽器接收數(shù)據(jù)期間周期性地觸發(fā)。在觸發(fā)時(shí)，它會(huì)額外地提供三個(gè)屬性：

lengthComputable；表示進(jìn)度信息是否可用

position；表示已經(jīng)接收的字節(jié)數(shù)

totalSize；表示響應(yīng)頭確定的預(yù)期字節(jié)數(shù)

有了這些信息，我們可以創(chuàng)造一個(gè)進(jìn)度指示器：

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";
}
};

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92857.html

相關(guān)文章

  • 26天學(xué)通前端開發(fā)（配資料）

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

    blair 評(píng)論0 收藏0

  • Ajax筆記

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

    macg0406 評(píng)論0 收藏0

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評(píng)論0 收藏0

  • JSON學(xué)習(xí)筆記（一）

    先學(xué)習(xí)阮大神的 數(shù)據(jù)類型和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 評(píng)論0 收藏0

  • Ajax學(xué)習(xí)筆記

    摘要：最近在學(xué)，剛剛?cè)腴T，用到很多與相關(guān)的交互。也用了挺久的了，想寫一下學(xué)習(xí)筆記來(lái)記錄一下。實(shí)現(xiàn)過(guò)程是的基礎(chǔ)，是核心對(duì)象，首先要實(shí)例化一個(gè)對(duì)象進(jìn)行請(qǐng)求，規(guī)定請(qǐng)求的類型以及是否異步處理請(qǐng)求。響應(yīng)服務(wù)器狀態(tài)響應(yīng)服務(wù)器狀態(tài)涉及對(duì)象的三個(gè)重要的屬性。 最近在學(xué)php，剛剛?cè)腴T，用到很多與Ajax相關(guān)的交互。Ajax也用了挺久的了，想寫一下學(xué)習(xí)筆記來(lái)記錄一下。今天先簡(jiǎn)單寫一下原理和過(guò)程。歡迎大家一起探...

    Forest10 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<