第21章——Ajax与Comet
Asynchronous JavaScript + XML
XMLHttpRequest
创建XHR对象
var xhr = new XMLHttpRequest()
属性
.readyState
- 0:未初始化——尚未调用open
- 1:启动——已调用open
- 2:发送——已调用send
- 3:接收——接收到部分响应数据
- 4:完成——接收到全部响应数据
.status
状态码
方法
.open('get/post','url','是否异步')
.send(data)
——不传则必填null
.getResponseHeader()
——获取响应头中的某个字段.getAllResponseHeaders()
——获取全部响应头
事件
readystatechange
——活动状态,每次readystate改变会触发
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status>=200 && xhr.status <300 ||xhr.status==304){
console.log(xhr.response)
}else{
console.log(xhr.status)
}
}
}
xhr.open('get','url',true)
xhr.setRequestHeader('key','value')
xhr.send(null)
跨域源资源共享
由于ajax的跨域安全策略,导致不同域源之间不能访问
解决办法
CORS
通过给请求头附加一个Origin
值,其中包含客户端的源信息(协议,域名和端口号)
然后服务端根据这个头部信息来决定是否给予响应
如果服务器认为可接受这个请求,则返回头中包含Access-Control-Allow-Origin
值与请求头中的Origin
一致
如果是公有资源,则Access-Control-Allow-Origin
为*
图像ping
通过设置图片的src为get请求的url,通常用于跟踪用户点击页面,广告曝光次数等。
缺点:1.只能发送get请求;2.无法访问服务器的响应文本
JSONP
JSON with padding(填充式JSON)
function handleResponse(res){
console.log(res);
// ...
}
var script = document.createElement("script");
script.src = "http://www.xxx.com/json?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
缺点:1.无法确定其他域是否安全。2.不方便确定JSONP请求是否失败
其他跨域技术
comet
长轮询
短轮询
HTTP流
websocket
安全
CSRF攻击——跨站点请求攻击