摘要:在看了一些文章之后,對(duì)有了初步的一些了解。所以應(yīng)該盡量避免使用同步請(qǐng)求。所以在同步請(qǐng)求的情況下,是無(wú)法進(jìn)行跨域的。默認(rèn)值是空字符串只有請(qǐng)求完成時(shí),該屬性才會(huì)有正確的值如果請(qǐng)求沒(méi)完成,該屬性的值可能是或。表示請(qǐng)求的方式,或者是。
在看了一些文章之后,對(duì)Ajax有了初步的一些了解。Ajax的定義不用多說(shuō),主要記錄一下Ajax的簡(jiǎn)單實(shí)現(xiàn)。
第一種方式是通過(guò)xhr(XMLHttpRequest)方式來(lái)發(fā)送Ajax請(qǐng)求。最基礎(chǔ)簡(jiǎn)單的步驟是三步:創(chuàng)建一個(gè)xhr對(duì)象;調(diào)用open()方法,調(diào)用send()方法。
創(chuàng)建一個(gè)xhr對(duì)象是再簡(jiǎn)單不過(guò)的了 var xhr = new XMLHttpRequest();
open()方法是創(chuàng)建一個(gè)請(qǐng)求 xhr.open("POST","/serve",true);
open()方法有三個(gè)參數(shù),分別是:
method: 請(qǐng)求的方式,如GET/POST,該參數(shù)不區(qū)分大小寫;
url: 請(qǐng)求的地址,該地址可以是相對(duì)的(相對(duì)于當(dāng)前網(wǎng)頁(yè)的url路徑),也可以是絕對(duì)的;
async: 默認(rèn)值為true,即為異步請(qǐng)求,若async=true,則表示為同步請(qǐng)求。
一般默認(rèn)使用的是異步請(qǐng)求。同步請(qǐng)求的時(shí)候會(huì)出現(xiàn)一些限制:
xhr.timeout = 0; xhr.withCredentails = false; xhr.responseType = "";
不滿足以上任意一個(gè)限制,就會(huì)拋出錯(cuò)誤。
xhr.timeout 設(shè)置請(qǐng)求超時(shí)時(shí)間,如果值為0,說(shuō)明不限時(shí),在這樣的情況下,如果服務(wù)器一直沒(méi)有響應(yīng),會(huì)出現(xiàn)頁(yè)面堵塞的情況,會(huì)影響用戶的其它交互。所以應(yīng)該盡量避免使用同步請(qǐng)求。
xhr.withCredentails 跨域請(qǐng)求設(shè)置 默認(rèn)值為false??缬蛘?qǐng)求的時(shí)候需要手動(dòng)設(shè)置為true。所以在同步請(qǐng)求的情況下,是無(wú)法進(jìn)行跨域的。
xhr.responseType 設(shè)置請(qǐng)求返回的數(shù)據(jù)格式 這個(gè)屬性是在xhr標(biāo)準(zhǔn)2中才有的,在標(biāo)準(zhǔn)1里面提供的是 overrideMimeType()方法。
overrideMimeType()方法的作用是重寫response的content-type。比如說(shuō),Server端給客戶端返回了一份document或xml文檔,但希望的是通過(guò) xhr.response拿到的是一個(gè)DOM對(duì)象,那么就可以通過(guò)xhr.overrideMimeType("text/xml;charest = utf-8")來(lái)實(shí)現(xiàn)。
responseType用來(lái)指定xhr.response的數(shù)據(jù)類型,默認(rèn)的xhr.response的數(shù)據(jù)類型是String字符串。不同的responseType的值對(duì)應(yīng)不同的數(shù)據(jù)類型,如"text"對(duì)應(yīng)String字符串;"document"對(duì)應(yīng)Document對(duì)象;"json"對(duì)應(yīng)JavaScript對(duì)象;"blob"對(duì)應(yīng)Blob對(duì)象;"arrayBuffer"對(duì)應(yīng)ArrayBuffer對(duì)象。
雖然在標(biāo)準(zhǔn)2中,2種方式都存在,且都可以設(shè)置響應(yīng)返回的數(shù)據(jù)格式,但明顯xhr.responseType功能強(qiáng)大很多,也方便使用,能做到xhr.overrideMimeType()所做到的。
除了上面提到的xhr.response,xhr提供了另外2種屬性來(lái)獲取請(qǐng)求返回的數(shù)據(jù):xhr.responseText;xhr.responseXML。
xhr.response
默認(rèn)值是空字符串"";
只有請(qǐng)求完成時(shí),該屬性才會(huì)有正確的值;
如果請(qǐng)求沒(méi)完成,該屬性的值可能是""或null。(具體的值跟responseType的值有關(guān),如果responseType的值為""或"text",屬性的值為"";否則值為null)
xhr.responseText
默認(rèn)值是空字符串"";
只有當(dāng)responseType為""或"text"時(shí),才能調(diào)用該屬性,否則會(huì)拋出錯(cuò)誤;
只有請(qǐng)求成功時(shí),才有正確值,否則值為空字符串""
xhr.responseXML
默認(rèn)值為null;
只有當(dāng)responseType為""、"text"、"document"時(shí),才能調(diào)用該屬性,否則會(huì)拋出錯(cuò)誤;
只有請(qǐng)求成功并返回?cái)?shù)據(jù)被正確解析時(shí),才有正確值,否則值為null
send()方法是發(fā)送數(shù)據(jù) xhr.send(data);
send()方法的參數(shù)data有6種類型:ArrayBuffer;Blob;Document;DOMString;FormData;null。 如果是GET請(qǐng)求,一般不傳參數(shù)或者傳null參數(shù)。如果是在斷網(wǎng)情況下,該方法會(huì)拋出錯(cuò)誤,所以調(diào)用該方法的時(shí)候,需要用try-catch來(lái)捕獲異常。
try{ xhr,send(data); }catch(e){ //... };
請(qǐng)求發(fā)送之后還要處理請(qǐng)求返回的數(shù)據(jù),可以調(diào)用onload()方法或者onreadystatechange()方法。readyState這個(gè)屬性可以追蹤Ajax請(qǐng)求的當(dāng)前狀態(tài),這個(gè)屬性是可讀屬性,總共有5種不同的值(0-4),分別對(duì)應(yīng)xhr的不同階段,如3表示LOADING(正在下載響應(yīng)體)。每次xhr.readyState的值發(fā)生變化的時(shí)候,都會(huì)觸發(fā)xhr.onreadystatechange()事件。
完整例子如下:
var xhr = new XMLHttpRequest(); xhr.responseType = "json"; xhr.open("GET", "https://cnodejs.org/api/v1/topics", true); xhr.onload = function () { //如果請(qǐng)求成功 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { var res = this.response; console.log(res); //do successCallback } } xhr.send();
第二種方式是通過(guò)fetch來(lái)發(fā)送Ajax請(qǐng)求
通過(guò)fetch獲取后臺(tái)數(shù)據(jù)的代碼很簡(jiǎn)單,它會(huì)返回一個(gè)Promise對(duì)象,有多個(gè)參數(shù)。
url 請(qǐng)求的地址,該參數(shù)為必選。
method 表示請(qǐng)求的方式,GET或者是POST。
body POST請(qǐng)求的參數(shù),需要放在body里面,而GET請(qǐng)求的參數(shù)可以直接放在URL中
headers 設(shè)置請(qǐng)求的頭信息,可在里面放指定的提交方式、指定的獲取類型等信息
默認(rèn)情況下,fetch不會(huì)從服務(wù)端發(fā)送或接收任何cookies。
如果要發(fā)送cookies,必須發(fā)送憑據(jù)頭。
fetch("https://cnodejs.org/api/v1/topics",{ method: "GET", credentials: "include", }) .then((res)=>{ return res.json() }) .then((res)=>{ console.log(res); })
完整例子如下:
fetch("https://cnodejs.org/api/v1/topics",{ method: "GET", headers: new Headers({ "Accept": "application/json" }) }) .then((res)=>{ return res.json() }) .then((res)=>{ console.log(res); })
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/93483.html
摘要:轉(zhuǎn)載自樓主個(gè)人博客和入門初探在和作比較的時(shí)候兩者主要的不同就是的集成度比較高內(nèi)置斷言庫(kù)而需要搭配額外的斷言庫(kù)在此選擇了比較流行的作為斷言庫(kù)風(fēng)格的選擇其中又有好幾種斷言風(fēng)格我們經(jīng)常見(jiàn)到的其實(shí)就是風(fēng)格的其中我較喜歡因?yàn)樗梢灾苯右詫傩缘姆绞角度? 轉(zhuǎn)載自樓主個(gè)人博客 Mocha 和 Chai 入門初探 Chai 在和 jest 作比較的時(shí)候, 兩者主要的不同就是 jest 的集成度比較高內(nèi)置...
摘要:流控制通常就是在客戶端的頁(yè)面使用一個(gè)隱藏的窗口向服務(wù)端發(fā)出一個(gè)長(zhǎng)連接的請(qǐng)求。和長(zhǎng)鏈接以上幾種服務(wù)器推的技術(shù)中長(zhǎng)輪詢和流控制其實(shí)都是基于長(zhǎng)鏈接來(lái)實(shí)現(xiàn)的,也就是中所謂的。通信協(xié)議于年被定為標(biāo)準(zhǔn),并被所補(bǔ)充規(guī)范。 初探WebSocket node websocket socket.io 我們平常開發(fā)的大部分web頁(yè)面都是主動(dòng)‘拉’的形式,如果需要更新頁(yè)面內(nèi)容,則需要刷新一個(gè),但Slack工...
摘要:事件循環(huán)了解知識(shí)點(diǎn)線程執(zhí)行棧線程是單線程的語(yǔ)言可以單線程將理解為只有一條車道在車道里后面的車在等前面的車通過(guò)后才能通過(guò)即當(dāng)前面的程序沒(méi)有執(zhí)行后面的程序也不能執(zhí)行執(zhí)行棧執(zhí)行棧像車道被執(zhí)行的程序會(huì)放入執(zhí)行棧里但它的執(zhí)行的順序是后面進(jìn)來(lái)的程序先執(zhí) 事件循環(huán) 了解知識(shí)點(diǎn) 線程 執(zhí)行棧 task queue web api macro task micro task 線程 javascrip...
摘要:雙嘆號(hào)強(qiáng)制類型轉(zhuǎn)換為布爾值。官方示例代碼用注冊(cè)了全局組件,會(huì)把自動(dòng)注冊(cè)為屬性,所以沒(méi)有手動(dòng)寫屬性。如果對(duì)象是響應(yīng)的,將觸發(fā)視圖更新。這是用來(lái)布爾值,又學(xué)了一招和分別代表單擊和雙擊事件綁定。 如果覺(jué)得有幫助,歡迎 star哈~ https://github.com/jiangjiu/blog-md/issues/11 感謝作者 @尤小右 大大邊寫的超級(jí)帶感的 Vue.js 前端框架,贈(zèng)送...
閱讀 2070·2023-04-26 01:41
閱讀 2587·2021-11-24 09:39
閱讀 2000·2021-11-24 09:38
閱讀 2043·2021-11-19 09:40
閱讀 3896·2021-11-11 11:02
閱讀 3356·2021-10-20 13:48
閱讀 3353·2021-10-14 09:43
閱讀 4615·2021-09-02 15:11