如何理解ajax跨域请求

本篇内容介绍了"如何理解ajax跨域请求"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 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的相同。

"如何理解ajax跨域请求"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！