XMLHttpRequest(XHR)

2000年代半ばにブラウザにXMLHttpRequest(XHR)が導入されたことは、Webプラットフォームにとって大きな勝利でした。それがどのように機能するか見てみましょう。

前書き

2000年代半ばにブラウザにXMLHttpRequest(XHR)が導入されたことは、Webプラットフォームにとって大きな勝利でした。それがどのように機能するか見てみましょう。

当時は普通に見えていたものが、未来から来ているように見えました。たとえば、GMailやGoogleマップについて話していますが、これらはすべてXHRに大部分が基づいていました。

XHRは90年代にマイクロソフトで発明され、すべてのブラウザが2002年から2006年の期間に実装したため、事実上の標準になりました。 W3Cは2006年にXMLHttpRequestを標準化しました。

Webプラットフォームで発生することがあるため、最初はいくつかの不整合があり、XHRの操作がまったく異なるクロスブラウザーになりました。

jQueryのようなライブラリは、開発者に使いやすい抽象化を提供することで人気を高め、これがこのテクノロジーの使用を広めるのに役立ちました。

XHRリクエストの例

次のコードは、XMLHttpRequest(XHR)リクエストオブジェクトを作成し、に応答するコールバック関数をアタッチします。onreadystatechangeイベント。

xhr接続は、GETリクエストを実行するように設定されていますhttps://yoursite.com、そしてそれはで始まります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メソッドを指定することもできます-(getpostheadputdeleteoptions)。

他のパラメーターを使用すると、falseに設定されている場合に要求を同期させるフラグと、HTTP認証の資格情報のセットを指定できます。

open(method, url, asynchronous, username, password)

onreadystatechange

ザ・onreadystatechangeXHRリクエスト中に複数回呼び出されます。以外のすべての状態を明示的に無視しますreadyState === 4、これはリクエストが完了したことを意味します。

州は

  • 1(OPENED):リクエストが開始されます
  • 2(HEADERS_RECEIVED):HTTPヘッダーが受信されました
  • 3(LOADING):応答のダウンロードが開始されます
  • 4(完了):応答がダウンロードされました

XHRリクエストを中止する

XHRリクエストは、を呼び出すことで中止できます。abort()上の方法xhrオブジェクト。

jQueryとの比較

jQueryを使用すると、これらの行を次のように変換できます。

$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

フェッチとの比較

とともにフェッチAPIこれは同等のコードです:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

クロスドメインリクエスト

XMLHttpRequest接続には、セキュリティ上の理由から適用される特定の制限が適用されることに注意してください。

最も明白なものの1つは、同一生成元ポリシーの実施です。

別のサーバー上のリソースにアクセスすることはできません。そうでなければサーバーはこれを使用して明示的にサポートしますCORS(クロスオリジンリソースシェアリング)

XHRを使用したファイルのアップロード

の私のチュートリアルをチェックしてくださいXHRを使用してファイルをアップロードする方法

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: