Ajax跨域请求--CrossDomain

在认识 跨域 之前，先简单了解下域名和协议名，比如下面这个 URL

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业成都移动服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

http://mail.163.com/index.html

http://              协议名，也就是HTTP超文本传输协议

mail                  服务器名

163.com           域名

mail.163.com    网站名

/                        根目录

index.html         根目录下的默认网页

1、什么是跨域请求？

请求的下一个资源所在的 协议、域名、端口号三者之一与当前资源不一致就称为 跨域请求

简单理解，就是 $.get(url, [data], [callback], [type]) 里面的 url 的协议名、域名 或者 端口号与当前域名不一样

为了避免晦涩难懂的文字，我们直接上一个小 demo：

    
    


非跨域请求
非跨域按钮

跨域请求
跨域按钮

在浏览器地址栏输入“http://localhost:8081/Ajax/cross.html”打开页面，点击“非跨域按钮”，查看控制台

点击“跨域按钮”，查看控制台，发现 XHR请求失败了，很明显，请求的域名不同，这就是典型的跨域

查看 Network，XHR请求发起了，而且状态码是200

查看请求头部消息，显示有 24 字节的响应消息

查看响应消息，却显示“这个请求没有可用的响应消息”

2、浏览器允许 跨域请求吗？

允许：

允许：

允许：

允许：

PHP代码：

'Tom','age'=>20];

echo json_encode($data);

点击“非跨域按钮“，可以正常发起 Ajax 请求

点击“跨域按钮”，报错了，说明这个属于 跨域

按照控制台给出的提示，我们在 php 页面中设置 Access-Control-Allow-Origin 头部

PHP代码：

'Tom','age'=>20];

echo json_encode($data);

看到 btn2，真是太难得了，这个也就说明 设置 Access-Control-Allow-Origin 头部 是可以解决跨域的

3-2、使用 JSONP

基于3-1的示例代码，我们再来看一个例子：

HTML代码：

    
    


跨域按钮

PHP代码：

'Tom','age'=>20];

$json =  json_encode($data);  //返回一个json{"":"","":20}'

echo 'doResponse('.$json.')';

通过浏览器输入“http://localhost:8081/Ajax/jsonp01.html”打开网页，这是一个典型的跨域请求，这里可以使用JSONP手段来解决

在$.ajax 方法中有一个 dataType属性，如果将该属性设置成 dataType:"jsonp"，就能实现跨域

把上面的代码稍作修改：

HTML代码：

    
    


跨域按钮

PHP代码：

'Tom','age'=>20];

$json =  json_encode($data);  //'{"":"","":20}'

echo 'doResponse('.$json.')';

重新打开页面，可以拿到数据了

如果想更深入的了解 JSONP 原理，可以查看另一篇文章 《详解 JSON 和 JSONP》

http://dapengtalk.blog.51cto.com/11549574/1877684