JS memo

お洒落にJavaScript。

2019年2月9日13:29

javascriptのXMLhttpResponse(XML)の基本

メインビジュアル

javascriptのXMLhttpResponse(XML)の基本

javascriptのXMLhttpRequestとは何かとその基本的な設定方法を説明します。

目次

  1. XMLhttpRequstとは
  2. 基本的な設定方法
  3. XHRのメソッド一覧
  4. XHRのプロパティー一覧
  5. まとめ

XMLhttpRequstとは

javascriptにはブラウザ上でサーバーと対話が可能なAPIとしてXMLhttpRequstというものがあります。

できること

XMLhttpRequst(XHR)を使用すれば、すでに読み込まれたwebページ上で非同期通信(Ajax)によりサーバーへの通信リクエストが可能になります。

簡単に言うと、webページ上で、リロード無くして外部のファイルのデータを取得し、そのデータを使用することができると言うこと。

ちなみにw3sによると、この機能は開発者にとって夢らしい

メリット

  • webページをリロードせずに、サーバーと対話が可能
  • webページがロードされた後に、サーバーにリクエストを要望できる(非同期通信)
  • webページがロードされた後に、サーバーからデータがもらえる(非同期通信)
  • バックグラウンドでサーバーにデータを送信できる

難しそうですが、要はwebページの読み込み自体を遅くしないと言うことです。

デメリット

  • 複数の外部ファイルを取得したい場合には注意が必要(forループなどと併用する場合)
  • 同期的に読込むよう設定すると、Googleからエラーをもらう
  • ブラウザによってコードが異なる

筆者がこのオブジェクトを使用した時に割と苦しんだので、デメリットも書いておきます。

基本的な手順

必要最低限の最も簡単な実装方法は以下のようになります。

let xhr = new XMLHttpRequest();
  xhr.open("GET", "sample.html", true);
  xhr.send();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // やりたいこと
    }
  };

ではメソッドを一つずつみていきましょう。

オブジェクトを作成する

let xhr = new XMLHttpRequest();

オブジェクトを作成することによって、データの送受信が可能になります

リクエスト内容の作成

xhr.open("GET", "sample.html", true);

openメソッドではmethod(GETかPOST),取得したいURL,非同期か同期か(true, false)を設定して、リクエスト内容を作成します。

リクエストを送信

xhr.send();

先ほど作成したリクエストを送信します。

リクエストの完了とレスポンスの準備

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // やりたいこと
  }
};

上記に使用されたメソッドを表にまとめました。

onreadystatechangereadyStateの状態が変わる毎に、呼び出す関数を設定する。つまり上記のコードはreadyStateが4になるのを待っている状態。
readyStateリクエストの受け取り状態で1〜4まである。4はリクエストの受け取りが完了し、レスポンスを準備している状態。
statusサーバーにリクエストを送った際のレスポンスが可能かの状態。200は無事に受け取りました!と言う意味。

このメソッドはopenやsendの前でも後でも実行されるのがsendの後なので、どこに記述しても大丈夫です。

基本的にはこれで十分ですが、他にも便利なメソッドやプロパティーがあるのでご紹介いたします。

メソッド一覧

メソッドとはオブジェクトを扱うことです。

メソッド 機能
abort() 送信したリクエストを取り消す。
getAllResponseHeaders() ヘッダーの情報を返す。
getResponseHeader(
ヘッダー指定)
指定したヘッダーの情報のみ返す。

プロパティー一覧

プロパティーとはオブジェクト自身がもつデータを扱うことです。

プロパティー 機能
responseText() レスポンスデータを文字で受け取る。
responseXML() レスポンスデータをXMLで受け取る。
statusText() ステータスをテキストで受け取る。("OK"か"Not Found")

まとめ

一見難しく見えるXMLHttpResponseです。しかしやっていることは欲しいデータのリクエストをサーバーに投げ、レスポンスをもらうと割と簡単な作業です。ただ、メソッドには非同期通信のものがあるため、エラーが起こりやすいので、しっかりと基礎を勉強して実装しましょう。