Jsonp 跟 ajax 的一次 spike

时间 2019-12-05

标签 jsonp ajax 一次 spike 栏目 JSON 繁體版

原文原文链接

问题的开端： javascript

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

因而两个方案： html

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

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

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

jsonp的简单介绍： json

因为浏览器出于安全限制，咱们都知道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>

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