http简单认识及js操作http

一、http基础篇

简介

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 //首部字段

//实体

…

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. XMLHttp request 对象

1. XMLHttpRequest的基本用法

在这些方法中， XMLHttpRequest对象提供了接口让我们操作http.基本用法如下：

var xhr = new XMLHttpRequest();//此时readyState属性值为0

xhr.open(‘post’, ‘ 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’, ‘ 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: // 客户端的域名

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: //允许跨域的域

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’, ‘

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部分， 其重点就是添加实体， 添加首部字段的操作。 而关于添加首部字段呢， 就有必要明白各个首部字段的意义了。