ajax以及跨域《javascript高级程序设计笔记》

21.1 XMLHTTPRequest

• IE7之前是不支持XMLHTTPRequest的
• 只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
}
xhr.open("get", "example.php", false);
xhr.setRequestHeader("MyHeader", "MyValue"); //可以选择不发送
xhr.send(null);

• xhr.abort();可以在接受响应之前取消
• 客户端随之发送的头部信息xhr.setRequestHeader("MyHeader", "MyValue");

Accept：浏览器能够处理的内容类型。
Accept-Charset：浏览器能够显示的字符集。
Accept-Encoding：浏览器能够处理的压缩编码。
Accept-Language：浏览器当前设置的语言。
Connection：浏览器与服务器之间连接的类型。
Cookie：当前页面设置的任何Cookie。
Host：发出请求的页面所在的域 。
Referer：发出请求的页面的URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规
范一致，也只能将错就错了。（这个英文单词的正确拼法应该是referrer。）
User-Agent：浏览器的用户代理字符串。

• 同时也支持得到服务器发送的头部信息

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

XMLHttpRequest 2

• FormData数据

var data = new FormData(document.forms[0]);
//或者
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

• 超时设定，不过只有IE8支持的样子
• overrideMimeType(),调用overrideMimeType()必须在send()方法之前，才能保证重写响应的MIME 类型。

xhr.overrideMimeType("text/xml");

进度事件

• load事件

var xhr = createXHR();
xhr.onload = function(){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
  } else {
    alert("Request was unsuccessful: " + xhr.status);
  }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

• progress事件

跨源资源共享

• IE对CORS的实现
  cookie 不会随请求发送，也不会随响应返回。只能设置请求头部信息中的Content-Type 字段。不能访问响应头部信息。只支持GET 和POST 请求。

var xdr = new XDomainRequest();
xdr.onload = function(){
   alert(xdr.responseText);
};
xdr.onerror = function(){
   alert("An error occurred.");
};
xdr.timeout = 1000;
xdr.ontimeout = function(){
   alert("Request took too long.");
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.contentType = "application/x-www-form-urlencoded";
xdr.send(null);

• 其他浏览器对CORS的实现
  一些浏览器原生态支持xhr的跨域,不能使用setRequestHeader()设置自定义头部。 不能发送和接收cookie。调用getAllResponseHeaders()方法总会返回空字符串。
• Preflighted Reqeusts
  自定义头部
• 带凭据的请求
  withCredentials 属性设置为true，可以指定某个请求应该发送凭据。如果服务器接受带凭据的请
  求，会用下面的HTTP 头部来响应。
  Access-Control-Allow-Credentials: true

其他跨域技术

利用DOM 中能够执行跨域请求的功能，

• 图像Ping
  图像Ping 是与服务器进行简单、单向的跨域通信的一种方式。
  请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204 响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load 和error 事件，它能知道响应是什么时候接收到的。

var img = new Image();
img.onload = img.onerror = function(){
  alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";

• JSONP
  JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面是一个典型的JSONP请求。

• frame框架和设置domain

除了Ajax之外

• Comet
• 服务器发送事件SSE
• Web Sockets

CSRF

对于未被授权系统有权访问某个资源的情况，我们称之为CSRF（Cross-Site Request Forgery，跨站点请求伪造）。未被授权系统会伪装自己，让处理请求的服务器认为它是合法的。受到CSRF 攻击的Ajax程序有大有小，攻击行为既有旨在揭示系统漏洞的恶作剧，也有恶意的数据窃取或数据销毁。
为确保通过XHR 访问的URL 安全，通行的做法就是验证发送请求者是否有权限访问相应的资源。
有下列几种方式可供选择。

• 要求以SSL 连接来访问可以通过XHR 请求的资源。
• 要求每一次请求都要附带经过相应算法计算得到的验证码。

请注意，下列措施对防范CSRF 攻击不起作用。

• 要求发送POST 而不是GET 请求——很容易改变。
• 检查来源URL 以确定是否可信——来源记录很容易伪造。
• 基于cookie 信息进行验证——同样很容易伪造。

XHR 对象也提供了一些安全机制，虽然表面上看可以保证安全，但实际上却相当不可靠。实际上，前面介绍的open()方法还能再接收两个参数：要随请求一起发送的用户名和密码。带有这两个参数的请求可以通过SSL 发送给服务器上的页面，如下面的例子所示。

xhr.open("get", "example.php", true, "username", "password"); //不要这样做！！

总结

Ajax 是无需刷新页面就能够从服务器取得数据的一种方法。关于Ajax，可以从以下几方面来总结
一下。

• 负责Ajax 运作的核心对象是XMLHttpRequest（XHR）对象。
• 虽然实现之间存在差异，但XHR 对象的基本用法在不同浏览器间还是相对规范的，因此可以放心地用在Web 开发当中。
• 同源策略是对XHR 的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。试图访问上述限制之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。这个解决方案叫做CORS（Cross-Origin Resource Sharing，跨源资源共享），IE8 通过XDomainRequest 对象支持CORS，其他浏览器通过XHR 对象原生支持CORS。
• 图像Ping 和JSONP 是另外两种跨域通信的技术，但不如CORS 稳妥。
• Comet 是对Ajax 的进一步扩展，让服务器几乎能够实时地向客户端推送数据。实现Comet 的手段主要有两个：长轮询和HTTP 流。所有浏览器都支持长轮询，而只有部分浏览器原生支持HTTP 流。SSE（Server-Sent Events，服务器发送事件）是一种实现Comet 交互的浏览器API，既支持长轮询，也支持HTTP 流。
• Web Sockets 是一种与服务器进行全双工、双向通信的信道。与其他方案不同，Web Sockets 不使用HTTP 协议，而使用一种自定义的协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的Web 服务器，但却具有速度上的优势。