快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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 的协议名、域名 或者 端口号与当前域名不一样

Ajax  跨域请求-- Cross Domain

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




    
    


非跨域请求

非跨域按钮

跨域请求

跨域按钮

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

Ajax  跨域请求-- Cross Domain

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

Ajax  跨域请求-- Cross Domain

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

Ajax  跨域请求-- Cross Domain

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

Ajax  跨域请求-- Cross Domain

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

Ajax  跨域请求-- Cross Domain


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

允许

允许

允许

允许

PHP代码:

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

echo json_encode($data);

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

Ajax  跨域请求-- Cross Domain

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

Ajax  跨域请求-- Cross Domain

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

PHP代码:

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

echo json_encode($data);

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

Ajax  跨域请求-- Cross Domain

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  跨域请求-- Cross Domain

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

把上面的代码稍作修改:

HTML代码:




    
    


跨域按钮




PHP代码:

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

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

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

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

Ajax  跨域请求-- Cross Domain

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

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


文章题目:Ajax跨域请求--CrossDomain
网页链接:
http://6mz.cn/article/iggdps.html

其他资讯