HTTPRequestを使って非同期通信をやってみる

HTTPリクエストを使ってクライアント／サーバ間で非同期通信を実装することになったので、仕組みを理解するために実際にサンプルコードを実装して動きを確認してみました。

色々なサンプルを読んでみましたが、下記のサンプルが一番シンプルでやりやすかったです。

・GETのHTTPリクエストでサーバ上のファイルの中身をクライアント側で取得する（HTTPリクエストは、数百バイト以内ならGET、それ以上大きいならPOSTを使用するべき。このサンプルは、GET方式のサンプル）
https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r16

上記のページでは、index.htmlにアクセスして、同じ階層にあるtxtファイルを取得し、txtファイルの中身を画面に表示するっていう、超簡単でシンプルなAjaxです。

上記の他にも、色々と勉強させてもらった上質なサイトです。
・JavascriptのAjaxについての基本
https://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d
→フォームのボタンを押すとリクエストが飛び、そのリクエストの結果を画面に表示するサンプル。

・開発者向けのウェブ技術　mozilla
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
→このサイトは、標準仕様でJSが記載されているようなので、流行りがわかる。

まとめ

　HttpRequestを利用した非同期処理は、標準のJavascriptで比較的簡単に実装することが可能です。ただ、Safari／Chrome／IE／Edge等のブラウザは、使用できるメソッドやイベントなどが若干異なるため、多くのブラウザで動作保証するためには、各ブラウザ毎にそのブラウザ用の独自コードを書く必要がでてきます。その結果、非常に時間がかかるし、開発も複雑になる。

　そんな時に役に立つのが、jQuery。jQueryは、クロスブラウザ対応が考慮されていることから、ブラウザ毎のコードが既に実装されている。

　非同期処理に関わらず、JavaScriptを使って特殊な処理を行う場合は、サポート対象のブラウザを事前に確認したうえで、スクラッチで開発するのかパッケージ（フレームワーク）を利用して開発するのか検討する必要があります。

以上