JavaScript中發(fā)出HTTP請求最常用的方法
JavaScript具有很好的模塊和方法來發(fā)送可用于從服務(wù)器端資源發(fā)送或接收數(shù)據(jù)的HTTP請求。在本文中,我們將介紹一些在JavaScript中發(fā)出HTTP請求的流行方法。
Ajax
Ajax是發(fā)出異步HTTP請求的傳統(tǒng)方式??梢允褂肏TTP POST方法發(fā)送數(shù)據(jù),并使用HTTP GET方法接收數(shù)據(jù)。我們來看看發(fā)送GET請求。我將使用JSONPlaceholder,這是一個免費(fèi)的在線REST API,適用于以JSON格式返回隨機(jī)數(shù)據(jù)的開發(fā)人員。 要在Ajax中進(jìn)行HTTP調(diào)用,您需要初始化一個新XMLHttpRequest()方法,指定URL端點(diǎn)和HTTP方法(在本例中為GET)。最后,我們使用該open()方法將HTTP方法和URL端點(diǎn)綁定在一起,并調(diào)用該send()方法來觸發(fā)請求。 我們使用XMLHTTPRequest.onreadystatechange包含要在readystatechanged事件觸發(fā)時調(diào)用的事件處理程序的屬性將HTTP響應(yīng)記錄到控制臺。
如果您查看瀏覽器控制臺,它將返回JSON格式的數(shù)據(jù)數(shù)組。但是我們怎么知道請求是否完成了?換句話說,我們?nèi)绾问褂肁jax處理響應(yīng)? 該onreadystatechange有兩個方法,readyState 和 status允許我們可以檢查請求的狀態(tài)。
如果readyState等于4,則表示請求已完成。 除了使用JavaScript直接進(jìn)行Ajax調(diào)用之外,還有其他更強(qiáng)大的HTTP調(diào)用方法,例如$.AjaxjQuery方法。
jQuery方法 jQuery有很多方法可以輕松處理HTTP請求。要使用這些方法,您需要在項(xiàng)目中包含jQuery庫。
$.ajax
jQuery Ajax是進(jìn)行HTTP調(diào)用的最簡單方法之一。
$ .ajax方法需要許多參數(shù),其中一些是必需的,另一些是可選的。它包含兩個回調(diào)選項(xiàng)success并error處理收到的響應(yīng)。
$.get方法
$.get方法用于執(zhí)行GET請求。它需要兩個參數(shù):請求地址和回調(diào)函數(shù)。
$.post
該$.post方法是將數(shù)據(jù)發(fā)布到服務(wù)器的另一種方法。它需要三個參數(shù):請求的url地址您要發(fā)送的數(shù)據(jù)和回調(diào)函數(shù)。
$.getJson
該$.getJSON方法僅檢索JSON格式的數(shù)據(jù)。它需要兩個參數(shù):url和回調(diào)函數(shù)。
jQuery具有所有這些方法來請求或?qū)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器。但實(shí)際上你可以將所有這些方法合而為一:$.ajax方法,如下例所示:
Fetch
fetch是一個新的功能強(qiáng)大的Web API,可以讓您發(fā)出異步請求。事實(shí)上,這fetch是制作HTTP請求的最佳和最喜歡的方式之一。它返回一個“Promise”,這是ES6的一大特色。 如果你不熟悉ES6,你可以閱讀一下關(guān)于ES6的文章。Promise允許我們以更智能的方式處理異步請求。我們來看看fetch技術(shù)如何運(yùn)作。
該fetch函數(shù)需要一個必需參數(shù):endpointURL。它還有其他可選參數(shù),如下例所示:
如您所見,fetch制作HTTP請求有許多優(yōu)點(diǎn)。此外,在fetch中還有其他模塊和插件,允許我們向服務(wù)器端發(fā)送和從服務(wù)器端接收請求,例如Axios.
Axios
Axios是一個用于發(fā)出HTTP請求的開源庫,并提供許多強(qiáng)大的功能。我們來看看它是如何工作的。
用法: 首先,您需要包含Axios。有兩種方法可以在項(xiàng)目中包含Axios。 首先,你可以使用npm: npm install axios --save
然后你需要導(dǎo)入它 import axios from 'axios'
使用axios發(fā)出請求: 使用Axios,您可以使用GET和POST從服務(wù)器檢索和發(fā)布數(shù)據(jù)。
axios采用一個必需參數(shù),也可以采用第二個可選參數(shù)。這將一些數(shù)據(jù)作為簡單查詢。
POST:
Axios返回“Promise”。如果您熟悉promises,您可能知道promise可以執(zhí)行多個請求。您可以使用axios執(zhí)行相同的操作并同時運(yùn)行多個請求。
Axios支持許多其他方法和選項(xiàng)。你可以官網(wǎng)了解他們
總結(jié)
以上所述是小編給大家介紹的JavaScript中發(fā)出HTTP請求最常用的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Boostrap基礎(chǔ)教程之JavaScript插件篇
Boostrap提供了12種JavaScript插件,在本文中給大家介紹了,不知道的朋友可以參考下,本文重點(diǎn)給大家介紹bootstrap基礎(chǔ)之js插件,感興趣的朋友一起學(xué)習(xí)吧2016-09-09
獲取客戶端網(wǎng)卡MAC地址和IP地址實(shí)現(xiàn)JS代碼
獲取客戶端的一些信息,如IP和MAC,以結(jié)合身份驗(yàn)證,相信很多人都會這樣做吧,我們這里用Javascript,這樣做的好處是不需要服務(wù)器端進(jìn)行處理,有客戶端自行獲取,感興趣的你可以參考下哈2013-03-03
微信小程序wx.request實(shí)現(xiàn)后臺數(shù)據(jù)交互功能分析
這篇文章主要介紹了微信小程序wx.request實(shí)現(xiàn)后臺數(shù)據(jù)交互功能,分析微信小程序wx.request在后臺數(shù)據(jù)交互過程中遇到的問題與相關(guān)的解決方法,需要的朋友可以參考下2017-11-11
(推薦一個超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib
(推薦一個超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib...2007-04-04

