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。