English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

AjaxとComet技術の要約

Ajaxは、ページを再読み込みしないでサーバーに追加データをリクエストできる技術であり、より良いユーザーエクスペリエンスを持つウェブページを可能にします。Ajax技術の核心はXMLHttpRequestオブジェクト（XHR）です。この記事ではXHRから始め、Ajax技術の特徴を理解し、クロスドメインおよびCometなどの技術について簡単に理解し、要約します。

XMLHttpRequestの基本的な使い方

XHRオブジェクトには、openとsendという2つの一般的なメソッドがあります。openメソッドはHTTPリクエストを開始するために使用されますが、実際にはHTTPリクエストを送信しません。openメソッドは受け取る3の引数があります。これはそれぞれ、HTTPリクエストのメソッド、URL、非同期フラグを示します。XHRオブジェクトの第2つのメソッドsendは、openで開始されたリクエストを送信するために使用されます。sendメソッドは、1の引数があります。これはHTTPリクエストの主体データを示します。GETリクエストで主体データが含まれないHTTPリクエストの場合は、nullを入力します。POSTリクエストの場合は、POSTするデータを入力します。以下は簡単な例です。/api/dataでGETリクエストを発行し、非同期でリクエストを送信します。つまり、このリクエストはページ内の他のjsコードの実行をブロックしません。

var xhr = new XMLHttpRequest()
xhr.open("get", "/api/data", true)
xhr.send(null)

リクエストで取得した応答データは自動的にXHRオブジェクトの属性に埋め込まれます。主に以下の4の属性があります：

* responseText: 応答の本文
* responseXML: 応答の内容タイプが"text/xml"または"application/xml"という属性に含まれる応答データのXML DOMドキュメントが含まれます。
* status: 応答のHTTP状態コードです。一般的にはHTTP状態コードを200が成功のシグナルと見なされます。
* statusText: HTTP状態の説明

XHRオブジェクトには1のreadyState属性は、XHRオブジェクトが作成されてから応答データを受け取るまでに経験する可能性のある5種類の状態があります。readyStateの可能な値は以下の通りです：

に達したことを確認するだけで十分です。: open()メソッドを呼び出してリクエストを初期化していない。

1に達したことを確認するだけで十分です。: open()メソッドを呼び出したが、send()メソッドを呼び出していない。

2に達したことを確認するだけで十分です。: send()メソッドを呼び出したが、まだ応答が受け取れていません。

3に達したことを確認するだけで十分です。: 部分の応答データを受け取ったが、まだデータが受け取られていない部分があります。

4に達したことを確認するだけで十分です。: 全ての応答データを受け取った、つまり応答が終了し、データが完全です。

readyStateが値から値に変わるたびにreadystatechangeイベントがトリガーされます。このイベントがトリガーされたときは、イベントハンドラ内でreadyStateの値が4の値が4応答データに対して後続処理を行うことができます。readystatechangeイベントに対するハンドラを指定するのは、open()メソッドを呼び出す前に完了する必要があります。これにより、ブラウザ間の互換性を確保できます。以下は簡単な例です。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
 }
}
xhr.open("get", "/api/data", true)
xhr.send(null)

XHRオブジェクトはsetRequestHeader()メソッドを提供しており、リクエストのカスタムHTTPヘッダー情報を設定できます。このメソッドは、設定するフィールドとその値の2つの引数を受け取ります。open()メソッドでリクエストを開始し、send()メソッドでリクエストを送信する前にsetRequestHeader()を呼び出すことで、設定が成功します。リクエストに対する応答を受け取った後、getResponseHeader()メソッドを使って応答のHTTPヘッダー情報を取得できます。このメソッドは、1パラメータ、すなわち取得したいフィールド名を取得します。getAllResponseHeaders()を使用すると、すべてのヘッダ情報が長い文字列として取得できます。以下は、簡単な例です。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
  console.log(xhr.getResponseHeader('SomeKey'))
  console.log(xhr.getAllResponseHeaders())
 }
}
xhr.open("get", "/api/data", true)
xhr.setRequestHeader("SomeKey", "SomeValue")
xhr.send(null)

