http简单认识及js操作http

作者 : 开心源码 本文共4744个字,预计阅读时间需要12分钟 发布时间: 2022-05-11 共61人阅读

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

http简单认识及js操作http

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » http简单认识及js操作http

发表回复