JS21-Ajax与Comet

向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。

核心对象:XMLHttpRequest对象(XHR)

XMLHttpRequest对象

var xhr = new XMLHttpRequest()

open方法

参数:要发送的请求的类型(get,post)、请求的URL、表示是否异步发送的布尔值。

open方法并不会真正发送请求,而只是启动一个请求以备发送

发送请求:send()

参数:作为请求主体发送的数据

同步请求:表示等服务器响应之后再继续执行。

在收到请求之后,响应的数据会自动天长XHR对象的属性,相关属性:

responseText:作为响应主体被返回的文本
responseXML:如果响应的内容是"text/xml""application/xml",这个属性将保存着数据XML DOM文档
status:响应的HTTP状态
status:HTTP状态的说明。

readyState属性:表示请求/响应过程的当前活动阶段。
0:为初始化
1:启动
2:发送
3:接受
4:完成

每一次状态的改变,都会触发一次readystatechange事件,不过必须在open()之前指定事件处理程序才能确保跨浏览器的兼容性。
必须通过XHR对象本身来确定下一步该怎么做。

在接受相应之前,可以用abort()方法来取消异步的请求。

HTTP头部信息

在发送XHR请求的同时,还有发送:

Accept
Accept-Charset
Accept-Encoding
Accept-Language:
Connectio
Cookie
Host
Referer
User-Agent

GET请求

想服务器查询某些信息

查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,才能放到URL的末尾。所有的名-值对都必须由和号&分割。

POST请求

向服务器发送应该被保存的数据。POST请求,把数据作为请求的主体提交,POST请求的主体可以包含非常多的数据,而且格式不限。

XMLHttpRequest2级

FormData

超时设定timeout 会触发ontimeout事件

overrideMimeType()方法 用于重写XHR相应的MIME类型

进度事件

loadStart:在接收到相应数据的第一个字节时触发
progress:在接受相应期间持续不断地触发
error:在请求发生错误时触发
abort:在因为调用了abort()方法而终止连接时触发
load:在接受完整的响应数据时触发
loadend:在通信完成或者触发error、abort和load事件后触发。

跨域资源共享

XHR对象只能访问与包含它的页面位于同一个于中的资源。
CORS(Cross-Origin Resource Sharing)
使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是否应该成功,还是失败。

IE对CORS的实现

XDR(XdDomainRequest)类型

所有XDR的请求都是异步执行的,不能用它来创建同步请求。

CSRF(corss-site request forgery) 跨站点请求伪造
XSS(Corss-site scripting)跨站点脚本

其它浏览器对CORS的实现

原生的XMLHttpRequest对象支持跨域,要在open中传入绝对URL

Prefighted Requests

透明服务器验证技术

Preflight请求。

带凭据的请求

默认情况下,跨域请求不提供凭据(cookie,HTTP认证,客户端SSL证明)
通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。,服务器接受带凭据的请求,会用Access-Control-Allow-Credentials:true的HTTP头部来响应。

其它跨域技术

图形ping

JSONP

Comet

一种服务器向叶面推送数据的技术。
Comet是能够让信息近乎实时地被推送到页面上,非常适合处理体育比赛的分数和股票报价。

  1. 长轮询
    短轮询:浏览器定时向服务器发送请求,看有没有更新的数据。
    长轮询:页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可发送。
  2. HTTP流
    它在整个生命周期内只使用一个HTTP连接。

服务器发送事件

SSE(Server-Sent Events,服务器发送事件)

web sockets

在一个单独的持久的连接上提供全双工、双向通信。

文章目录
  1. 1. XMLHttpRequest对象
    1. 1.1. open方法
  2. 2. HTTP头部信息
  3. 3. GET请求
  4. 4. POST请求
  5. 5. XMLHttpRequest2级
    1. 5.1. FormData
    2. 5.2. 超时设定timeout 会触发ontimeout事件
    3. 5.3. overrideMimeType()方法 用于重写XHR相应的MIME类型
  6. 6. 进度事件
  7. 7. 跨域资源共享
    1. 7.1. IE对CORS的实现
    2. 7.2. 其它浏览器对CORS的实现
    3. 7.3. Prefighted Requests
    4. 7.4. 带凭据的请求
  8. 8. 其它跨域技术
    1. 8.1. 图形ping
    2. 8.2. JSONP
    3. 8.3. Comet
  9. 9. 服务器发送事件
  10. 10. web sockets
,