jsonp

普通的ajax请求只能进行同域的数据交互，但是一旦有跨域的情况就不行了。但是jsonp不同，他可以利用浏览器标签达到跨域的目的。

其实 jsonp 是个很简单的一个东西。主要是利用了 <script/> 标签对 javascript 文档的动态解析。

Script 标签本身的功能就是异步加载js并且会以js的方式解析执行。一旦在script的标签里加入src的属性，浏览器执行到这个标签时就回去请求指定的地址，如果服务器返回的是js格式的代码，甚至可以是js的函数，只要是能被js解析的，都可以被执行，这也就是jsonp的原理。

 

简单使用jsonp的demo：

1、  最简单的形式

demo:http://xiziyin.appspot.com/demo/jsonp.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gbk"/>
    <title></title>
</head>
<body>
<div id="content">
    
</div>

</body>
<script type="text/javascript">
    var load = function(message){
        document.getElementById("content").innerHTML=message;
    }
</script>
<script type="text/javascript" src="jsonpContent.html?callback=load"></script>
</html>

 

这是最基本的jsonp的原理

2、使用框架

demo:http://xiziyin.appspot.com/demo/getscript.html

 

以http://xiziyin.appspot.com/demo/jsonpContent.jsp

这个链接为例，在url后面带上参数callback=AjaxListLoader.reload

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gbk"/>
    <title></title>
    <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader-dom-event/yuiloader-dom-event.js"></script>
</head>
<body>
<div id="console"></div>
<script>
    var url = "http://xiziyin.appspot.com/demo/jsonpContent.jsp";

    var AjaxLoader = function() {
        var loader = function() {
            YAHOO.util.Get.script(url + '?callback=AjaxLoader.reload', {
                onSuccess: function() {
                },
                onFailure: function() {
                    YAHOO.util.Dom.get("console").innerHTML = '请求失败';
                },
                timeout: 10000,
                autopurge: true,
                charset: 'GBK'
            });
        };

        return{
            init: function () {
                loader();
                YAHOO.util.Dom.get("console").innerHTML = '开始请求';

            },
            
            reload:function() {
                YAHOO.util.Dom.get("console").innerHTML = '请求成功，调用成功';
            }
        };
    }();

    AjaxLoader.init();


</script>
</body>

</html>

 

 

 

通过yui的get.script()去触发url，代替了原本的script标签。将返回的数据填充到页面来展示。
结果：

通过yui的get.script()去触发url，代替了原本的script标签。将返回的数据填充到页面来展示。

 

结果：

请求成功，调用成功

posted @ 2010-06-21 20:56  雪霁霜飞  阅读(456)  评论(0)    收藏  举报