普段 JQueryのajaxばかりで久方ぶりに書くと忘れてしまっている。
HTTPリクエスト
- リクエストライン
メソッド、リクエストURI、プロトコルバージョン - ヘッダー
ユーザーエージェント名、どのページから発生したリクエストなのか(リファラ)、クッキーなど・・。空行はヘッダーの終わり。 - メッセージボディ サーバーに送信するデータを格納する場所
HTTPレスポンス
- ステータス行
使用する HTTP のバージョン、Status-Code、Reason-Phrase の3つを、空白で区切った一行 - ヘッダー
メッセージボディのタイプや文字コード、サイズ、メッセージを生成した日付など。 (metaの属性、content-language、content-typeなどと一緒) - メッセージボディ
クライアントに送信するHTMLや画像などのデータを格納
XMLHttpRequestオブジェクトのこと
JavaScriptでHTTP通信を行うためのAPI
HTTPリクエストを発行・送信するには
- XMLHttpRequestオブジェクトのインスタンスを作成
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');
- リクエストをsendメソッドで送信
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が変化したとき
- loadstart
- リクエストの結果は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というプロパティが使える。