LogoMark.png

XMLHttpRequest のバックアップの現在との差分(No.0)


#author("2021-05-20T15:24:14+09:00;2020-11-12T09:53:03+09:00","default:inoue.ko","inoue.ko")
*XMLHttpRequest
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
~

XMLHttpRequest は JavaScript で HTTP リクエストを行うための組み込みのブラウザオブジェクトです。XML 形式のみならず様々なデータファイルへのアクセスを可能にします。
~

***同期と非同期
XMLHttpRequest には同期と非同期の2つの操作モードがありますが、ほとんどのケースで非同期モードが推奨されます。
~

***3つのステップ
リクエストをするためには、次の3ステップが必要です。

-1) XMLHttpRequest を作成します。
 let xhr = new XMLHttpRequest(); 

-2) 初期化します。
 xhr.open(method, URL, [async, user, password])
--method:HTTPメソッド  ''GET'' または ''POST'' です。
--URL:リクエストURL。文字列で、URL オブジェクトもOKです。
--async:非同期モード デフォルトは true です。
--user, password:ベーシック HTTP 認証のユーザとパスワード

-3) send 呼び出しでネットワーク処理が始まります。
 xhr.send([body])
このメソッドは接続をオープンして、リクエストをサーバに送信します。body パラメータには、GETの場合は null(空)、POSTの場合はリクエストボディが含まれます。
~


***イベントリスナー
以下の3つが代表的です。

-load: 準備完了の場合。成功 200、エラー 404 
-error:リクエストの送信エラー
-progress:ダウンロード中に定期的に呼ばれることで通信量が確認できます。
~

***参考:GETとPOST
GET、POSTという言葉から「GETが受信、POSTは送信」という勘違いをしそうですが、いずれも入力フォームのデータをサーバへリクエスト送信する際に使用する用語です(ちなみにリクエストの対義語はレスポンスです)。

-GET
--情報検索など、データをリクエストURLの後に付与して送信する
&small(URLの末尾に「?」や「&」の付いた長いURLがそれです。);
--テキストデータのみ送信可能(入力したデータが URL で丸見えになるので、例えばログイン情報の送信などには使えない)
--URLの後に付与するのでデータ量(文字数)に制限がある
--GETはHTTPヘッダ情報に含まれるため、簡単に取得可能

-POST
--ログイン画面、お問い合わせ、注文入力など、画面から情報を入力して「送信」するタイプのもの。<form>属性で method="POST" を指定
--テキスト、バイナリどちらでも送信可能
--POST送信後のブラウザの「戻る」で有効期間切れが発生する場合がある
--POSTはBODY部分(FORM)に含まれるため、取得が複雑
~
~

**サンプル
サーバー内に置かれた [[md(Markdownファイル)>Markdown]]を読み込んで、ページ内に埋め込む処理を行うサンプルです。

[[Markdown]] の展開には、[[marked.js>https://marked.js.org/]] を使っています。
~

-DEMO:https://koichi-inoue.github.io/XHR_MarkdownBrowser/
-CODE:https://github.com/koichi-inoue/XHR_MarkdownBrowser

~
~