サーバーとデータのやりとりをする

Ajaxで重要なものは、XmlHttpRequestオブジェクトを利用した非同期通信です。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajaxを使ってサーバーとやりとりを行う</title>
   
</head>
<body>
    <form name="testForm"><p>
        <input type="button" value="load" 
               onclick="getFile('data/test.txt');">
    </p></form>
    <div id="testResult">
    </div>
<script>

    var req;

function getFile(path){
    /*
    new演算子とコンストラクタでXMLHttpRequestオブジェクトを
    生成します。非同期通信では、リクエストを送ってからデータ取得が
    完了するまでの間、別の処理を行うことが可能です。
    そのため、いつデータを取得したかを知らなければいけません。
    そのために使用されるのがコールバック関数です。
    */
    req = new XMLHttpRequest();
    
    /*
    コールバック関数は、onreadystatechangeプロパティで
    設定します。
    */
    req.onreadystatechange = showData;

    /*
    openメソッドは、サーバーに送るHTTPリクエストの内容を指定
    第1引数：HTTPプロトコルのコマンド
        「GET」はデータを取得するためのコマンドです。
    第2引数：データファイルのパス
    第3引数：非同期・同期の指定
         true:非同期通信
        false:　同期通信
    */
    req.open("GET",path,true);
    
    /*
    sendメソッドが実行されたときに、サーバーに
    HTTPリクエストが送信される。
    GETコマンドの場合は、引数に何もないことを示す「null」を指定
    */
    //HTTPリクエストを送信
    req.send(null);
}
function showData(){
    
    /*
    下記のif文でデータの取得が完了したかを判定します。
    readtState：通信状態を表すプロパティ
        status：サーバー側がリクエストに対して返す
        　　　　　ステータスコードと呼ばれる値を表すプロパティ
             　　詳細は記事をご覧ください。
    */
    if( req.readyState == 4 &&
        req.status == 200 ){
        
        /*
        サーバーから取得したテキストが格納されている
        プロパティです。その値を要素div「testResult」の
        innerHTMLプロパティに代入し、HTMLと解釈して
        表示します。
        */
        document.getElementById("testResult")
            .innerHTML = req.responseText;
    }
}

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Ajaxを使ってサーバーとやりとりを行う</title>

</head>

<body>

<input type="button" value="load"

onclick="getFile('data/test.txt');">

</p></form>

</div>

var req;

function getFile(path){

new演算子とコンストラクタでXMLHttpRequestオブジェクトを

生成します。非同期通信では、リクエストを送ってからデータ取得が

完了するまでの間、別の処理を行うことが可能です。

そのため、いつデータを取得したかを知らなければいけません。

そのために使用されるのがコールバック関数です。

req = new XMLHttpRequest();

コールバック関数は、onreadystatechangeプロパティで

設定します。

req.onreadystatechange = showData;

openメソッドは、サーバーに送るHTTPリクエストの内容を指定

第1引数：HTTPプロトコルのコマンド

「GET」はデータを取得するためのコマンドです。

第2引数：データファイルのパス

第3引数：非同期・同期の指定

true:非同期通信

false:　同期通信

req.open("GET",path,true);

sendメソッドが実行されたときに、サーバーに

HTTPリクエストが送信される。

GETコマンドの場合は、引数に何もないことを示す「null」を指定

//HTTPリクエストを送信

req.send(null);

}

function showData(){

下記のif文でデータの取得が完了したかを判定します。

readtState：通信状態を表すプロパティ

status：サーバー側がリクエストに対して返す

　　　　　ステータスコードと呼ばれる値を表すプロパティ

　　詳細は記事をご覧ください。

if( req.readyState == 4 &&

req.status == 200 ){

サーバーから取得したテキストが格納されている

プロパティです。その値を要素div「testResult」の

innerHTMLプロパティに代入し、HTMLと解釈して

表示します。

document.getElementById("testResult")

.innerHTML = req.responseText;

}

</script>

</body>

</html>

HTTPリクエストを送る順番

サンプルコードの21行目～49行目にコメントを付しました。
そちらをご覧ください。

コールバック関数の処理内容

詳細はサンプルコードの57～70行目のコメントをご覧ください。

●readyStateの値

値	値の説明
0	未初期化状態
1	リクエスト準備中
2	リクエスト完了
3	データ受信中
4	データ取得完了

●statusの値

コード	コードの説明
200	リクエストが正しく処理された
400	リクエストが不正なものであった
403	アクセスが拒否された
404	ファイルが見つかりません
405	指定したメソッドがサポートされていない
415	指定したメディアタイプがサポートされていない
500	サーバー内部でエラーが発生した
505	リクエストしたHTTPプロトコル・バージョンはサポートされていない