FormData

XMLHttpRequest 2FormDataクラスは、フォームのシリアライズ、フォーム形式のデータの作成、XHR送信の利便性を提供するために定義されています。FormDataはappend()メソッドを使用してデータを直接追加することができます。このメソッドは、キーと値の2つの引数を受け取ります。FormDataのコンストラクタは、引数を渡さない場合もあれば、直接引数を渡す場合もあります。1フォーム要素を入力します。フォーム要素を入力すると、フォーム要素のデータを使用してFormDataオブジェクトに事前にキーペアを入力します。以下は、簡単な例です。

var form = document.getElementById('myForm')
var data = new FormData(form)
data.append('someKey', 'someValue')
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('post', '/api/upload', true)
xhr.send(data)

クロスドメイン资源共享

XHRを使用してAjax通信を実現する際に、一つの制限に直面します。それは、クロスドメインセキュリティポリシーです。クロスドメインセキュリティポリシーは「同じドメイン、同じポート、同じプロトコル」を制限しており、XHRが制限外のリソースにアクセスしようとすると、セキュリティエラーが発生します。CORS（Cross-Origin Resource Sharing）-オリジンリソースシェアリング（CORS）、ドメイン間资源共享は、カスタムHTTPヘッダを使用してブラウザとサーバーがコミュニケーションを取ることで、リクエストやレスポンスの成功と失敗を決定する方法です。これを実現するためには、ブラウザとサーバーが同時にサポートする必要があります。現在、ほとんどのブラウザがCORSをサポートしており、コードの書き方が通常のドメイン内リソースアクセスとほぼ同じです。ただし、URLは絶対パスで表現する必要があります。したがって、ドメイン間アクセスを実現する鍵はサーバー側にあります。具体的な実現方法については、ここでは詳しく説明しません。以下は、フロントエンドJavaScriptの簡単な例です。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('get', 'http://www.otherserver.com/api/data', true)
xhr.send(null)

JSONP

JSONP（JSON with padding）は、JSONを実用化してクロスドメインリソースアクセスを実現する方法です。JSONPは二つの部分から構成されています：コールバック関数とJSONデータ。先ほど述べたように、XHRリクエストはクロスドメインセキュリティポリシーの制限に直面しますが、HTMLのscriptタグにはその制限はありません。異なるドメインのjsファイルを参照することができます。JSONPはこの空隙を突いて、動的にscript要素を作成し、srcを他のドメインのURLに設定することで他のドメインのリソースをロードし、それをコールバック関数で処理します。以下に簡単な例を示します。

function handler(res) {
 console.log(res)
}
var script = document.createElement('script')
script.src = 'http://www.otherserver.com/api/data/?callback=handler'
document.body.insertBefore(script, document.body.firstChild)

上記のコードでは、動的に作成されたscript要素のsrcが別のドメインの下の/api/dataを指定し、コールバック関数をhandlerとします。scriptをDOMに挿入すると、対応するURLからデータをロードし、それが完了すると、取得したJSONデータをオブジェクトとして解析し、handlerを呼び出して処理します。

JSONPはクロスドメインアクセスを実現する簡単な方法ですが、セキュリティ上の問題も存在します。例えば、リクエスト先のドメインのURLが悪意のあるコードを返信することもあります。JSONPには他にも問題があります。scriptタグがjsを参照しているため、JSONも参照できます。したがって、他のドメインのURLをリクエストする際には、それがJSON形式で応答するかどうかを確認する必要があります。それはXMLではありません。

Comet

