2015年12月3日木曜日

XMLHttpRequestとは?

こんばんわ、開発者のⅠです。

さて、今回は前々回の投稿についての補足として、APIのひとつであるXMLHttpRequestについて説明したいと思います。

以下のソースは、前々回の投稿での使用例です。
マーカーの情報が記録されたCSVファイルを読み込むための関数 getCSVFile に組み込んでいます。
 
 function getCSVFile() {
   var xhr = new XMLHttpRequest();
   xhr.onload = function () {
   createArray(xhr.responseText);
   };

   xhr.open("get", "markerlist.csv", true);
   xhr.send();
 }
 getCSVFile();

このAPIは、ブラウザ上でサーバーとHTTP通信を行うために利用します。


また、各メソッドの意味については以下の通りです。

【onload】 : レスポンスを受信完了した段階で行う処理を記述します

 【open】: 実際に送信するリクエストを生成します。リクエストの型、ファイルの存在するURL、
       非同期通信を行うか否かを指定します。

 【send】: 生成したリクエストをサーバーへ送信します。


つまり、上に記述した関数 getCSVFileを言い換えてみると、

 「markerlist.csvを対象に非同期通信を行うようGET型のリクエストを生成・送信し、
   この通信が完了した時点で、取得したファイル内のデータを引数として、
  関数createArray(xhr.responseText)を実行する」

という感じでしょうか。

思ったよりも、シンプルに外部ファイルを取得できるのですね……。

それでは、今日はこの辺で失礼します。









Related Posts:

  • XMLHttpRequestとは?こんばんわ、開発者のⅠです。 さて、今回は前々回の投稿についての補足として、APIのひとつであるXMLHttpRequestについて説明したいと思います。 以下のソースは、前々回の投稿での使用例です。 マーカーの情報が記録されたCSVファイルを読み込むための関数 getCSVFile に組み込ん… Read More
  • Google AJAX Feed APIとはこんにちは山田です。 今年の東京は12月なのに24度を超える日がありました。 11年ぶりだそうです。 とても暖かくて半袖でも外出できそうです。 さて本題に入るのですが、 外部サイトが配信しているニュースを自分のサイト内で受けとって表示できないかと画策していたら、その方法の一つとして 統一された規… Read More
  • Google Maps JavaScript APIを使って、マップをWebページに埋め込む方法こんにちわ、開発者のⅠです。 今朝、JRのある路線で遅延が発生していたようですが、その原因が猪と衝突したことによる車両不具合だったそうです……どれだけ強い衝撃だったのでしょうか。 さて、今回は前回の投稿の続きです。 前回紹介したGoogle Maps APIには、様々な種類があります。 G… Read More
  • JavaScriptを使って外部ファイルを読み込む方法こんにちわ、開発者のⅠです。 さて、前回から時間が空いてしまいましたが、GoogleMapに関わるお話の続きです。 前回は、Google Mapにマーカーを表示させる方法について紹介いたしましたが、今度はその応用として、マーカーのデータを外部ファイルから読み込む方法について紹介したいと思います。… Read More
  • CSVファイルとは?こんにちわ、開発者のⅠです。 今回は、前回の投稿で触れたCSVファイルについて説明したいと思います。 CSVは「Comma Separated Values」のそれぞれ頭文字です。 ”カンマ区切り文字”とでも言いましょうか。 「名前、経度、緯度」の各要素が書き込まれたCSVファイルを例にしてみ… Read More

1 件のコメント:

  1. この実装ですと、Internet Explorerで見た時に動かないかもですね。
    onreadystatechangeで調べてみると良いかもしれません。

    返信削除