XHR

了解什麼是ArrayBuffer以及如何使用它 就像Blob是對磁碟上可用數據的不透明表示一樣，ArrayBuffer是對內存中可用位元組的不透明表示。 構造函數接受一個參數，即以位元組為單位的長度： const buffer = new ArrayBuffer(64) ArrayBuffer有一個（只讀）屬性：byteLength，正如其名，表示其長度以位元組為單位。 它還提供了一個slice()實例方法，從現有ArrayBuffer中創建新的ArrayBuffer，接受一個起始位置和一個可選的長度： const buffer = new ArrayBuffer(64) const newBuffer = buffer.slice(32, 8) 通過ArrayBuffer從互聯網下載數據 我們可以使用XHR從互聯網下載blob，並將其存儲到ArrayBuffer中： const downloadBlob = (url, callback) => { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.responseType = 'arraybuffer' xhr.onload = () => { callback(xhr.response) } xhr.send(null) }

XMLHttpRequest（XHR）的引入是Web平台的重大胜利。让我们看看它是如何工作的。 介紹 一個XHR請求的例子 附加的open()參數 onreadystatechange 中止XHR請求 與jQuery的比較 與Fetch的比較 跨網域請求 使用XHR上傳文件 介紹 在2000年代中期，網絡瀏覽器中引入XMLHttpRequest（XHR）是Web平台的重大突破。讓我們看看它是如何工作的。 許多現在看起來很正常的東西，在當時看起來就像來自未來。例如，我談論的GMail或Google Maps在很大程度上都依賴於XHR。 XHR是在九十年代由Microsoft發明的，由於所有瀏覽器在2002年至2006年期間都實現了它，它成為事實上的標准。W3C於2006年將XMLHttpRequest標准化。 就像在Web平台上有時會發生的情況一樣，最初有一些不一致之處，這使得在不同的瀏覽器中使用XHR變得非常不同。 像jQuery這樣的庫通過提供一個易於使用的抽象層，受到開發人員的歡迎，這反過來又幫助傳播了這項技術。 一個XHR請求的例子 以下代碼創建一個XMLHttpRequest（XHR）請求對象，並附加一個在onreadystatechange事件上響應的回調函數。 xhr連接的設置為向https://yoursite.com發送GET請求，並使用send()方法開始： const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4) { xhr.status === 200 ? console.log(xhr.responseText) : console.error('error') } } xhr.open('GET', 'https://yoursite.com') xhr.send() 附加的open()參數 在上面的例子中，我們只傳遞了方法和URL給請求。 我們還可以指定其他HTTP方法-（get，post，head，put，delete，options）。 其他參數讓您可以指定一個標誌，如果將其設置為false，則可以使請求同步進行，並為HTTP驗證指定一組憑據： open(method, url, asynchronous, username, password) onreadystatechange onreadystatechange在XHR請求期間多次被調用。我們明確忽略除readyState === 4以外的所有狀態，這意味著請求已完成。 狀態有： 1（OPENED）：請求開始 2（HEADERS_RECEIVED）：已接收到HTTP標頭 3（LOADING）：響應開始下載 4（DONE）：響應已下載 中止XHR請求 可以通過在xhr對象上調用abort()方法來中止XHR請求。 與jQuery的比較 在使用jQuery時，這些代碼可以轉寫為： $.get('https://yoursite.com', data => { console....

我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。 該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。 在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。 無論如何，導出的代碼片段有幾個，我想展示不同庫中相同的API調用。 首先，這是API調用的描述。我向 api.randomservice.com 網站發送一個POST請求（這是我隨便想出的一個隨機URL）到 /dog 端點。 我向該端點發送一個帶有2個屬性的對象： { name: 'Roger', age: 8 } 作為JSON編碼。 我還傳遞了一個 content-type 以將內容設置為 application/json，並且還傳遞了一個 authorization 標頭，以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。 XHR 第一個代碼示例是使用XHR（可在瀏覽器中原生支持）和在Node.js中使用xmlhttprequest庫： const data = JSON.stringify({ name: 'Roger', age: 8 }); const xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener('readystatechange', function() { if (this.readyState === this.DONE) { console.log(this.responseText); } }); xhr.open('POST', 'https://api.randomservice.com/dog'); xhr.setRequestHeader('content-type', 'application/json'); xhr.setRequestHeader('authorization', 'Bearer 123abc456def'); xhr.send(data); Fetch API 然後，我們使用Fetch API進行相同的代碼片段，這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API： fetch('https://api.randomservice.com/dog', { method: 'POST', headers: { 'content-type': 'application/json', authorization: 'Bearer 123abc456def' }, body: JSON....