AJAXの復習

そろそろ、また、プログラムがやりたくなったので、仮想マシンでの学習を再開。テーマは、またまたAJAX。

会社で以前作った JavaScript とPHPのコードを思い出しながら作成してみる。Ｗｅｂブラウザから非同期で通信する JavaScript のコードはこんなの。

function createXMLHttpRequest()

{

  var XMLhttpObject = null;

  // for Firefox Browser

  XMLhttpObject = new XMLHttpRequest();

  XMLhttpObject.overrideMimeType('text/xml');
  if (XMLhttpObject != null) {

  // httpd access status check

    XMLhttpObject.onreadystatechange = function() {

      // readyState is access status, 1,2,3 not ok, 4 ok (only case 4, get status )

      if (XMLhttpObject.readyState == 4) {

        // get httpserver answer , status=200 OK, status=40x NG

        if(XMLhttpObject.status != 200) {

          document.getElementById("debug").innerHTML = httpObj.responseText;

        }

      }

    }

  }

  return XMLhttpObject;

}

ここまでが、非同期通信のオブジェクトを初期化する処理。

function xml_disp( httpObj ) {

  // XML data get

  var messages = "";

  var debug = "";

  var xml_root = httpObj.responseXML;

  var names = xml_root.getElementsByTagName('ename');

  var emails = xml_root.getElementsByTagName('email');
  if( names == null ) {

    debug = "管理者に連絡してください。";

    document.getElementById("debug2").innerHTML = debug;

  } else {

    messages = "
";
    var br_i = 0;
    for(i=0; i < names.length; i++) {
      var ename = names.item(i).childNodes[0].nodeValue;
      var email = emails.item(i).childNodes[0].nodeValue;
      var string = "\n";
      messages = messages + string;
      br_i = br_i + 1;
      if( br_i == 5 ) {
        messages = messages + "";
        br_i = 0;
      }
    }
    messages = messages + "
" + ename + "：　
\n";

    document.getElementById("text01").innerHTML = messages;

  }

}

ここまでが、非同期通信で得たデータを使って
ブラウザに表形式で表示する処理。

function part_select() {

  var mesg = "";

  var str = "";

  var part_no = document.getElementById("selphp").value;
  httpObj = false;

  serverURL = "x1.php?part_no=" + part_no;

  mesg = "";
  httpObj = createXMLHttpRequest();

  if(httpObj) {

    httpObj.open("GET", serverURL, false);

    httpObj.send(null);

    xml_disp( httpObj );

    document.getElementById("onError").innerHTML = mesg;

  }

}

これが、非同期通信をする処理。GET形式なんで、いまいちかな。
非同期通信のサーバー側は、 x1.php で、引数で変数を指定している。

表は、以前作ったそのまま。今度、新に作る予定のものは
縦に１行分用意すればいいので、もっと簡単になるかな。
ただ、その分、サーバーから取ってくる情報量が増える。

できれば、PUT形式で通信できるようになりたいものだ。