【Javascript】Ajaxはじめの一歩　XMLHttpRequest

    [1] XMLHttpRequest オブジェクト生成
            ↓
    [2] open メソッド
    　(POSTやGET、リクエストするURL、同期か非同期かなどを指定)
            ↓
    [3] send メソッド
    　(データ送信)
            ↓
      【サーバー側】
            ↓
    [4] onreadystatechange イベント(ie以外ではコールバックなonloadも使えます)
    　(送受信状態が変った時に起動するイベント)
            ↓
    [5] readyState プロパティ
    　(送受信状態をあらわす値、4で受信完了。onloadなら不要。)
            ↓
    [6] responseTextまたは、responseXML プロパティ
    　(受信データ)

<script language="JavaScript">
<!--

  //XMLHttpRequestオブジェクト生成
  function createHttpRequest(){

    //Win ie用
    if(window.ActiveXObject){
        try {
            //MSXML2以降用
            return new ActiveXObject("Msxml2.XMLHTTP") //[1]'
        } catch (e) {
            try {
                //旧MSXML用
                return new ActiveXObject("Microsoft.XMLHTTP") //[1]'
            } catch (e2) {
                return null
            }
         }
    } else if(window.XMLHttpRequest){
        //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
        return new XMLHttpRequest() //[1]'
    } else {
        return null
    }
  }

  //ファイルにアクセスし受信内容を確認します
  function requestFile( data , method , fileName , async )
  {
    //XMLHttpRequestオブジェクト生成
    var httpoj = createHttpRequest() //[1]
    
    //open メソッド
    httpoj.open( method , fileName , async ) //[2]
    
    //受信時に起動するイベント
    httpoj.onreadystatechange = function()  //[4]
    { 
      //readyState値は4で受信完了
      if (httpoj.readyState==4)  //[5]
      { 
        //コールバック
        on_loaded(httpoj)
      }
    }
    
    //send メソッド
    httpoj.send( data ) //[3]
  }

  //コールバック関数 ( 受信時に実行されます )
  function on_loaded(oj)
  {
        //レスポンスを取得
        res  = oj.responseText //[6]
        
        //ダイアログで表示
        alert(res)
  
  }
  
//-->
</script>
<form>
  <input type    = "button"
         value   = "test.txtをリクエストした時のレスポンス"
         onclick = "requestFile( '' , 'GET', './test.txt' , true )"><br>
</form>

This is the test file.