XMLHttpRequestオブジェクトのおさらい

普段 JQueryajaxばかりで久方ぶりに書くと忘れてしまっている。

HTTPリクエスト

  • リクエストライン
    メソッド、リクエストURIプロトコルバージョン
  • ヘッダー
    ユーザーエージェント名、どのページから発生したリクエストなのか(リファラ)、クッキーなど・・。空行はヘッダーの終わり。
  • メッセージボディ サーバーに送信するデータを格納する場所

HTTPレスポンス

  • ステータス行
    使用する HTTP のバージョン、Status-Code、Reason-Phrase の3つを、空白で区切った一行
  • ヘッダー
    メッセージボディのタイプや文字コード、サイズ、メッセージを生成した日付など。 (metaの属性、content-language、content-typeなどと一緒)
  • メッセージボディ
    クライアントに送信するHTMLや画像などのデータを格納

XMLHttpRequestオブジェクトのこと

JavaScriptでHTTP通信を行うためのAPI

HTTPリクエストを発行・送信するには

var xhr= new XMLHttpRequest();
xhr.open("GET","/index.html");
  • HTTPリクエストのヘッダを使って、ブラウザからサーバーにデータの形式を伝える (タイミングはopenメソッドのあと、sendする前)
    application/x-www-form-urlencoded (クエリ文字列(key=value&key=value))
    text/plain (テキスト)
    application/json (JSON)
    text/html (HTML)
    application/xml (XML)など。
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.send();

sendの引数には文字列の他にArrayBufferやBlobを渡すことができる。 それからFormDataも。 FormDataの第一引数にHTMLFormElementを渡すと、その内容を持ったFormDataが得られる。 appendで要素の追加ができる。

var data = new FormData(form);
data.append("name","value");

FormDataオブジェクトをsendに渡すとmultipart/form-dataの形式にして送信される。

HTTPリクエストを受信するには

  • リクエストが完了して結果が戻ってきたときのイベントはload
xhr.addEventListener("load",function(ev){
});
  • load以外にもイベントがある。
    • loadstart
      リクエストを開始した瞬間。
    • progress
      データを受信しているとき0.05秒に1回発生。
    • abort
      リクエストが中断して失敗しとき。
    • error
      リクエストに失敗したとき。
    • timeout
      タイムアウトによりリクエストが失敗したとき。timeoutプロパティの設定は
      javascript xhr.timeout=1000; という感じ。http://qiita.com/tonkotsuboy_com/items/d1b3cf45ae5135441f9b 必ず入れよう・・・。
    • loadend
      失敗か成功かにかかわらずリクエストが終了したとき。
    • readystatechange
      readystateが変化したとき
  • リクエストの結果はresponseまたはresponseTextに入っている。
  • 結果の形式はresponseTypeプロパティで決める。デフォルトはtext。 responseTypeには以下のものがある。
    text (String) 文字列
    json (Object) JSONオブジェクト
    document (Document) HTMLやXML
    blob (Blob) ファイル
    arraybuffer (ArrayBufferView) 固定長バイナリデータ
  • レスポンスヘッダを受け取るときはgetResponseHeaderを使う。
var length=xhr.getResponseHeader("Content-Type");
  • サーバー側でデータのContent-Typeを指定して、ブラウザにデータを送信
    よくあるContent-Typeは以下
    application/json (JSON)
    text/html (HTML)
    application/xml (XML)
    text/plain (テキスト)
  • 帰ってきた結果のHTTPステータスコードはstatusプロパティで取得。statusTextプロパティではテキストでの説明を得ることができる。

(脱線)HTMLFormElementのこと

  • documentのformsプロパティでフォーム要素が取得できる。
  • HTMLFormElementのメソッドはsubmitとreset。ボタンを押したのと同じ。
  • valueプロパティでvalue属性を取得できる(ただし変更前の値を取得したいときはdefaultValueプロパティを使う)
  • たとえばinputのタイプをひとつづつ取得する場合
var form = document.forms.item(0);
for(var i=0; i < form.elements.length; i++){
  console.log(form.elements.item(i).type);
}
  • blur(フォーカスを外す)、focus、click(コントロールをクリックしたことにする)
  • typeが"text"か"password"の場合readOnlyプロパティが使える。
  • "checkbox","radio"の場合defaultChecked、checkedというプロパティが使える。