カテゴリー
JavaScript

Sever-Sent Eventsを使ったComet

Server-Sent Eventsドラフト版では、Cometを簡単に記述できるためにEventSourceオブジェクトを定義している

次のように、EventSource()コンストラクタにURLを渡し、返されたオブジェクトのmessageイベントを処理するだけ。

	var ticker = new EventSource("stockprices.php");
	ticker.onmessage = function(e) {
		var type = e.type;
		var data = e.data;
		//ここで、イベントタイプやイベントデータ文字列を処理する
	}

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

<script>によるHTTP制御:JSONP

<script>要素をAjaxトランスポートとして使う方法は、JSONPという名前で呼ばれる

JSONPでは、HTTPリクエストのレスポンスボディをJSONエンコードして送信する


<script>のsrc属性を設定するだけで、指定したURLをダウンロードするためにブラウザがHTTPリクエストを発行する


<script>要素がAjaxトランスポートとして便利なのには、大きな理由が1つある

<script>要素は同一出身ポリシーの制約を受けないので、<script>要素を使って、ほかのサーバからデータを取得できるから

また、JSONエンコードされたデータからなるレスポンスのボディを自動的にデコードしてくれるから

カテゴリー
JavaScript

アップロードプログレスイベント

HTTPリクエストのアップロード状況を監視するために使えるイベント

XMLHttpRequestオブジェクトにuploadプロパティが定義されている

uploadプロパティの値はオブジェクト

このオブジェクトには、

addEventListener()イベント

onprogressプロパティ

onloadプロパティ

などのプログレスイベントプロパティ群が定義されている

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

HTTPプログレスイベント

readystatechangeイベントよりももっと便利なイベント群が定義されているこのイベントモデルでは、XMLHttpRequestオブジェクトからリクエストの定義ごとに異なるイベントが発生する。この結果、readyStateプロパティを確認する必要がなくなる

loadstartイベント

send()メソッドが呼び出されたとき一度だけ発生する。

progressイベント

サーバーのレスポンスがダウンロードされているとき発生する。 XMLHttpRequestオブジェクトが発生させる 50ミリ秒ごとに発生させる リクエストが非常に早く完了した場合、発生しない場合もある

loadイベント

リクエストが完了したとき発生する loadイベントハンドラで、XMLHttpRequestオブジェクトのstatusコードをチェックする。

HTTPリクエストが完了できない場合は3通り、対応するイベントも3通りある

timeoutイベント abortイベント(18.5.1項) errorイベント

ブラウザは、任意のリクエストに対して、load、abort、timeout、errorイベントのいずれか1つだけを発生する。

以下の例のように、イベントプロパティが存在するかどうかで、ブラウザがプログレスイベントをサポートしているかをテストできる

if("onprogress" in (new XMLHttpRequest())) { //プログレスイベントがサポートされている }


プログレスイベント用のイベントオブジェクトの3つの便利なプロパティ

loadedプロパティ

現在までに転送されたバイト数が格納される

totalプロパティ

「Content-Length」ヘッダから転送するデータの大きさがわかっていれば、 データの大きさが格納される。 もしもわからない場合は0が格納される

lengthComputableプロパティ

コンテンツの大きさがわかっていれば、trueが わかっていなければfalseが格納される。

request.onprogress = function(e) { if(e.lengthComputable) progress.innerHTML = Math.round(100 * e.loaded / e.total) + "% Complete"; }

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

multipart/form-dataリクエスト

HTMLフォームにファイルアップロード要素のほかにも要素が含まれるときには、 ブラウザは通常のフォームエンコード方法を使うことができない このような場合は「multipart/form-data」として知られる特殊なコンテントタイプを使って フォームをPOSTしなければならない

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

ファイルのアップロード

HTMLフォームの<input type="file">要素でユーザがファイルを選択したときに、 POSTリクエストのボディとしてファイルのコンテンツを送信する機能がある。

send()メソッドにFileオブジェクトを引数として渡すことで、ファイルをアップロードできる。 File()オブジェクトコンストラクタはない。 <input type="file">要素には、filesプロパティがある。 Fileオブジェクトの配列のようなオブジェクトが格納されている Fileオブジェクト(22.6、22.7節) ドラッグ&ドロップAPIでは、ユーザが要素にドロップしたファイルに、 dropイベントのdataTransfer.filesプロパティを使ってアクセスできる。 Fileタイプは、もっと汎用的なBlobタイプの派生型(22.5節、22.6.3項)

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

XMLエンコードされたリクエスト

XMLドキュメント

<query>
    <find zipcode="02143" radius="1km">
        pizza
    </find>
</query>

XMLHttpRequestのsend()メソッドの引数に、XML Documentオブジェクトを渡すこともできる。

Content-Typeヘッダを指定せずに、send()メソッドに、 XML Documentオブジェクトを引数に渡すと、自動的に適切なヘッダを設定してくれる。

Content-Typeヘッダを指定せずに、send()メソッドに、 文字列を渡すと、自動的に適切な「text/plain:charset=utf-8」というヘッダを設定してくれる。

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

JSONエンコードされたリクエスト

JSON.stringify()メソッド(6.9節)を使ってリクエストボディをエンコードする方法

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

フォームエンコードされたリクエスト

ユーザがフォームを送信するとき、フォーム中のデータ(各フォーム要素の名前と値)は文字列形式にエンコードされ、 リクエストと一緒に送信される。 エンコードされたフォームデータはリクエストボディとして扱われる。

各フォーム要素の名前と値に対してURIエンコードする これを=でつなぎ、&で複数指定する。

find=pizza&zipcode=02134&radius=1km

上記は、以下のようなJavaScriptオブジェクトをフォームエンコードで表現したもの

{
    find: "pizza",
    zipcode: 02134,
    radius: "1km"
}

フォームデータエンコード形式のMIMEタイプ

application/x-www-form-urlencoded

フォームデータをPOSTするとき、Content-Typeには、この値を設定する必要がある。

encodeURIComponent()メソッド

HTMLフォームはデフォルトではPOSTリクエストを使うが、GETリクエストを使うこともできる。 フォーム送信により、読み出し専用の問い合わせを行いたいだけの場合は、GETのほうが適切。 GEETリクエストにはボディがない。 したがってエンコードされたデータ(ペイロード)は、URLの検索部(疑問符の後)としてサーバーに送信する。

参考書籍:

オライリー JavaScript 第6版

カテゴリー
JavaScript

リクエストボディのエンコード

POSTリクエストのボディには、クライアントがサーバに渡そうとしているデータが含まれる

参考書籍:

オライリー JavaScript 第6版