javascript笔记整理系列 - HTTP协议

1 协议简介

　在浏览器中输入http://www.darkclouds.top时，浏览器会有如下反映：

1. 通过www.darkclouds.top找到服务器ip地址。

2. 通过服务器ip确定服务器。

3. 尝试通过80端口与服务器建立TCP连接。（80端口是HTTP的默认通信端口）

4. 如果服务器存在并且接受了该连接，浏览器会发送如下内容：

//请求信息 Chrome-Network-General
Request URL:http://www.darkclouds.top/main.faf285ef1b10d8422c38.bundle.js
Request Method:GET
Status Code:200 OK (from disk cache)
Remote Address:60.205.30.72:80

Request URL：请求资源路径

Request Method：请求方法：

GET：得到资源

DELETE：删除资源

PUT：替换资源

POST：发送信息

Status Code：应答状态

2开头：请求成功

4开头：请求中有错误

5开头：服务器端异常

Remote Address：远程地址，也就是服务器ip:端口

然后服务器会通过一个链接返回如下内容

//接收信息 Chrome-Network-Response Headers

Accept-Ranges:bytes
Content-Encoding:gzip
Content-Length:3209                                //请求资源大小
Content-Type:application/javascript                //请求资源类型
Date:Tue, 07 Mar 2017 06:35:20 GMT
ETag:"24e26e1-3049-54a1b0269888d"
Last-Modified:Tue, 07 Mar 2017 02:45:48 GMT
Server:Apache
Vary:Accept-Encoding,User-Agent

浏览器会出去响应中的空行，并将剩余部分作为HTML文档展示。

　

2 浏览器和HTTP

浏览器可以同时发送多个请求。

请求字符串以一个问号开始，后面是多个名称和值。

&字符用来分隔不同的名值对。

请求字符串中的一些字符会被转义。编码格式为URL编码。JavaScript提供了encodeURIComponent和decodeURIComponent函数来按照这种格式进行编码和解码。

3 XMLHttpRequest

浏览器端的JavaScript发送HTTP请求所用的接口叫做XMLHttpRequest，由微软为IE浏览器开发。

4 发送请求

发送请求：

var req = new XMLHttpRequest();
req.open("GET","http://www.darkclouds.top/main.faf285ef1b10d8422c38.bundle.js",false);
req.send(null);
console.log(req.responseText);

open方法配置请求，不以协议名开头(如http://)的URL是相对URL，根据当前文档路径解析URL。如果URL以斜杠(/)开头，浏览器会用其替换当前路径服务器名后的路径。如果开头没有斜杠，则浏览器会将相对URL添加到当前路径后，并在中间使用斜杠进行分隔。

打开请求后使用send方法发送请求，参数为请求体。GET中可以传递null。

open方法第三个参数为是否异步。

request对象的responseText属性得到响应体。

还可以从request对象中获取响应的其他信息，如status、statusText、getResponseHeader等。

5 异步请求

将open方法的第三个参数改为true，实现异步请求。但需要监听request对象的load事件

var req = new XMLHttpRequest();
req.open("GET","http://www.darkclouds.top/main.faf285ef1b10d8422c38.bundle.js",true);
req.addEventListener("load",function(){
console.log(req.responseText);
})
req.send(null);  //挂监听，再发送。

6 获取XML数据

　如果XMLHttpRequest对象获取的结果是XML文档，该对象会解析XML文档，并将解析结果保存在其response XML属性中，不过结果没有一些HTML特定的功能性属性。例如style。responseXML保存的对象对应于document对象。其中的documentElement属性和XML最外层标签对应。

　XML文件可以用于与服务器交换结构化的信息。其标签嵌套标签的格式使得其可以存储大部分种类的文件。但是DOM接口不便于信息提取，而且XML文档具有冗余性。通常更好的方式是使用JSON进行数据通信。

var req = new XMLHttpRequest();
req.open("GET","...x.json,true);
req.addEventListener("load",function(){
console.log(JSON.parse(req.responseText));
})
req.send(null);

7 HTTP沙箱

　当访问A网站时，不希望脚本向B网站发送请求，担心A网站从我的浏览器获取身份信息，然后向B发送请求导致损失。

　网站可以自己防范这种攻击，但很多网站并没有做。因此浏览器通过禁止脚本对其他域名发送请求来保护安全。也就是不允许跨域请求。

　但有时候需要跨域请求来实现一些需求，这就很头疼。不过，服务器可以在响应头中包含如下信息来明确告诉浏览器，网站向其他域名发送的请求是没问题的。

　

Access-Control-Allow-Origin: *

8 抽象请求

也就是将XMLHttpRequest接口乱糟糟的代码封装成方法，比如我们常用的jQuery中的ajax。