XMLHttpRequest メモ

XMLHttpRequest の利用

HTML Living Standard 仕様書で定義されている XMLHttpRequest() コンストラクターの response 属性は何種類かがあります

– HTML Living Standardとは

２０２０年現在のHTTPの標準

DOMとは

– Document Object Model

– マークアップがなされたリソースをリソース要素の木構造で表現し操作可能にする仕組み、またそのモデルである。
– DOMは、HTML文書やXML文書をオブジェクトの木構造モデルで表現することで、ドキュメントをプログラムから操作・利用することを可能にする仕組みである

レスポンス

– HTML を解釈できるようになりました

– responseXML プロパティを使用することによって、 可能

– XMLHttpRequest における HTML の扱い

一言でいうと

サーバにあるデータを利用するもの

特徴

同期、非同期の指定が可能。openメソッドの第３引数で指定する

– 非同期

trueまたは無指定（デフォルト）

– 同期

false

ただし同期処理はユーザビリティを損なうため推奨されていない。n

メソッド

open() メソッド

– 構文

– XMLHttpRequest.open(method, url[, async[, user[, password]]])

– 引数

– method

– 使用する HTTP リクエストメソッドです。 “GET”, “POST”, “PUT”, “DELETE”, など。 HTTP(S) 以外の URL では無視されます。

– url

– リクエストを送信する URL を表す DOMString。

– DOMStringとは

DOMString は、UTF-16 の文字列です。 JavaScript では同様の文字列を用いるため、 DOMString は直接 String に対応づけられます。

nullを送った場合は、”null”という文字列になる

– async

– 任意の論理値の引数で、既定値は trueです。操作が非同期的に行われるかどうかを示します。値が false の場合、 send() メソッドはレスポンスを受信するまで戻りません。 true の場合は、トランザクション完了の通知はイベントリスナーを使用して配信されます。 multipart 属性が true である場合は true でなければならず、さもなくば例外が発生します。
– falseは非推奨
– 同期リクエストは Worker で許可されています。

– Workerとは

– ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのこと

– user
– password

send(null)メソッド

サーバにリクエストを送信する。これを実行するまではサーバにデータ行かない。

onload()メソッド

リクエストが完了したときに動くメソッド。このメソッドは以下のように処理を定義できる。

See the Pen
xhr.js by Hidenobu Miyata (@gari8641)
on CodePen.