Ajax Memo - サーバーとの送受信 -

サーバーとの送受信

サーバーへのリクエストを送信するには、open メソッドを使用します。
下記の例では、methodには POST または GET を指定し、url には呼び出し先を指定します。
PHPを呼び出すなら、ここに sample.php 等と指定し、ファイルを読み込むならファイル名を指定します。
GETを指定する時は、url に続けて ?a=aaa&b=bbb というように通常のGET様式でパラメータを与えます。
async には、非同期通信なら true を、同期通信なら false を指定します。


     xmlhttp.open(method, url, async);

例）
    xmlhttp.open('POST', 'sample.php', true);

    xmlhttp.open('GET', 'sample.txt', true);

POST で url へ値を引き渡す場合に、send メソッドを使用します。GETの時は null をセットします。
open と send はペアで使用します。


     xmlhttp.send(data);
または
    xmlhttp.send(null);

例）
    var data = "";
    data += "param1=" + param1;
    data += "param2=" + param2;
    xmlhttp.send(data);

  サーバーからの応答があったかどうかの判断は仕方はブラウザにより異なります。
onreadystatechange の場合には応答状態と応答コードを判定し、受信後の処理を指定します。

  ■サーバーからの応答状態（readyState）
      0：初期化されていません
      1：読み込み中です
      2：読み込み完了
      3：双方向に扱えます
      4：すべて完了

  ■サーバーからの応答コード（status）
      200：OK


 //ブラウザ判定
var ua = navigator.userAgent;
var safari  = ua.indexOf("Safari") != -1;
var konqueror = ua.indexOf("Konqueror") != -1;
var mozes = ((a = navigator.userAgent.split("Gecko/")[1] ) ?
                  a.split(" ")[0] : 0) >= 20011128 ;

// サーバーからの受信処理
// opera       : onreadystatechangeに多重レスポンスのバグがあるのでonloadが安全
// Moz,FireFox : readyState == 3でも受信するので通常はonloadが安全
// Win ie      : onloadは動作しない
// Konqueror   : onloadが不安定
if (window.opera || safari || mozes){
    xmlhttp.onload = function ()
    {
        callback(xmlhttp);
    }
} else {
    xmlhttp.onreadystatechange = function ()
    {
        // サーバーからの応答判定
        if (xmlhttp.readyState == 4) {

            // サーバーの応答コード判定
            if (xmlhttp.status == 200) {
                // OK
                callback(xmlhttp);
            } else {
                // NG 何らかの問題が発生しています
            }
        }
    }
}

ここでは受信後の処理として、callback という function を呼び出しています。


 function callback(xmlhttp)
{
    var text1 = document.getElementById("text1");
    text1.innerHTML = xmlhttp.responseText;
}