Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > ajax

探秘ajax跨域请求

来源:中文源码网    浏览:307 次    日期:2024-04-28 21:08:14
【下载文档:  探秘ajax跨域请求.txt 】


探秘ajax跨域请求
前言
ajax,用苍白的话赞扬:很好。
我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验;我们可以使用ajax实现小系统组合大系统;我们还可以使用ajax实现前端的优化。(好一个排比)
虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。(下面例子1可以直观看出)
同源策略限制
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。――摘自developerWorks
所谓同源是指,域名,协议,端口相同。
平地一声吼
本文讲解的是怎么利用ajax实现跨域请求,那么知道“同源策略”,就可以解决很多疑问:“为毛我的ajax加载不了数据!”“为毛浏览器控制台会对我如此漂亮的代码报错!”
例子1
先上一个错误示范
客户端代码:
复制代码 代码如下:

服务端PHP脚本代码:
复制代码 代码如下:
// ajax.php
header('Content-type: application/json');
echo json_encode(array('website'=>'hcoding'));
?>
firefox下的错误提示:
根据同源策略的概念,localhost和172.22.22.120是出于不同的域名下的,所以跨域请求理所当然地被浏览器拒绝了。
JSONP
JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 HTML 的


服务端PHP脚本代码:
复制代码 代码如下:
$cb = htmlspecialchars($_GET['callback']); // 注意了,这里要做好过滤,防止xss攻击
echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客户端的数据为:cb({"name":"hcoding"}) 这是一段js代码
?>
浏览器会发生什么事呢,我就不说了,当然是cb方法被调用啦:
所以,再说jsonp的概念,利用
服务端PHP脚本代码:
复制代码 代码如下:
$cb = htmlspecialchars($_GET['callback']); // 注意了,这里要做好过滤,防止xss攻击
echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客户端的数据,这是一段js代码
?>
$.getJSON简单易用,但就是不能指定回调函数。
例子4
客户端代码:
复制代码 代码如下:

服务端PHP脚本代码和例子3的相同。
总结
正所谓无规矩不成方圆,以安全为出发点,遵循同源策略是一个好品德。但我们也有跨域请求的需求,jsonp就能满足我们的需求。当然跨域请求还有很多的方法,不单止jsonp。
以上所述就是本文的全部内容了,希望大家能够喜欢。

相关内容