原生JavaScript实现Ajax（二）：同步，异步，GET，POST

上文使用同步方式实现了ajax，本文使用异步的方式，因为异步才是我们的目的，也是真正常用的手段，使用异步需要触发readystatechange事件，然后检测readyState这个属性就行。不同的浏览器，这里略有不同，但大致分为下面5种状态值：

 -  0：未初始状态 ： 尚未调用open()方法，有的浏览器没有此状态；
 -  1：启动 ： 已经调用open方法，尚未调用send方法；
 -  2：发送 ： 已经调用send()方法，但是还未收到任何响应；
 -  3：接受 ： 已经接收到部分响应数据了，此状态一般没啥用，有的浏览器没有；
 -  4：完成 ： 已经成功收到全部响应数据，而且可以使用，大功告成！ 

异步

此时，send方法里的参数就不能为空了，因为异步的需要，更是要对readystatechange事件的readyState状态码进行判断，也就是上面一段话。

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

var xhr = createXHR();

xhr.onreadystatechange = function() {
    //如果不用等于4判断一下，这个函数会执行四五次，也只有等于4的时候才是真的成功
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText);
        } else {
            alert('获取数据错误,错误代码：' + xhr.status + '错误信息：' + xhr.statusText);
        } 
    }

}
xhr.open('get', 'test.php?rand='+Math.random(), true);
xhr.send(null);

GET和POST

一般而言，在web应用中，GET一般是URL提交请求，test.php?user=guoyu&age=28，POST一般是表单提交，比如:

<form method="POST">
    <input type="text" name="user" value="guoyu">
    <input type="text" name="age" value=28>
</form>

不过呢，在ajax中，就不分什么表单了，语法差别不大。

---

HTTP头信息

两种头信息：
1，响应头信息：服务器返回的信息，客户端可以获取，不可以设置；
2，请求头信息：客户端发送的信息，客户端可以设置，不可以获取；

获取响应头信息：

1，getAllResponseHeaders();//获取整个响应头信息
2,getResponseHeader('Content-Type');//比如只获取Content-Type信息

---

---

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

var xhr = createXHR();

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.getAllResponseHeaders());
        } else {
            alert('获取数据错误,错误代码：' + xhr.status + '错误信息：' + xhr.statusText);
        } 
    }

}
xhr.open('get', 'test.php?rand='+Math.random(), true);
//设置请求头信息，比如添加一些信息
xhr.setRequestHeader('myname','guoyu');
xhr.send(null);

GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可将查询字符串参数追加到URL的尾部，以便提交给服务器。

xhr.open('get','test.php?rand='+Math.random()+'&user=guoyu&age=28',true);

将test.php改为

<?php
    header('Content-Type:text/html;charset=utf-8');
    //echo Date('Y-m-d H:i:s');
    print_r($_GET);
    print_r($_POST);
?>

前端文件改为：

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

var xhr = createXHR();

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText);//注意这里，见下图
        } else {
            alert('获取数据错误,错误代码：' + xhr.status + '错误信息：' + xhr.statusText);
        } 
    }

}
xhr.open('get', 'test.php?rand='+Math.random()+'&user=guoyu&age=28', true);
xhr.send(null);

特殊字符问题，比如&的冲突处理

有些特殊字符会造成参数传递错误，比如user是gu&oyu，也就是本身就带&，这个时候，需要用js提供的一个方法：encodeURIComponent()方法。

---

先添加一个addParam()方法，用于在URL后面追加参数

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}
function addParams(url, name, value) {
    //先判断url有没有‘？’，若果无，加参数时需要补上，如果已经有了，则不需在加‘？’
    url += url.indexOf('?') == -1 ? '?' : '&';
    url += name + '=' + value;
    return url;
}

var xhr = createXHR();
var url = 'test.php?rand='+Math.random();
url = addParams(url, 'user', 'g&uoyu');//注意这里特殊符号
url = addParams(url, 'age', 28);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText);
        } else {
            alert('获取数据错误,错误代码：' + xhr.status + '错误信息：' + xhr.statusText);
        } 
    }

}
xhr.open('get', url, true);
xhr.send(null);

encodeURIComponent

function addParams(url, name, value) {
    //先判断url有没有‘？’，若果无，加参数时需要补上，如果已经有了，则不需在加‘？’
    url += url.indexOf('?') == -1 ? '?' : '&';
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
    return url;
}

---

---

---

POST请求

1. 将GET –> POST;
2. 要传的参数，不再是追加在URL，而是send()中发送到服务器；
3. 修改请求头：一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别处理，因为POST请求和web表单提交是不同的，需要使用XHR来模仿表单提交，不然，POST数据不能提交到服务器，显示空白，需要如下处理：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

var xhr = createXHR();
var url = 'test.php?rand='+Math.random();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText);
        } else {
            alert('获取数据错误,错误代码：' + xhr.status + '错误信息：' + xhr.statusText);
        } 
    }

}
xhr.open('POST', url, true);//第一步：GET换成POST
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//第二步：修改请求头，模仿form提交
xhr.send('user=guoyu&age=28');//第三步：要提交的数据放到send方法中