JavaScript高级程序设计_第21章 个人笔记

第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攻击——跨站点请求攻击