第二十一章 Ajax与Comet
2015-10-31 20:13:42 4 举报AI智能生成
第二十一章主要探讨了Ajax和Comet两种技术。Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不影响页面状态的情况下，与服务器交换数据并更新部分网页内容。而Comet则是一种更为复杂的技术，它通过长连接保持客户端和服务器的实时通信。Comet能够让服务器主动向客户端推送数据，从而实现实时更新网页内容。这两种技术各有优劣，可以根据具体需求选择使用。总之，Ajax和Comet为网页提供了更加灵活和实时的数据交互方式。
作者其他创作
大纲/内容
Ajax与Comet
Ajax
技术核心
XMLHttpRequest对象
作用
以异步方式，无须刷新页面即可从服务器取得数据
创建XHR对象，兼容IE7
XHR用法
open()方法
3个参数
请求的URL
表示是否异步发送的布尔值
作用：调用该方法只是启动一个请求以备发送
send()方法
作用：调用该方法后，请求会被分派到服务器
该请求为同步，js代码会等到服务器响应后再执行，响应的数据会自动填充到XHR对象的属性
XHR对象的属性
responseText
作为响应主体被返回的文本
responseXML
若响应类型是\"text/xml\"/\"application/xml\
status
响应的HTTP状态
200表示成功
statusText
HTTP状态的说明
readyState
表示请求/响应过程的当前活动阶段
0：未初始化，尚未调用open()方法
1：启动，已调用open()方法，但尚未调用send()方法
2：发送，已调用send()方法，尚未收到响应
3：接收，已经接收到部分响应数据
4：完成，已经接收到全部响应数据，且可在客户端使用
readystatechange事件
readyState的值每次改变都会触发一次该事件
须在调用open()之前指定该事件处理程序，以确保跨浏览器兼容
xhr.abort()
在接收响应之前，可调用该方法取消异步请求
HTTP头部信息
解析：每个HTTP请求和响应都会带有相应的头部信息
setRequestHeader()
该方法可设置自定义的请求头部信息
2个参数：头部字段的名称，头部字段的值
需在调用open()之后且调用send()方法之前调用该方法
getAllResponseHeader()
调用该方法可获取一个包含所有头部信息的长字符串
GET请求
作用：常用于向服务器查询某些信息，可将查询字符串参数追加到URL末尾，将信息发送给服务器
addURLParam()
自定义向URL的末尾添加查询字符串参数
POST请求
作用：常用于向服务器发送应该被保存的数据
该方法是将数据传入send()方法中提交
GET与POST请求的区别
POST请求消耗的资源更多，GET请求的速度比POST请求更快
GET请求是明文传输，不太安全
GET传输的数据有大小限制
其他跨域技术
图像Ping
图像Ping是与服务器进行简单、单向的跨域通信的一种方式，常用于跟踪用户点击页面或动态广告曝光次数
请求的数据通过查询字符串形式发送，响应可以是任意内容(通常是像素图或204响应)
通过侦听load和error事件，能知道什么时候接收到响应
缺点：一，只能发送GET请求；二，无法访问服务器的响应文本
JSONP
由 回调函数和数据 两部分组成
回调函数是当响应到来时应该在页面中调用的函数
数据是传入回调函数中的JSON数据
优点：能够直接访问响应文本，支持在浏览器与服务器直接双向通信
缺点：JSONP是从其他域中加载代码执行，不安全；另外，要确定JSONP请求是否失败并不容易
Comet
一种服务器向页面推送数据的技术，能够让信息近乎实时地被推送到页面上，很适合处理体育比赛的分数和股票报价
实现方式
长轮询
指浏览器定时向服务器发送请求，看有没有更新的数据
与短轮询的区别：服务器如何发送数据，短轮询是服务器立即发送响应，无论数据是否有效；长轮询是等待发送响应
HTTP流
浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性的向浏览器发送数据
Web Sockets
目标：在一个单独的持久连接上提供全双工、双向通信
由于使用自定义协议，未加密的链接：ws://；加密的链接：wss://
XMLHttpRequest 2级
FormData对象
作用：为序列化表单以及创建与表单格式相同的数据提供了便利
可将创建的FormData实例直接传给XHR的send()方法：xhr.send(new FormData(form))
timeout属性
超时设定，表示请求在等待响应多少毫秒之后就终止，并调用ontimeout事件处理程序，仅支持IE8
overrideMimeType()方法
作用：用于重写XHR响应的MIME类型，有兼容性
需在调用send()方法之前调用该方法
进度事件
定义了与客户端服务器通信有关的事件
loadstart
在接收到响应数据的第一个字节时触发
progress
在接收响应期间持续不断的触发
error
在请求发生错误时触发
abort
在因为调用abort()方法而终止连接时触发
load
在接收到完整的响应数据时触发
loadend
跨域资源共享
CORS
使用自定义的HTTP头部让浏览器与服务器沟通，从而决定请求或响应应该成功还是失败
IE对CORS的实现:XDR
XDR与XHR的区别
cookie不会随请求发送，也不会随响应返回
只能设置请求头部信息中的Content-Type字段
不能访问响应头部信息
只支持GET和POST请求
XDR请求都是异步执行，不能创建同步请求
跨浏览器的CORS
0 条评论
回复 删除
下一页
