Ajax跨域

什么是跨域

简单的理解就是因为javascript同源策略的限制(同源策略: javascript或是cookie 默认只允许访问同域名下的内容),例如a.com下不能访问b.com下的内容,这就是跨域.

不同域条件

先看看域名的组成:

当协议 子域名 主域名 端口号任意一个不相同,就算是不同域,

跨域解决

• jsonp
  jsonp利用的是script标签来实现(毕竟script不存在跨域问题),

只支持GET请求,不支持POST请求
一般在URL中传入一个callback的参数,用来调用函数

function getJSON(url,fn){
// 创建 script标签
    var oScript = document.createElement('script');
    oScript.src = url;
    document.body.appendChild(oScript);
    var reg = /callback=([^&]+)/;
    var fnName = url.match(reg)[1];
// 挂载window
    window[fnName] = fn;   // 函数在服务器端 执行
        oScript.onload = function(){
            document.body.removeChild(oScript);
            delete(window[fnName]);
        }
}

PHP页面:

echo $_GET['callback'].'({"name":"hello"})';

以上就是jsonp方法的主要实现.

毕竟 jsonp不能实现POST请求

• CORS
  这个方法既可以实现post又可以实现 get请求

但是这个方法IE10以下不支持
基本思想: 使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是 应该失败。
在php页面添加一下代码:

header("Access-Control-Allow-Origin:*"); 
header("Access-Control-Allow-Methods","GET,POST");

补充一下

关于对 浏览器检测是否支持 CORS

function createCORS(fn,url){
var xhr = new XMLHttpRequest();
if('withCredentials' in xhr){
    xhr.open(fn,url,true);
}else if(typeof XDomainRequest() != 'undefined'){
    cxhr = new XDomainRequest();
    cxhr.open(fn,url);
   }
}