Ajaxはウェブページからサーバーにデータをリクエストする技術であり、Cometはその逆で、サーバーからウェブページにデータをプッシュする技術であり、リアルタイム性が高いアプリケーションに適しています。Cometを実現する方法は二種類あり、長ポーリングとストリームです。長ポーリングについて説明する前に、短ポーリングについて説明します。短ポーリングの考え方は非常にシンプルで、クライアントがタイマーを使用し、一定の時間間隔ごとにサーバーにAjaxリクエストを送信し、データの更新がないか確認します。この時間間隔は一般的に非常に小さいです。長ポーリングもまた、クライアントがサーバーにリクエストを送信し続けるものですが、違いは、クライアントが時間間隔ごとにリクエストを送信する必要がないことです。1つのリクエストを送信した後、クライアントとサーバー間のHTTP接続が開いており、サーバーがデータの更新があるとこの接続を通じてクライアントに応答データを送信し、その後このHTTP接続を閉じます。閉じた後、ブラウザが新しい接続を開始し、前のプロセスを繰り返します。短ポーリングに比べて、長ポーリングはHTTP接続の数が少ないですが、HTTP接続が長期間開いていれば、サーバーのリソースも占用されます。

Cometの実現方法の第二种はHTTPストリームに基づいており、クライアントがサーバーに1つのHTTP接続を持続的に開いており、クライアントはこの接続を通じて定期的にサーバーからのデータの更新を確認します。

SSE

SSE（Server-Send Events）は、Cometインタラクションを実現するブラウザAPIで、ポーリングもHTTPストリームもサポートしています。SSE APIはサーバーとの一方向の接続を作成し、サーバーはこの接続を通じて任意のデータをクライアントに送信できます。サーバーからの応答のMIMEタイプはtext/event-stream。以下はSSEのJavaScript APIの簡単な例です。

var source = new EventSource("/api/events")
source.onmessage = function(event) {
 console.log(event.data)
}

上記のコードを参照すると、サーバーからイベントストリームを取得しデータを送信するには、まずEventSourceオブジェクトを作成し、messageイベントがトリガーされた際に処理を行います。サーバーから送信されるデータはevent.dataとして文字列形式で保存されます。EventSourceオブジェクトはサーバーとのアクティブな接続を維持し、切断された場合には再接続を行います。接続を本当に切断するにはclose()メソッドを呼び出すことができます。EventSourceのmessageイベントは、サーバーから新しいイベントを受信したときにトリガーされます。messageイベント以外にも他の2个事件open和error，open事件在建立连接的时候触发，error事件在无法建立连接的时候触发。

イベントopenとerrorがあります。openイベントは接続が確立されたときに発生し、errorイベントは接続ができなかったときに発生します。

Web Sockets

Web Socketsはサーバーとの全双方向通信チャネルです。Web SocketsはHTTPプロトコルを使用しません。先ほどのAjaxやCometはHTTPプロトコルを使用しています。本文はスペースの関係でWeb Socketsについて説明しません。

まとめ

Ajaxはページを再読み込みしないでデータをサーバーから取得し、ウェブページのユーザーエクスペリエンスを向上させます。XHRを通じてAjax技術を実現する際には、クロスドメインセキュリティポリシーによる制限に直面します。CORSを通じてクロスドメイン問題を解決するには、ブラウザとサーバーの両方での協力が必要です。JSONPはクロスドメインアクセスを実現する「小技」ですが、いくつかの問題もあります。CometはAjaxを拡張し、サーバーがリアルタイムでブラウザにデータをプッシュできるようにしましたが、実現方法としては、ポーリングかHTTPストリームのどちらかで、ブラウザが最初にサーバーにリクエストを送信します。Web Socketsの全双方向通信も特徴があります。今後、時間があればさらに詳しく説明します。

本文のすべての内容が終わりです。本文の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、ナイアラートゥーチュアルのサポートを多くいただければ幸いです。3声明：本文の内容はインターネットから収集され、著作権者に帰属します。内容はインターネットユーザーにより自発的に提供され、アップロードされています。本サイトは所有権を持ちません。また、人工的な編集処理もなく、関連する法的責任も負いません。著作権侵害が疑われる内容があれば、お知らせメールを送信してください：notice#w

基礎教程
おすすめ