ajax重新认识：(3)ajax跨域

一、概念

一个域名地址的组成：

http://  www   ·  abc.com  :   8080    /    scripts/jquery.js

协议      子域名        主域名        端口号        请求资源地址

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

不同域之间相互请求资源，就算跨域

比如：http://www.abc.com/index.html 请求 http://www.efg.com/service.php

javaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单的理解就是因为JavaScript同源策略的限制，

a.com域名下的js无法操作b.com或是c.a.com域名下的对象

二、解决方法

① 代理

当一个域需要访问另一个域下的数据的时候，这时候会在后台将另一个域中的数据取到，然后再前端依旧可以使用同域的方式访问数据，即相当于访问的就是代理服务器上的数据

② JSONP

解决主流浏览器中的get跨域问题,不支持post请求

$.ajax({
    url : 'http://127.0.0.1:8080/service.php',
    type : 'GET',
    <span style="color:#ff0000;">dataType : 'jsonp',</span>
    <span style="color:#ff0000;">jsonp : 'callback',// 这里的名字任意取</span>
    success : function(data) {
           // do something
    }
});

在后台需要获取callback的值

$jsonp = $_GET['callback'];

// 返回的数据格式

$result = $jsonp.'{"success":false,"msg":"返回成功"}';

注：ajax存在跨域请求问题，但是js脚本不存在跨域问题

③ XHR2

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

IE10以下的版本都不支持

在服务器端做一些小小的改造即可：

header('Access-Control-Allow-Origin:*');

header('Access-Control-Allow-Methods:POST,GET');

另外XHR2也带有更多高级功能，例如progress进度，文件上传，获取二进制数据等。详见 https://dev.opera.com/articles/xhr2/

XDR (IE 8-9 Only)

对于XHR2，IE浏览器的支持是IE10以上。但是IE早在IE8时就推出了 XDomainRequest 对象进行跨域操作，一直沿用到IE10才被取代掉。因此在IE8,IE9中应该使用 XDomainRequest (XDR)来实现。

XDR在创建时是通过 new XDomainRequest() 进行创建。其他操作和XHR有细微差别。比如open方法只有method和url两个参数，XDR只支持异步不支持同步操作。详细见文档 XDomainRequest object

 
 
var xdr = new XDomainRequest();
xdr.open("get", "http://www.example.com");
xdr.onload = function() {    //success(xdr.responseText);}
xdr.send();

另外使用XDR时也需要服务器端设置上面提到的 Access-Control-Allow-Origin 头信息。