前端重点知识整理（JavaScript）五：ajax

XHR的用法

　　Ajax技术的核心是XMLHttpRequest对象（XHR）。
　　用法看下面的代码

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){    if ( xhr.readyState == 4){//已经调用open()、send()，并接收到全部响应数据，可以在客户端使用了        if((xhr.status >= 200 && xhr.status < 300) || chr.status == 304){//304表示可以直接使用浏览器中缓存的版本            alert(xhr.responseText);        } else {            alert("Request was unsuccesful: " + xhr.status);        }    }};xhr.open("get", "example.txt", true);//是否异步发送请求的布尔值xhr.send(null);//不需要通过请求主体发送数据

HTTP头部信息

每个HTTP请求和响应都会有响应头部信息。

Accept：浏览器能处理的内容类型
Accept-Charset
Accept-Encoding
Accept-Language
Connection
Cookie
Host
Referer：发出请求的页面的URI
User-Agent：浏览器的用户代理字符串

这里顺带说一下常用的状态码

200 OK 一切正常，对GET和POST请求的应答文档跟在后面
201 Created 服务器已经创建了文档，Location头给出了它的URL。
202 Accepted 已经接受请求，但处理尚未完成。
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
304 Not Modified客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy客户请求的文档应该通过Location头所指明的代理服务器提取
401 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
404 请求失败，请求所希望得到的资源未被在服务器上发现。
500 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
503 由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复

GET/POST

GET

　　get是从服务器上获取数据，如下面的代码

xhr.open("get", "exapmle.php?name1=value1&name2=value2","true);

Post

　　post是向服务器传送数据，如下面的代码

xhr.open("post", "postexapmle.php","true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");//表单提交时的内容类型xhr.send(serialize(form));

或者

xhr.open("post", "postexapmle.php","true);var form = document.getElementById("user-info");//表单提交时的内容类型xhr.send(new FormData(form));

区别

• GET传送的数据量较小，不能大于2KB；POST传送的数据量较大，一般被默认为不受限制。
• GET请求能够被缓存，会保存在浏览器的浏览记录中；POST不可以
• GET查询字符串会显示在地址栏的URL中，不安全；POST数据不会显示在地址栏中

跨域

什么是跨域

　　什么是跨域？跨域是指从一个域名的网页去请求另一个域名的资源。比如从http://www.baidu.com/ 页面去请求 http://www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。

CORS

　　A上的页面获取B上的资源，浏览器会检查服务器B的HTTP头(HEAD请求)，如果Access-Control-Allow-Origin中有A，或者是通配符*，浏览器就会允许跨域。这叫CORS（Cross-Origin Resource Sharing）
　　IE8中引入了XDR类型，实现跨域通信

var xdr = new XDomainRequest();xdr.open("get", "http://www.somewhere-else.com/page/","true);xdr.send(null);

　　其他浏览器都通过XMLHttpRequest对象实现了对CORS的原生支持，无需像IE里一样额外编写代码就可以触发这个行为。

图像ping

　　<img>能不受限制地从其他域加载资源。这是与服务器进行简单、单向的跨域通信的一种方式

var img = new Image();img.src = "http://www.somewhere-else.com/test?name=Nicholas";

JSONP

　　JSON with padding（填充式JSON/参数式JSON），即被包含在函数调用中的JSON。JSONP由回调函数和数据组成。回调函数是当相应到来时应该在页面中调用的函数。数据时传入回调函数中的JSON数据。看下面的代码

function handleResponse(reponse){    //JSON数据}var script = document.createElement("script");script.src = "http://www.somewhere-else.com/test?callback=handleResponse";document.body.insertBefore(script, document.body.firstChild);

　　<script>能不受限制地从其他域加载资源。这是一种支持在浏览器与服务器之间双向通信的方法。但也存在不安全的问题。

Comet

　　Comet是对Ajax的进一步扩展，让服务器几乎能够实时地向客户端推送数据。实现Comet的手段有长轮询和HTTP流（只使用一个HTTP连接）。

Web Sockets

　　Web Sockets是一种新浏览器API，是一种与服务器进行全双工、双向通信的信道。它不使用HTTP协议，而使用一种自定义的协议。这种协议专门为快速传输小数据设计，适合用于移动端。

var socket = new WebSocket("ws://www.example.com/server.php");socket.send("Hello world");

参考

《JavaScript高级程序设计（第3版）》