廖雪峰老师JS教程读书笔记（二）：原生AJAX与跨域总结

廖老师网站原文

原生AJAX请求

//创建一个XMLHttpRequest对象var request=new XMLHttpRequest();//readystate发生change时会执行的回调函数request.onreadystatechange=function(){    if(request.readystate===4){  //请求完成        if(request.status===200){            //请求成功要执行的代码，通过responseText取请求回来的数据        }else{            //请求失败要执行的代码，通过status判断失败原因        }    }else{        //还在请求中     }}//规定请求的配置,method为请求方法，url为请求路径，async为是否异步，不带此参数默认为true，request.open(method,url,async)；//此时真正发送请求，data为发送的附带数据，没有要发的可以发送null，浏览器兼容好像会好一些。request.send(data || null)/*//如果不支持XMLHttpRequest对象，则需要创建ActiveXObject对象var request;if(window.XMLHttpRequest){    request=new XMLHttpRequest();}else{    request=new AcitveXObject(Microsoft XMLHTTP);}*/

跨域

同源政策：

相同域名，相同协议，相同端口（有的浏览器不要）。
要请求的url不符合同源政策，则需要跨域才能访问

跨域方法：

1. Flash插件

通过Flash插件发送请求，绕过浏览器安全限制，必须安装Flash并和Flash交互，而且现在Flash用的越来越少了。

---

2. 代理服务器

'/proxy?url=http://www.sina.com.cn'
在同源域名下架设代理服务器转发请求，js发送请求到这个代理服务器，代理服务器再把结果返回，麻烦在于需要在服务器端额外处理

---

3. JSONP

利用浏览器可以引用外域的JavaScript资源这个特性，在script标签中发送请求，接受回调，这种方法只能发送GET请求，且要求返回JavaScript，通常以函数调用的方式返回
具体实现：

//在页面中先写好回调函数var callbackFuncName=function(data){    //要执行的代码}var test=document.createElement('script');test.src=url;   //url为要请求的地址，这里要注意！！！url最后一般带有callback字段，不一定是这个名字，这个是由服务器端代码决定的。总之这个字段的值为页面中定义的回调函数的函数名。之前所说的一般会返回函数调用，就是服务器端获取到callback字段后经过处理最后发送回来callback调用。document.getElmentsByTagName('head')[0].appendChild(test);  //动态添加发送请求的script结点到head标签的最后，接受到返回为函数调用则立即调用callback

---

4. CORS

CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。
Origin为当前发送请求的页面所在的域，当它向外域发送请求时，外域发回的响应头中有一个Access-Control-Allow-Origin字段，如果这个字段有请求页面的Origin，或者为*(所有页面都能请求)，那么请求成功，否则失败。
关键在于对方服务器是否愿意给你设置正确的Access-Control-Allow-Origin字段

简单请求：上面这种请求就是简单请求，简单请求包括GET、HEAD和POST（POST的Content-Type类型
仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345），通常能满足90%的需求。

复杂请求：对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：

OPTIONS /path/to/resource HTTP/1.1Host: bar.comOrigin: http://my.comAccess-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method：

HTTP/1.1 200 OKAccess-Control-Allow-Origin: http://my.comAccess-Control-Allow-Methods: POST, GET, PUT, OPTIONSAccess-Control-Max-Age: 86400

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。

由于以POST、PUT方式传送JSON格式的数据在REST中很常见，所以要跨域正确处理POST和PUT请求，服务器端必须正确响应OPTIONS请求。