浏览器跨域--JSONP

最新推荐文章于 2024-07-14 23:22:23 发布

最新推荐文章于 2024-07-14 23:22:23 发布 · 102 阅读

文章标签：

#jsonp

js/jq 专栏收录该内容

9 篇文章

订阅专栏

读自：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/ 以及 jq的帮助文档
具体用户大全，请移步：http://justcoding.iteye.com/blog/1366102
模仿jsonp: http://www.biuman.com/2013/01/jsonp-example-html/
如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅最初的文章。

如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。

上一个小的案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<html>
<head>
    <title>JSONP调用</title>

    <script type="text/javascript" src="/js/jquery-1.8.3.js" ></script>

    <script type="text/javascript">
        function search() {
            $("#images").html("");
            var _content = document.getElementById("J-input").value;
            var _zhang = $("#J-zhang").val()==""?3:$("#J-zhang").val();
            console.info("_zhang="+_zhang);
            /**
             * 构建JSONP去从flickr上面搜索图片
             */
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+_content+"&tagmode=any&format=json&jsoncallback=?", function(data){
                $.each(data.items, function(i,item){
                    console.info(item.media.m);
                    $("<img/>").attr("src", item.media.m).appendTo("#images");
                    if ( i == (_zhang-1) ) return false;
                });
            });
        }
    </script>
</head>
<body>

    <h1>关于JSONP的简单调用DEMO</h1>
    <hr>

    关键字: <input type="text" id="J-input" value="科比" />
    显示几张: <input type="text" id="J-zhang" value="4" />
    <input onclick="search();" type="button" value="search" />
    <div id="images"></div>

</body>


</html>