jsonp跨域实现

标签：

原理：借助script可以跨域的思想，将跨域请求放在script中，当页面解析到改script标签时，就会向该src指向的地址发出一个请求，达到跨域请求的目的。

服务器端配合处理：在前端传入事件处理函数如url?callback=fun，后台获取这个callback参数，通过字符串拼接，组合成函数调用的形式，将数据也拼接进去，构造js代码，返回给前端的script标签，在前端script标签会自动执行返回的代码。（因为后台没法直接执行函数调用），所以是在后台返回一个拼接的调用形式，返回给前端，script标签会自动执行，从而实现跨域。

demo：

<script>
    function handlerData(data){ alert(‘获取到数据‘);
        console.log(data);  
    }
</script>
<script src=‘http://webgis.ecnu.edu.cn/beta/cross.php?callback=handlerData‘></script>

服务器端：

<?php
$callback = $_GET[‘callback‘];
$data =‘["hello","world"]‘;
echo $callback."(".$data.")";   //拼接字符串
?>

结果如下

技术分享

这种方法实现的话，每个请求都要重新生成数据，可以采用动态生成脚本的方式，将数据放到脚本中，脚本中存放数据

优缺点：

使用JSON的优点在于：

比XML轻了很多，没有那么多冗余的东西。
JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
在JavaScript中处理JSON很简单。
其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

jsonp跨域实现

标签：

原文地址：http://www.cnblogs.com/lydialee/p/4868393.html