理解Ajax通信关键要素：onreadystatechange、open、send与响应解析-优快云博客

ajax实现通信包含3个关键部分
[1]onreadystatechange事件处理函数
[2]open方法
[3]send方法
1.onreadystatechange
由服务器触发的，而不是由用户触发
在Ajax执行过程中，服务器通知客户端当前的通信状态，这要依靠更新XMLHttpRequest对象的readyState属性实现，每次readyState属性的改变都会触发readystatechange事件。

2.readyState
readyState属性表示Ajax请求的当前状态
0——代表初始化，还没开始调用open方法
1——代表正在加载。open方法已经被调用，但send方法还没被调用
2——代表已经加载完毕。send方法已经被调用，请求已经开始
3——代表交互中，服务器正在发送响应
4——代表完成，响应发送完毕
理论上，readyState的值应该从0依次到4.实际上readyState值的变化会因浏览器的不同而有所差异。不过，请求结束的时候，每个浏览器都会把readyState的值统一设置为4

3.open
open方法三个参数
第一个参数： GET 、POST、PUT、DELETE、HEAD
第二个参数： URL
可以是相对路径../xx.html
可以使绝对路径/file/xx.html
可以是完整路径http://xxxx/xxxx/xx.html
你所请求的那个文件必须和发出请求的javascript文件位于同一域下

第三个参数：
true异步——脚本将会产生一个异步请求，意味着在读取后面的脚本之前，不需要等待服务器的响应

false同步——当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续

4.send
GET请求 send(null)
POST请求 send内容为post的键值对，各对之间"&"分隔，空格用加号代替，非数字和字母的字符要改写十六进制编码，比如@符号就变成了%40.

5.setRequestHeader
当浏览器像服务器请求页面时，它会伴随这个请求发送一组首部信息(header)。这些首部信息是一系列描述请求的元数据(metadata)。
在Ajax请求中，发送首部信息的工作可以用一个名为setRequestHeader的方法来完成。这个方法要用到两个字符串参数。第一个字符串定义了首部的名称，第二个字符串用来传递首部的值
如果你正用POST请求向服务器发送数据，需要将”Content-type”的首部信息设置为
“application/x-www-form-urlencoded”

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

它会告诉服务器正在发送数据，并且数据已经符合URL编码了

6.state
200成功
304没有被修改，当浏览器发送一个GET请求时，服务器通常会返回304响应

7.responseText
XMLHttpRequest的responseText属性包含了从服务器发送的数据，它是一个字符串。字符串可能是HTML、XML或者普通文本，这样取决于服务器发送的内容

当readyState属性值为4的时候，responseText属性才是可用的，表明Ajax请求已经结束
8.responseXML
如果服务器返回的是XML，那么数据将存储在responseXML属性中，只有当服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。MIME类型必须为text/xml

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/get-ajax.js"></script>
</head>
<body>
    <input type="button" value="get" onclick="getTest()">
    <input type="button" value="post" onclick="postTest()">
</body>
</html>

js文件：

//对象检测获取XMLHttpRequest对象
function getHTTPObject(){
    var xhr = false;
    if(window.XMLHttpRequest){
        xhr  = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                xhr = false;
            }
        }
    }
    return xhr;
}
function displayResponse(request){
    if(request.readyState == 4){
        if(request.status == 200 || request.status == 304){
            alert(request.responseText);
        }
    }
}

//get
function getTest(){
    var request = getHTTPObject();
    if(request){
        request.onreadystatechange = function(){
            displayResponse(request);
        };
        request.open("GET","../PHP/json.php?name=123&age=23",true);
        request.send(null);
    }
}
//post
function postTest(){
    var request = getHTTPObject();
    if(request){
        request.onreadystatechange = function(){
            displayResponse(request);
        };
        request.open("POST","../PHP/json.php",true);
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send("name=hello+world&age=12");
    }
}

json.php

<?php
if(isset($_GET['name']) && isset($_GET['age'])){
    $arr=array("name"=>$_GET['name'], "age"=>$_GET['age']);
    exit(json_encode($arr));
}else {
    $cars = array
    (
        array("Volvo", 22, 18),
        array("BMW", 15, 13),
        array("Saab", 5, 2),
        array("Land Rover", 17, 15)
    );
    exit(json_encode($cars));

}
?>