tty007【Ajax入門】XMLHttpRequestの使い方をまとめてみたツイートシェアはてブLINEPocket非同期通信を司る中核の技術であるAjaxのAを司る技術の中に、XMLHttpRequestというオブジェクトが存在します。このオブジェクトを操作することで非同期に通信を行うことが可能です。JavaScriptに触れていたら必ず出会うオブジェクトの1つで、使用頻度も高いと思うのでこの機会にまとめておこうと思います。スポンサードリンク目次XMLHttpRequestオブジェクトの作り方GETリクエストPOSTリクエストレスポンス処理リクエストの中止まとめXMLHttpRequestオブジェクトの作り方XMLHttpRequestオブジェクトを利用するにはまずXMLHttpRequestオブジェクトを作成する必要があります。XMLHttpRequest();これによりXMLHttpRequestクラスで定義されている様々なメソッドが使用可能になります。GETリクエスト最も基本的なメソッドとしてopenメソッドが提供されています。使用方法はシンプルで、第一引数にHTTPメソッド(リクエストの種類)、第二引数にリクエストを送信する先のURL(発行URL)、第三引数に非同期リクエストを行うかどうかの真偽値を指定します。true);しかしこれだけでは実際にGETリクエストを送信することができません。複数のメソッドを組み合わせたコードが必要です。}};httpRequest.send();ここら辺理解するのが難解なのですが、一応1つずつ説明していきます。XMLHttpRequestオブジェクトにはreadyStateという状態を常に保持しています。以下のいずれかの値を持っているということです。XHR通信の完了後である状態また、onreadystatechangeメソッドは、この状態が変化するたびに呼び出されるメソッドです。よって上のコードは何をしているかというと、XHR通信の完了を把握したらサーバーから受け取ったテキストをconsoleで表示するという簡単な動作を示しているのです。最終行で、sendメソッドを呼び出すと実際にリクエストを送信します。このメソッドには引数を入れることが出来て、リクエストボディーの文字列を指定することができます。Access-Control-Allow-Originの禁止HTMLファイル内にこのコードをコピペしてもGETリクエストを送信することができますが、実際にはCORSヘッダによるAccess-Control-Allow-Originによってクロスオリジンからの読み出しが禁止されてしまいます。(こちらの話はセキュリティの話になり本記事のレールから外れてしまうため割愛させていただきます。)スポンサードリンクPOSTリクエストPOSTリクエストも、GETリクエスト同様に記述します。'application/json');httpRequest.send('param1=value1&param2=value2');setRequestHeaderでリクエストヘッダを指定することができます。上の例ではContent-Typeをjsonに指定していますがこれ以外にも指定することが可能です。レスポンス処理サーバからのレスポンス処理はstateを指定してコールバック関数により処理を行います。}}readyStateには上の表にまとめた数値を利用します。実際のレスポンスデータは以下のオブジェクトプロパティによって取得可能です。発行済みのリクエストを中止するにはabortメソッドを使用します。httpRequest.abort();まとめXMLHttpRequestは使いこなすと便利な昨日ですが、クロスオリジンのアクセスについてはデフォルトで制限が掛けられており自分のサイト、サーバでしか試せないのが難点です。ローカル環境で試せないので自分でサイトを持っている人は試しておく価値はありそうです。非同期通信をマスターする一歩として是非使ってみてください。Web系では、HTTP周りの知識を知っておかないと理解が追いつかない部分が多いです。boostオンライン」をオススメします。オンラインでどこにいても聞き放題です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【JavaScript】axiosを使って、HTTP通信を簡単に操る。【PHP入門】PHPの変数と定数について簡単にまとめてみたRECOMMENDこちらの記事も人気です。JavaScript2019.1.12【JavaScript】axiosを使って、HTTP通信を簡単に操る。(TECH::CAMP)の無料説明会に行ったら衝撃の事実が発覚した件について【2019年最新】テックキャンプ(TECH::CAMP)の評判と料金、概要まとめ。実際の最新情報を解説します。