XMLHttpRequest

XMLHttpRequest

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

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

同期と非同期

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

３つのステップ

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

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

サンプル

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

Markdown の展開には、marked.js を使っています。

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