ajax重新认识：(1)ajax初步

说明：个人在慕课网中学到的一些知识，根据讲解做了一些总结，仅此备忘兼分享

学习网址：http://www.imooc.com/learn/250

一、创建XHR对象

var request;
if(window.XMLHttpRequest) {
    request = new XMLHttpRequest();    // IE7+,FireFox,Chrome,Opera,Safari...
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");    // IE6,IE5
}

二、创建HTTP请求

http是计算机通过网络进行通信的规则。
http是一种无状态协议：不建立持久的连接，服务端不保留连接的信息
http请求过程：
1，建立TCP连接
2，浏览器向服务器发送请求命令
3，浏览器向服务器发送请求头信息
4，服务器应答
5，服务器发送应答头信息
6，服务器发送数据
7，服务器关闭TCP连接

请求响应的状态码
1xx：信息类，表示收到web浏览器请求，正在进一步的处理中
2xx：成功，表示用户请求被正确接收，理解和处理。如200 OK
3xx：重定向，表示请求没有成功，客户必须采取进一步的操作
4xx：客户端错误，表示客户端提交的请求有错误，例如，404 not found，意味着请求中所引用的文档不存在
5xx：服务器错误，表示服务器不能完成对请求的处理，如500

① 发送一个GET请求

request.open("GET", "get.php", true);
request.send();

② 发送一个POST请求

request.open("POST", "post.php", true);
request.send();

③ 发送一个带请求体的POST请求

request.open("POST", "create.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=Ryn&hobby=女");

三、取得响应

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据

status和statusText：以数字和文本的形式返回HTTP状态码

getAllResponseHeader()：获取所有的响应报头

getResponseHeader()：查询响应中的某个字段的值

readyState属性的意思：
0:请求未初始化，open还没有调用
1:服务器连接已经建立，open已经调用
2:请求已经被接收，接收到请求头信息
3:请求处理中，接收到请求体信息
4:请求已完成，并且响应已经就绪完成

request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        //处理request.responseText
    }
}

四、完整案例

var request;
if(window.XMLHttpRequest) {
    request = new XMLHttpRequest();    // IE7+,FireFox,Chrome,Opera,Safari...
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");    // IE6,IE5
}
request.open("POST", "create.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=Ryn&hobby=女");
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        //处理request.responseText
    }
}