絕對冷知識，瀏覽器環境下JavaScript能夠利用到的提交/請求數據的方式有這么多！你都深入了解了

bingchen 發布于2019-08-19 18:46 / 2843人閱讀

摘要：你知道在瀏覽器環境下能夠利用到的提交請求數據的方式有哪些嗎這些方式各自有什么特點呢在什么情況下使用呢讓我們一起來整理一下。其實這也是能夠利用到的提交請求數據的方式之一。

你知道在瀏覽器環境下JavaScript能夠利用到的提交/請求數據的方式有哪些嗎？這些方式各自有什么特點呢？在什么情況下使用呢？讓我們一起來整理一下。

基礎知識

建議大家先看完這幾篇文章，了解一下基礎知識

HTTP訪問控制(CORS)

瀏覽器和服務器實現跨域（CORS）判定的原理

JavaScript 的同源策略

淺談瀏覽器端JavaScript跨域解決方法

XMLHTTPRequest

XMLHTTPRequest是最常見的，也是很多框架封裝的數據請求方法的底層實現，如我們最熟悉的各類框架的Ajax方法。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Form Action

可以利用Form(表單)來提交/請求，這太常用，于是我們習以為常了。其實這也是JavaScript能夠利用到的提交/請求數據的方式之一。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
文檔有意思的，常被新手忽略的的target屬性，可配合iframe實現無刷新地與服務器交互（跨域）

A Href

既然Form Action也算，那a標簽的href也算吧，233
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Script Src

沒錯，這個也算。JSONP就是利用script標簽的src來請求數據，然后等待數據請求完畢后從script標簽中讀取數據，巧妙地解決了跨越的問題。一些AMD JavaScript框架也用script標簽來異步加載模塊，如requirejs。一些JavaScript模版也會用script標簽來加載模版，如artTemplate。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Link Href

沒錯我說的就是這些。腦洞開起來，一起整理出來。

詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Img Src

這個也可以用來數據，一般是圖像數據。JavaScript可以監聽圖像加載后的響應。可以拿到圖像像素數據，可以配合Canvas做復雜圖像處理，不過有跨域限制。

詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Audio Src

和上面的差不多。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
對于audio底層處理有興趣的可以參考這篇

努力翻譯一篇中文最友好的，Web Audio API的使用相關的文章

Video Src

和上面的差不多。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

frame& iframe Src

差點忘了這兩個兄弟，雖然哥哥frame已經基本沒人用了。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Fetch

這個新出的玩意兒，只有少數高版本瀏覽器支持。本質與XMLHTTPRequest不同。但有的框架為了支持更多平臺，統一API，對不支持Fetch的瀏覽器提供底層XMLHTTPRequest實現的支持。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

PS: 以上大多數情況下都是用到基于HTTP協議的功能，少數有用到file協議和ftp協議的。

WebSocket

WebSocket則提供給我們機會讓我們利用TCP協議與服務端建立長鏈接，持續通信。
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

WebRTC

越來越厲害了，233
詳細文檔：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

還有嗎？歡迎補充&糾錯

補充一點，注意區分get跨域和post跨域

待更新

fetch的源碼，原理相關

云服務器 GPU云服務器深入了解javascript 數據庫拒絕了我們的連接請求有這么多服務器請求的幾種方式

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

轉載請注明本文地址：http://m.hztianpu.com/yun/79974.html

前端周報：前端面試題及答案總結；JavaScript參數傳遞的深入理解

摘要：前端面試題及答案總結掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月。因為的存在，至少在被標準化的那一刻起，就支持異步編程了。然而異步編程真正發展壯大，的流行功不可沒。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面試題及答案總結 |掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月...

ermaoL 2019-08-21 16:46 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0
JavaScript簡明教程之瀏覽器，前端程序猿必看

摘要：瀏覽器對象可以獲取瀏覽器提供的很多對象，并進行操作。對象不但充當全局作用域，而且表示瀏覽器窗口。對象表示當前頁面的信息。由于在瀏覽器中以形式表示為樹形結構，對象就是整個樹的根節點。這個行為由瀏覽器實現，主流瀏覽器均支持選項，從開始支持。由于JavaScript的出現就是為了能在瀏覽器中運行，所以，瀏覽器自然是JavaScript開發者必須要關注的。【寫的比較多，難免有疏漏的地方，希望...

_ivan 2019-08-20 10:31 評論0 收藏0
后端好書閱讀與推薦（續二）

摘要：后端好書閱讀與推薦系列文章后端好書閱讀與推薦后端好書閱讀與推薦續后端好書閱讀與推薦續二幾個月又過去了，又讀了幾本書，同時為了深切體會到某些書里面的要點還專門做了一個小項目，這里就把讀書與小項目過程中的一些心得體會記錄一下。后端好書閱讀與推薦系列文章：后端好書閱讀與推薦后端好書閱讀與推薦（續）后端好書閱讀與推薦（續二）幾個月又過去了，又讀了幾本書，同時為了深切體會到某些書里面的要點還...

Jioby 2019-08-15 12:28 評論0 收藏0