Jsonp 跟 ajax 的一次 spike

问题的开端：

有这么一个需求，一个静态空间，里面放的都是html这样的网站。现在要给这个网站添加一些活力。要从另一个网站是得到数据并且来展示，并且要实时更新数据。这个另一个网站是PHP定的，哥有源码，可以修改并提供一些接口或者页面。

于是两个方案：

1.在PHP站上写一个 PHP脚本，并渲染出html页面，简单用ajax轮询实现（近）实时更新数据。然后在静态页面网站上修改html，使用一个iframe嵌入。

2.使用用jsonp，静态页面使用ajax轮询获取json数据，更新自身页面，PHP网站提供一个url接口。

最后迫使我使用了第2种方案的原因是，实时更新的数据有删除有增加，生成的页面的高是不定的，用iframe嵌入带来了问题的高度在html页面很难控制，并且不美观。

jsonp的简单介绍：

由于浏览器出于安全限制，我们都知道ajax跨域请求会失败。但是浏览器在引入js脚本可以实现跨域获取js数据或对象。例如<script type="text/javascript" src="http://www.xzf.com/hello.js"></script>

就是这个简单原理，如果我们需要定时去获取这个js。反应在javascript代码

//删除script代码
var scriptElt = document.getElementByTagName("script")[1];//假设为第一个
if(scriptElt !== null){
  scriptElt.parentNode.removeChild(scriptTag );
}

//添加script
document.write("<script type='text/javascript' src='http://www.xzf.com/hello.js'></script>");

对于ajax，jQuery对其有很好的facade封装，$.ajax支持一个dataType模式为jsonp跟jsonp的回调方法设置，方便我们使用。下面是例子。

PHP端：fuck.jsonp.PHP

<?PHP
echo "callback({\"content\":\"xzf is a handsome boy!\"});";

静态页面代码端：index.html

<html>
<head>
    <Meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>测试Jsonp</title>
    <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
</head>
<body>
    <p>Hello ，过一会这数据就会变了哦！</p>
</body>
     
    <script type="text/javascript" charset="utf-8">
        var handler = (function($){
            var $p = $("p");
            return {
                loadRemoteContent : function(){
                    $.ajax({
                        url : "http://xzf.com/fuck.jsonp.PHP",type : "get",dataType : "jsonp",processData : false,jsonp = "callback"
                    });
                },renderContent : function(data){
                    $p.html(data.content);
                }
            }
        }(jQuery));    
        
        setTimeOut(handler.loadRemoteContent,5000);
        
        //返送请求之后，返回数据，相当调用些方法!
        function callback(data){
            handler.renderContent(data);
        }
            
    </script>
</html>

然后根据此原理，问题就解决啦！:^)

Jsonp 跟 ajax 的一次 spike

相关文章