探索ajax跨域请�

序

Ajax，用苍白的文字赞美：很好。

我们可以利用ajax实现异步数据采集，减少服务器操作时间，大大提升用户体验。我们可以使用ajax将小系统和大系统结合起来。我们还可以使用ajax来优化前端。(多好的排比啊)

虽然ajax非常好，但是它的使用有一些限制。出于安全原因，不允许跨域通信。如果您尝试从不同的域请求数据，将会出现安全错误。(下面的示例1可以直观地看到)

相应的政策限制

同源策略防止加载在一个域上的脚本获取或操作另一个域上的文档属性。也就是说，请求的网址的域必须与当前网页的域相同。这意味着浏览器隔离不同来源的内容，以防止它们之间的操作。这种浏览器策略非常古老，从Netscape Navigator版本开始就存在了。3354摘自developerWorks所谓同源，就是域名、协议、端口相同。

平地上的轰鸣声。

本文解释了如何使用ajax实现跨域请求，因此了解“同源策略”可以解决很多问题：“我无法为我的ajax加载数据！”"毛浏览器控制台会报错我的漂亮代码！"

示例1首先，演示一个错误。

客户端代码：

复制的代码如下：script //客户端请求脚本$。getJSON(' http://172 . 22 . 22 . 120/new/Ajax . PHP '，函数(JSON) {alert (json .网站)在另一台机器上使用getJSON方法；});/script

服务器PHP脚本代码：

复制代码如下：PHP//ajax.php头(' Content-type : application/JSON ')；

echo json_encode(array('网站'=' HCO ding '))；

firefox下的错误提示：

根据同源策略的概念，localhost和172.22.22.120来自不同的域名，因此跨域请求自然会被浏览器拒绝。

JSONP

JSONP(带有Padding的JSON)是数据格式JSON的一种“使用模式”，它允许网页向其他域请求数据。解决这个问题的另一个新方法是跨资源共享。一般来说，由于同源策略，除了HTML脚本元素，位于server1.example.com的网页无法与server1.example.com以外的服务器进行通信。有了脚本元素的这种开放策略，网页就可以获得其他来源动态生成的JSON数据，这种使用模式叫做JSONP。JSONP捕获的数据不是JSON，而是任意的JavaScript，由JavaScript文字翻译器执行，而不是JSON解析器。如何从维基百科理解3354！我个人认为，使用脚本跨域请求数据，跨域的服务器返回一段JavaScript代码。是的，你没看错。它不是json格式的数据，而是JavaScript代码，所以这段代码由JavaScript文字翻译器执行。上面的例子更直观：

示例2客户端代码：

复制的代码如下：script //这是回调方法functioncb (data) {alert (data .网站)；}/脚本！-这是跨域请求的代码，记住，这段代码应该是在回调函数之后-script src=' http :http://172 . 22 . 22 . 120/new/Ajax _ jsonp.php？回调=CB '/脚本

服务器PHP脚本代码：

复制代码如下：php $cb=htmlspecialchars($_GET['回调'])；//注意，这里要做好过滤，防止xss攻击Echo $ CB，' ('，JSON _ encode (array('网站'=' h coding ')，')'；//返回给客户端的数据是cb({'name':'hcoding'})。这是js代码吗？

浏览器会怎么样，我当然不会说，cb方法叫：

因此，我们来谈谈jsonp的概念，跨域服务器将json数据与回调函数一起返回给客户端，因为脚本不受同源策略的限制。

JSONP的JQuery支持。

本文将讨论ajax跨域请求，之前已经说了很多，所以我们当然会讨论下面的主题。

从1.2版本开始，jQuery对JSONP回调有本地支持。如果指定了JSONP回调，就可以在另一个域中加载JSON数据。回调的语法是：url？回调=？JQuery会自动？替换为要调用的生成函数的名称。

示例3: $。getjson方法跨域请求示例4: $。Ajax方法自定义回调方法示例3客户端代码：

复制的代码如下：script //客户端使用getJSON方法在另一台机器上请求脚本。//浏览器将生成一个随机回调参数$。getjson(' http://172 . 22 . 22 . 120/new/Ajax _ jsonp.php？回调=？”，函数(json){ alert(json .网站)；});/script

服务器PHP脚本代码：

复制代码如下：php $cb=htmlspecialchars($_GET['回调'])；//注意，这里要做好过滤，防止xss攻击Echo $ CB，' ('，JSON _ encode (array('网站'=' h coding ')，')'；//返回客户端的数据，是一段js代码？

$.getJSON很容易使用，但是它就是不能指定回调函数。

示例4客户端代码：

复制代码如下：script $。Ajax ({type:' get '，URL 3360 ' http://172 . 22 . 22 . 120/new/Ajax _ JSONP . PHP '，datatype 3360' jsonp '，//数据格式指定为JSONP JSONP :' callback '。//服务点通过这个键值获取回调方法JSONP回调3360‘CB’。//指定回调方法成功：函数(json){ }，})；//回调方法functioncb (data) {alert (data .网站)；}/脚本

服务器PHP脚本代码与示例3中的相同。

摘要

以安全为出发点，遵循相应的策略，是一种良好的品德。但是我们也有跨域的请求，jsonp可以满足我们的需求。当然，对于跨域请求有很多方法，不仅仅是jsonp。

以上就是本文的全部内容，希望大家喜欢。