jsonp跨域实现

Original 2016-11-12 14:18:25 930
abstract:原理:借助script可以跨域的思想,将跨域请求放在script中,当页面解析到改script标签时,就会向该src指向的地址发出一个请求,达到跨域请求的目的。两点:(1)主要是利用了 <script/>标签的跨域性 (2)script标签对javascript文档的动态解析来实现服务器端配合处理: 在前端传入事件处理函数如url?callback=fun,后台获取这个cal

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

两点:

(1)主要是利用了 <script/>标签的跨域性 

(2)script标签对javascript文档的动态解析来实现

服务器端配合处理: 在前端传入事件处理函数如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.")";   //拼接字符串   或者 "try" $callback."($data)". "catch(e){}"
?>

结果如下

 604652-20151010213408034-2119097564.png

  这种方法实现的话,每个请求都要重新生成数据,可以采用动态生成脚本的方式,将数据放到脚本中,脚本中存放数据,向客户端返回一个js

缺点:返回的函数执行出错时,没有错误提示,只能看控制台下的报错信息。

优缺点:

使用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 服务,了解它能造成的威胁非常重要。


Release Notes

Popular Entries