- 開発技術
- API連携
Web API：XMLHttpRequest入門
- JavaScript
XMLHttpRequest とは
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
XMLHttpRequestとは、別名(XHR)となり、多種ウェブブラウザに搭載されているスクリプト言語を使ってサーバーとのAjax (非同期通信) に使われる組み込みオブジェクト（Web API）である。
XMLHttpRequest はすでにサーバーからデータを読み込んだ後でもデータの送受信を行え、ページ遷移なくでもページ内容を書き換えるAjaxの基幹技術である。
WEB サービスにとってXMLHttpRequestは不可欠なものですが、今は直接利用しなくて進化したもっと便利な axiosや fetch APIやjQueryなどを利用している。しかしXMLHttpRequestがAjax最初の通信方式で、基本知識を少しでも理解しておくと考える。
※Ajaxは、「Asynchronous JavaScript + XML」の略である。
XMLHttpRequest の公開メソッド
(1)abort()：
⇒すでに送信されたリクエストを中止する。
(2)getAllResponseHeaders()：
⇒すべてのレスポンスヘッダーの名前と値を含む文字列（※CRLF 区切り）を返す。
(3)getResponseHeader(headerName)：
⇒引数に指定したヘッダーの値を含む文字列を返す。
(4)open(method, url)：
open(method, url, async)：
open(method, url, async, user)：
open(method, url, async, user, password)：
⇒新しく作成されたリクエストを初期化する
（使用する HTTP メソッドや送信先 URL の設定など）。
(5)overrideMimeType(mimeType)：
⇒新たな MIME タイプを指定する。
(6)send()：
send(body)：
⇒リクエストをサーバーに送信する。
(7) setRequestHeader(header, value)：
⇒HTTP リクエストヘッダーの値を設定する。
基本的な使い方３例
例１：オブジェクト生成
最初は、最簡単な例文である。
|
1 |
let xhr = new XMLHttpRequest (); |
もうちょっと複雑にして、Factoryパターンでオブジェクト生成をカプセル化する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// XMLHttpRequestのオブジェクト生成 function createXHR () { let XHR = [ // 各種ウェブブラウザ及びバージョン function () { // Firefox, Opera 8.0+, Safari, Google Chromeなど return new XMLHttpRequest (); }, function () { // IE6.0バージョン以上（Msxml3） return new ActiveXObject ("Msxml3.XMLHTTP"); }, function () { // IE6.0バージョン以上（Msxml2.XMLHTTP.6.0） return new ActiveXObject ("Msxml2.XMLHTTP.6.0"); }, function () { // IE6.0バージョン以上（Msxml2.XMLHTTP.3.0） return new ActiveXObject ("Msxml2.XMLHTTP.3.0"); }, function () { // IE6.0バージョン以上 return new ActiveXObject ("Msxml2.XMLHTTP"); }, function () { // IE5.5バージョン以下 return new ActiveXObject ("Microsoft.XMLHTTP"); } ]; let xhr = null; for (let i = 0; i < XHR.length; i ++) { try { xhr = XHR[i] (); } catch (e) { continue; } break; } return xhr; } |
例２：GET送信
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
let url = "/api/get"; // リクエストするURL // (1)オブジェクト生成 let xhr = createXHR (); // (2)処理状況を監視 xhr.onreadystatechange = function() { // readyState=0 : 状況=UNSENT: 初期状態(インスタンス作成) // readyState=1 : 状況=OPENED: open データ送信中 // readyState=2 : 状況=HEADERS_RECEIVED: 応答待ち // readyState=3 : 状況=LOADING: データ受信中 // readyState=4 : 状況=DONE: データ受信完了 if (xhr.readyState == 4) { // DONE(データ受信完了) // HTTP ステータスコード // 200 OK // 403 Forbidden // 404 Not Found // 500 Internarl Server Error // 503 Service Unavailable if (xhr.status == 200) { // OK(正常終了) let data = xhr.responseText; // responseXMLもあり } else { console.log ("status = " + xhr.status); } } } // (3)サーバ接続情報をセット xhr.open ("GET", url, true); // 非同期通信[Ajax] // (4)送信 xhr.send (null); |
例３：POST送信
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
let url = "/api/post"; // リクエストするURL // (1)オブジェクト生成 let xhr = createXHR (); // (2)処理状況を監視 xhr.onreadystatechange = function() { // readyState=0 : 状況=UNSENT: 初期状態(インスタンス作成) // readyState=1 : 状況=OPENED: open データ送信中 // readyState=2 : 状況=HEADERS_RECEIVED: 応答待ち // readyState=3 : 状況=LOADING: データ受信中 // readyState=4 : 状況=DONE: データ受信完了 if (xhr.readyState == 4) { // DONE(データ受信完了) // HTTP ステータスコード // 200 OK // 403 Forbidden // 404 Not Found // 500 Internarl Server Error // 503 Service Unavailable if (xhr.status == 200) { // OK(正常終了) let data = xhr.responseText; // responseXMLもあり } else { console.log ("status = " + xhr.status); } } } // (3)サーバ接続情報をセット xhr.open ("POST", url, true); // 非同期通信[Ajax] // (4)送信形式を設定 xhr.setRequestHeader ( 'Content-type', 'application/x-www-form-urlencoded' ); // (5)送信 let formData = new FormData(); formData.append('usr_id', '20170901'); formData.append('usr_name', 'WANG'); xhr.send (formData); |
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
