JavaScript Ajax実装の雛形

  • 14
    Like
  • 0
    Comment
More than 1 year has passed since last update.

現代のウェブ技術になくてはならない技術の一つである"Ajax"の実装方法をまとめてみます

概要

今回はウェブブラウザをリロードせずにファイル内にあるテキストファイル(.txt)を表示させます。

その前に少しajaxとはなにかおさえておきましょう。

ajaxとはサーバーと非同期通信をおこなう技術のことで、具体的にはgoogle mapに使用されています

詳しくは↓

  • Ajaxは単体の技術ではない
  • XMLHttpRequestを利用してサーバーと非同期通信をおこなう
  • XML,json,txtなどのファイルを扱える
  • それらをjavascriptで統合する

サンプルコード

SampleAjax.js

//XmlHttpRequestについての関数
function XmlHttprequest(){

  if(window.XMLHttpRequest){
    httpObj = new XMLHttpRequest();
  }else if(window.ActiveXObject){
    httpObj = new XMLHttpRequest('MSXML2.XMLHTTP.3.0');
  }
  httpObj.onreadystatechange = display;
  httpObj.open("GET", "sample.txt",true);
  httpObj.send(null);
}

//表示に関する関数
function display(){

 if(httpObj.readyState == 4 && httpObj.status == 200){
  //id"print"のhtml情報を変更する
  document.getElementById("print").innerHTML = httpObj.responseText;
 }
}

//bodyで読み込むための関数
function init(){

 docuemnt.getElementById("button").onclick = XmlHttpRequest;
}


sample.txt
Hello,Ajax!

使用方法

このコードを準備しただけでは使い物になりません
ある程度の準備が必要です

  • 上記のjsファイルをheadで読み込む
  • init()の関数をbody内で読み込む
  • id = "print"という範囲を<div>で作成する
  • inputでid = "button"のボタンを作成する

これで使用可能になるはずです