XMLHttpRequest入门

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest ();

• 使用工厂模式把定义XMLHttpRequest对象进行封装，这样只需调用creatXHR()方法就可以返回一个XMLHttpRequest 对象

//创建XMLHttpRequest 对象
//参数：无
//返回值：XMLHttpRequest 对象
function createXHR () {
    var XHR = [  //兼容不同浏览器和版本得创建函数数组
        function () { return new XMLHttpRequest () },
        function () { return new ActiveXObject ("Msxml2.XMLHTTP") },
        function () { return new ActiveXObject ("Msxml3.XMLHTTP") },
        function () { return new ActiveXObject ("Microsoft.XMLHTTP") }
    ];
    var xhr = null;
    //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
    for (var i = 0; i < XHR.length; i ++) {
        try {
            xhr = XHR[i]();
        } catch(e) {
            continue  //如果发生异常，则继续下一个函数调用
        }
        break;  //如果成功，则中止循环
    }
    return xhr;  //返回对象实例
}

---

建立连接

xhr.open(method, url, async, username, password);

• method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。
• url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。
• async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。
• username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
• password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。

---

发送请求

• 使用send()方法发送请求
• 参数 body 表示将通过该请求发送的数据，如果不传递信息，可以设置为 null 或者省略
  xhr.send(body);

接收响应

• 发送请求后，可以使用 XMLHttpRequest 对象的 responseBody、responseStream、responseText 或 responseXML 属等待接收响应数据。

---

简单实现异步通信

var xhr = creatXHR();  //实例化XMLHttpRequest 对象
xhr.open ("GET", "server.txt", false");  //建立连接
xhr.send(null);  //发送请求
console.log(xhr.responseText);  //接收数据

服务端（server.txt）

Hello World  //服务器端脚本

---

发送GET请求

• 以 GET 方式向服务器传递一条信息 callback=functionName。

<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
    window.onload = function () {  //页面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var url = "server.php?callback=functionName"；  //设置查询字符串
            var xhr = createXHR();  //实例化XMLHttpRequest 对象
            xhr.open("GET", url, false);  //建立连接，要求同步响应
            xhr.send(null);  //发送请求
            console.log(xhr.responseText);  //接收数据
        }
    }
</script>

• 服务端（server.php）

<?php
    echo $_GET["callback"];
?>

---

发送POST请求

• send("name1=value1&name2=value2...");

window.onload = function () {  //页面初始化
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function () {
        var url = "server.php";  //设置请求的地址
        var xhr = createXHR();  //实例化XMLHttpRequest 对象
        xhr.open("POST", url, false);  //建立连接，要求同步响应
        xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');  //设置为表单方式提交
        xhr.send("callback=functionName");  //发送请求
        console.log(xhr.responseText);  //接收数据
    }
}

• 服务端（server.php）

<?php
    echo $_POST["callback"];
?>