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>

而後根據此原理，問題就解決啦！:^)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。