読者です 読者をやめる 読者になる 読者になる

xmlhttprequestでの同期通信・非同期通信の例

xmlhttprequestはデフォルトで非同期通信。

非同期通信の例

XMLHttpRequest#onreadystatechangeに関数定義する。

    var req = new XMLHttpRequest();

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            document.getElementById(oid).innerHTML = req.responseText;
        }
    }

    req.open('POST', url); /* async */
    req.setRequestHeader("Content-Type",
                                "application/x-www-form-urlencoded");

    var year = document.getElementById("year").value; /* input text */

    req.send("mode=foobar&year=" + year);

同期通信の例

XMLHttpRequest#open()の第3引数にfalseを指定して、XMLHttpRequest#send()のあとに処理する。

    var req = new XMLHttpRequest();

    req.open('POST', url, false); /* not async */
    req.setRequestHeader("Content-Type",
                                "application/x-www-form-urlencoded");

    var year = document.getElementById("year").value; /* input text */

    req.send("mode=foobar&year=" + year);

    var text = req.responseText;

urlで指定されたプログラムは、XMLHttpRequest#responseText()の場合

Content-type: text/html; charset=UTF-8

テキスト

で返すこと。返す場合、自前でその文字コードに変更しておく。