探秘ajax跨域请求

前言

ajax,用苍白的话赞扬:很好。

我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验;我们可以使用ajax实现小系统组合大系统;我们还可以使用ajax实现前端的优化。(好一个排比)

虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。(下面例子1可以直观看出)

同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。——摘自developerWorks
所谓同源是指,域名,协议,端口相同。

平地一声吼

本文讲解的是怎么利用ajax实现跨域请求,那么知道“同源策略”,就可以解决很多疑问:“为毛我的ajax加载不了数据!”“为毛浏览器控制台会对我如此漂亮的代码报错!”

例子1
先上一个错误示范

客户端代码:

复制代码 代码如下:
<script>
    // 客户端使用getJSON方法请求另一台机子上的脚本
    $.getJSON("http://172.22.22.120/new/ajax.php",function(json){
        alert(json.website);
    });
</script>

服务端PHP脚本代码:

复制代码 代码如下:
<?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 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。——摘自维基百科
这话该怎么理解呢!我个人是这样认为的,用<script>跨域的请求数据,跨域的服务器返回一段【JavaScript代码】,是 的,你没看错,不是json格式数据,是JavaScript代码,这样,这段代码就由JavaScript 直译器执行。上例子更直观:

例子2
客户端代码:

复制代码 代码如下:
<script>
    // 这是回调方法
    function cb(data){
        alert(data.website);
    }
</script>
<!--这是跨域请求的代码,切记,这段代码要在回调函数之后-->
<script src="http://172.22.22.120/new/ajax_jsonp.php?callback=cb"></script>

服务端PHP脚本代码:

复制代码 代码如下:
<?php
    $cb = htmlspecialchars($_GET['callback']);  // 注意了,这里要做好过滤,防止xss攻击
    echo $cb,'(',json_encode(array('website'=>'hcoding')),')';  // 返回客户端的数据为:cb({"name":"hcoding"})  这是一段js代码
?>

浏览器会发生什么事呢,我就不说了,当然是cb方法被调用啦:

所以,再说jsonp的概念,利用<script>不受同源策略的限制,跨域的服务器把要返回的json数据作为参数和回调函数一起返回客户端。

JQuery对JSONP的支持

本文要讲ajax的跨域请求,前面说了那么多,下面当然要讲主题啦。

从 1.2 版本开始,jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调,就可以加载位于另一个域的 JSON 数据,回调的语法为:url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。

例子3:$.getJSON方法跨域请求
例子4:$.ajax方法自定义回调方法
例子3
客户端代码:

复制代码 代码如下:
<script>
    // 客户端使用getJSON方法请求另一台机子上的脚本
    // 浏览器会生成一个随机的callback参数
    $.getJSON("http://172.22.22.120/new/ajax_jsonp.php?callback=?",function(json){
        alert(json.website);
    });
</script>

服务端PHP脚本代码:

复制代码 代码如下:
<?php
    $cb = htmlspecialchars($_GET['callback']);  // 注意了,这里要做好过滤,防止xss攻击
    echo $cb,'(',json_encode(array('website'=>'hcoding')),')';  // 返回客户端的数据,这是一段js代码
?>

$.getJSON简单易用,但就是不能指定回调函数。

例子4
客户端代码:

复制代码 代码如下:
<script>
    $.ajax({
        type : "GET",
        url : "http://172.22.22.120/new/ajax_jsonp.php",
        dataType : "jsonp",    // 数据格式指定为jsonp
        jsonp: "callback",     // 服务点通过这个键值获取回调方法
        jsonpCallback:"cb",   // 指定回调方法
        success : function(json){
        },
    }); 
    // 回调方法
    function cb(data){
        alert(data.website);
    }
</script>

服务端PHP脚本代码和例子3的相同。

总结

正所谓无规矩不成方圆,以安全为出发点,遵循同源策略是一个好品德。但我们也有跨域请求的需求,jsonp就能满足我们的需求。当然跨域请求还有很多的方法,不单止jsonp。

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-11-14 12:06:58

探秘ajax跨域请求的相关文章

探秘ajax跨域请求_AJAX相关

前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.(好一个排比) 虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.(下面例子1可以直观看出) 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面

AJAX跨域请求之JSONP获取JSON数据_AJAX相关

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

服务端配置实现AJAX跨域请求_AJAX相关

一直以为AJAX跨域是无法逾越的鸿沟,最近发现原来在服务端可以通过发送header信息来允许AJAX跨域请求. PHP代码示例: 复制代码 代码如下: header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Headers:X-Requested-With'); 经过测试,webkit内核的浏览器成功实现跨域请求. IE一如既往的不支持~看来只能在移动端享用这一强大功能了 另外,需要注意的是,第一行配置中的*表示

ajax跨域请求学习笔记

原文:ajax跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.(好一个排比) 虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.(下面例子1可以直观看出) 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 UR

大数据量-ajax跨域请求较大数据

问题描述 ajax跨域请求较大数据 请求一个url返回数据量较大(约10M),格式是一个二维数组[[123][xxx]...]由于存在跨域问题,所以去servlet中发起请求,然而再返回前台时浏览器卡死了.那么怎么直接在ajax中去跨域请求这个地址并接收返回的数据?或者怎样在后台中接收返回前台但不会造成浏览器挂掉? 我在后端用httpclient去请求有问题. 解决方案 ajax跨域请求数据 解决方案二: 应该不是数据的问题,是你使用数据的代码有问题..10m数据要生成dom肯定比较耗时,如果是

如果要用ajax跨域请求服务器数据,服务器是否要设置支持跨域

问题描述 如果要用ajax跨域请求服务器数据,服务器是否要设置支持跨域 如果要用ajax跨域请求服务器数据,服务器是否要设置支持跨域? 解决方案 是的,如果是跨域请求的话,服务器返回Json数据的格式也是不同的. 所以服务器也是需要支持跨域的. 如:服务器返回普通Json格式为(不跨域) { "code": "0", "content": "我是返回内容" } 那么Jsonp的返回格式则是(跨域) callback({ &qu

基于iframe实现ajax跨域请求 获取网页中ajax数据_AJAX相关

大家都知道,在不同域的情况下是不能发送ajax请求的,浏览器会报如下错误: 同时,内嵌的iframe中无法进行跨域通信的,也就是说不同域的iframe是无法互相读取数据的(当然利用hash变化可以从父window传入数据到子iframe,不过并没有什么意义).iframe跨域通信时,浏览器会报如下错误: 其实这两个问题都是由于跨域造成的. 下面就介绍如何解决这个问题. 其实问题的关键就在于,浏览器在解析ajax请求地址时会和当前网页的地址进行比较,如果是跨域的,那就禁止掉并且报错.那么我们如果让

深入浅析Nginx实现AJAX跨域请求问题_AJAX相关

AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Ac

Nginx服务器中处理AJAX跨域请求的配置方法讲解_nginx

Nginx 实现AJAX跨域请求AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true'