XMLHttpReauest

HTTP是一种无状态的协议

HTTP请求

一个完整的HTTP请求过程，通常有下面7个步骤：

1. 建立TCP连接
2. Web浏览器向Web服务器方法发送请求命令
3. Web浏览器发送请求头信息
4. Web服务器应答
5. Web服务器发送应答头信息
6. Web服务器向浏览器发送数据
7. Web服务器关闭TCP连接`

HTTP请求组成：

1. HTTP请求的方法或动作，比如是GET还是POST请求
2. 正在请求的URL，请求的地址
3. 请求头，包含一些客户端环境信息，身份验证信息等
4. 请求体，也就是请求正文，可以包含客户提交的查询字符串信息，表单信息等

HTTP请求内容

 GET/login.php HTTP/1.1    // 请求方法、url
 Host: localhost           // 请求头
 Connection: keep-alive
 Accept: text/javascript,application/javascript,application/ecmascript,application/x-ecmascript,*/*;
 q=0.01
 X-Requested-Width: XMLHttpRequest
 User-Agent: Mozilla/5.0(Windows NT 6.1)Referer: http://www.baidu.com/
 Accept-Encoding: gzip,deflate,sdch
 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

 username=admin&password=123456   // 请求体

请求头和请求体之间要空一行

HTTP请求方法

• GET
  • 一般用于信息获取
  • 使用URL传递参数，发送的信息对任何人可见，添加在书签上可以直接使用
  • 对所发送信息的数量有限制，一般在2000个字符
  • 幂等
• POST
  • 一般用于修改服务器上的资源
  • 发送的信息嵌在HTTP请求的请求体之中，对一般人不可见
  • 对所发送信息的数量无限制

HTTP响应

• 状态码，一个数字和文字组成，用来显示请求是成功还是失败
• 响应头，包含一些服务器信息，例如：服务器类型、日期时间、内容类型、长度等
• 响应体，也就是响应正文

HTTP响应内容

HTTP/1.1 200 OK
Date: Sun, 23 Nov 2017 13:21:34 GMT
Server: Apache
Content-Encoding: gizp
Content-Length: 7112
Connection: Keep-Alive
Content-Type: application/javascript

HTTP响应状态码

HTTP状态码有3位数字构成，其中首位数字定义了状态码的类型：

• 1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中
• 2XX：成功，表示用户请求被正确接收，理解和处理，例如：200 OK
• 3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
• 4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，表示请求中所引用的文档不存在
• 5XX：服务器错误，表示服务器不能完成对请求的处理，如：500

创建XMLHttpRequest对象

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

XMLHttpRequest发送请求

• open(method, url, async)（调用HTTP请求)
  • method：发送请求方法GET，POST...(不区分大小写，一般大写)
  • url：地址
  • 请求同步/异步（ture/false)，默认true
• send(string)（将请求发送到服务器)
  • string：参数（GET方法，不填写/null；POST方法，参数）

例子

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

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

request.open('POST', 'create.php');
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send('name=张三&sex=男');

request.setRequestHeader设置HTTP的头信息，告诉服务器要发送一个表单

XMLHttpRequest响应

• responseText：获得字符串形式的响应数据
• responseXML：获得XML形式的响应数据
• status和statusText：以数字和文本形式返回HTTP状态码
• **getAllRequestHeader()：获取所有的响应报头
• **getResponseHeader()：查询响应中的某个字段的值

通过监听readyState属性的变化可以知道服务器响应的变化

• 0：请求未初始化，open还没有调用
• 1：服务器连接已建立，open已经调用了
• 2：请求已接收，也就是接收到头信息了
• 3：请求处理中，也就是接收到响应主体了
• 4：请求已完成，且响应已就绪，也就是响应完成了

通过onreadystatechange方法监听readyState的变化

XHR请求的完整过程

var request = new XMLHttpRequest();
request.open('GET', 'get.php', true);
request.send();
request.onreadystatechange = function() {
    if (request.readystate === 4 && request.status === 200) {
        // 做一些事情 request.responseText
    }
}