简介
http（超文本传输文本协议）， 用于web运用传输数据的协议， 只能由客户端发起， 由做事端相应。 具有无状态等特点。
构造
http协议的传输单位是http报文（要求报文、相应报文）。 报文的构造可分为：要求/相应行、 首部字段、实体部分。
get要求报文
GET /index.html HTTP/1.1 //要求行
Host: test.com //首部字段
1
2
3
get相应报文
HTTP/1.1 200 OK //相应行
Date: Tue, 10 Jul 2012 06;50:15 GMT //首部字段
Content-Length: 362 //首部字段
Content-Type: text/html //首部字段
<html> //实体
...
1
2
3
4
5
6
7
要求行用于解释要求方法 ， 要求地址， http版本号
相应行用于解释做事器http版本号， 相应状态码， 状态码的缘故原由短句
首部字段分为： 通用首部字段、 要求首部字段、 相应首部字段、 实体首部字段
对付实体内的内容， 可以用实体首部字段加以解释。 最常利用的是content-type: xxxx， 解释实体内容的类型。
二、javaScript操作http
浏览器中， http要求可以由浏览器中的如下内容发送：
1. 浏览器中的url地址栏
2. 页面有src属性的标签（img、script、 link等）
3. 带有action属性的form表单
4. XMLHttpRequest工具
1. XMLHttpRequest的基本用法
在这些方法中， XMLHttpRequest工具供应了接口让我们操作http.基本用法如下：
var xhr = new XMLHttpRequest();//此时readyState属性值为0
xhr.open('post', 'http://www.test.com', false)//此时readyState属性值为1
xhr.send(\公众name=yang&psd=123\"大众)//readyState属性值为2
xhr.onreadyStatechange = function(){
if(xhr.readState === 4 && xhr.status === 200 ){
console.log(xhr.responseText)
}else{
console.log('Request was unsuccessfull:' + xhr.status)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
以上是XMLHttpRequest的基本利用方法。
1). 发送数据， 利用send方法
这里的发送数据指的是post方法发送数据
xhr.send(\公众name=yang&psd=123\"大众)//post方法发送了一个form表单数据
1
如果是get方法则数据拼接到url后面（利用encodeURIComponent()将名和值进行编码之后）， send方法参数必须是null
xhr.open('get', 'http://www.test.com?name='yang'&psd=123, false)//将name和value进行encodeURIComponent编码， （同cookie的value一样）， 个中open方法末了一个参数代表是否异步
xhr.send(null)//不能不写
1
2
2). 利用readyState可以查看当前xhr工具的状态， 状态有：
0– 没调用open方法
1– 没调用send方法
2– 调用send方法， 未接管到相应
3– 正在接管相应， 未接管完成
4– 相应全部接管
3). 得到相应的状态， 利用status属性， 当属性的值为200表示要求成功
var httpStatus = xhr.status
if(httpStatus === 200){
//要求成功，可以做接下来的事情了
}
1
2
3
4
4). 得到相应的数据，利用responseText属性
var result = xhr.responseText
1
5). 添加首部字段, 利用setRequestHeader方法
xhr.setRequestHeader('myHeader', 'myValue')//这里必须放在open方法， 和send方法中间， 否则不能成功添加首部字段
1
6). 得到首部字段， 利用getResponseHeader或getAllResponseHeaders方法
var header = xhr.getResponseHeader('myHeader')//传入首部字段名
var headers = xhr.getAllResponseHeader()//得到全部的首部字段，返回多行文本内容
//这是headers的结果
Date: Sun, 14 Nov 2004 18:04:03 GMT
Server: Apache/1.3.29(Unix)
Vary: Accept
X-Powered-By: PHP/4.3.8
Connection: close
Content-Type: text/html;charset=ios-8859-1
1
2
3
4
5
6
7
8
9
10
2. XMLHttpRequest跨域用法
利用XHR工具通信，有一个限定便是跨域安全策略。 默认情形下， XHR对下只能访问包含它的页面位于同一个域中的资源。 但是有时我们开拓不能不进行跨域要求。
1). CORS跨域源资源共享
基本思想： 利用自定义的首部字段让给浏览器与做事器沟通， 从而决定要求或相应是否该当成功。
全体CORS通信过程，都是浏览器自动完成，不须要用户参与。对付开拓者来说，CORS通信与同源的AJAX通信没有差别，代码完备一样。浏览器一旦创造AJAX要求跨源，就会自动添加一些附加的头信息（Origin首部字段），有时还会多出一次附加的要求，但用户不会有觉得。
2). 事理
客户端
浏览器一旦创造AJAX要求跨源，就会自动添加一些附加的头信息（Origin首部字段），有时还会多出一次附加的要求（分大略要求），但用户不会有觉得。
做事端
做事器读取Origin首部字段的值， 判断是否该当成功， 如果成功返回的相应报文中首部字段包含Access-control-allow-Origin:xxxxxx。 如果xxxxx为或与自己发送的Origin的值相同， 浏览器就会判断要求成功。
3). CORS的大略要求与非大略要求
局限
CORS跨域要求， 存在以下限定， 例如：
求方法为post/get/head，
首部字段只设置Content-Type
不能访问相应头部
cookie不随要求发送
大略情求
要求方法为post/get/head， 首部字段只设置content-type（只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain等
）， 这样的要求为大略要求。 这是浏览器将会在要求报文中添加Origin的首部字段，完成情趣。
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
1
2
3
4
5
6
非大略要求
如果不是大略要求， 浏览器将不会想处理大略要求一样处理， 例如我们希望添加其他的首部字段。 这浏览器将会发送一个预检要求（Preflighted Requests）
Preflighted Requests,如下
OPTIONS /cors HTTP/1.1 //要求的方法， 地址， http版本
Origin: http://api.bob.com // 客户真个域名
Access-Control-Request-Method: PUT //即将发起非大略要求的方法， 用于做事器判断是否支持该方法
Access-Control-Request-Headers: X-Custom-Header //即将发起非大略要求携带的首部字段， 用于做事器判断是否支持该字段
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
1
2
3
4
5
6
7
8
这种要求的方法是options方法， 用于做事器讯问。 如果做事都知足， 将会如下
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com //许可跨域的域
Access-Control-Allow-Methods: GET, POST, PUT //支持的要求方法
Access-Control-Allow-Headers: X-Custom-Header //支持的头部
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
1
2
3
4
5
6
7
8
9
10
11
12
浏览器将会用相应报文的首部字段中以Access-control开头的字段与即将发送的要求比对， 如果做事将会犹如大略要求一样发送要求。 故，非大略要求会有一个预检要求。
同时， 浏览器会将相应按照这个韶光：（Access-Control-Max-Age: 1728000）保存， 在该韶光未过期期间， 就不必发送预检要求， 而直接发起要求。
携带cookie
默认情形下， 跨域要求不会携带cookie。 须要我们设置一个属性值–withCredentials
xhr.withCredentials = true
1
当然跨域携带cookie也须要做事器支持才行， 如果做事乐意接管携带cookie的跨域信息， 就会在预检要求相应头部添加如下首部字段：
Access-Control-Allow-Credentials: true
1
3. 跨浏览器的CORS
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest()
if(\"大众withCredentials\"大众 in xhr){
xhr.open(method, url, true);
}else if (typeof XDomainRequest() != 'undefined') {
xhr = new XDomainRequest()
xhr.open(method, url)
}else{
xhr = null
}
return xhr
}
var request = createCORSRequest('get', 'http://test.com')
if(request){
request.onload = function(){//XMLHttpRequest 2级增加的事宜
//对request.responseText进行处理
}
request.send(null)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
总结
详细理解http呢是有必要的， 对付我们理解很多东西都有非常大的好处。 比如这篇文章， 关于操作http部分， 其重点便是添加实体， 添加首部字段的操作。 而关于添加首部字段呢， 就有必要明白各个首部字段的意义了。
