jsonp實現跨域訪問

時間 2019-11-08

標籤 jsonp 實現訪問欄目 JSON 简体版

原文原文鏈接

JSONP的實現思路很簡單javascript

前端建立script標記，設置src，添加到head中（你能夠往body中添加）
後臺返回一個js變量jsonp，這個jsonp就是請求後的JSON數據
回調完成後刪除script標記（還有一些清理工做如避免部分瀏覽器內存泄露等）

接口php

 
        Sjax.load( 
       
        url,  
        // 跨越請求的URL 
       
        success,   
        // 回調函數，必須定義一個形參，用於接收後臺返回的全局變量jsonp （約定後臺返回如jsonp = {...}結構） 
       
        timestamp,  
        // 傳true會加一個時間戳，防止緩存，默認不加 
       
        );

示例：html

 
        <!DOCTYPE HTML> 
       
        <html> 
       
        <head> 
       
        <meta charset= 
        "utf-8" 
        > 
       
        <title>sjax_0.1.js by snandy</title> 
       
        <script src= 
        "http://files.cnblogs.com/snandy/sjax_0.1.js" 
        ></script> 
       
        </head> 
       
        <body> 
       
        <p id= 
        "p1"  
        style= 
        "background:gold;" 
        ></p> 
       
        <input type= 
        "button"  
        value= 
        "Get Name"  
        onclick= 
        "clk()" 
        /> 
       
        <script type= 
        "text/javascript" 
        > 
       
        function  
        clk(){ 
       
        Sjax.load( 
       
        'http://files.cnblogs.com/snandy/jsonp.js' 
        , 
       
        function 
        (){ 
       
        document.getElementById( 
        'p1' 
        ).innerHTML =  
        'Hi, '  
        + jsonp.name; 
       
        } 
       
        );      
       
        } 
       
        </script> 
       
        </body> 
       
        </html>

這個html實現一個最簡單的先後臺交互功能，點擊按鈕「Get Name」，獲取到name後顯示在段落P上。前端

clk函數中調用Sjax.load方法，Sjax中的S指script。以前個人Ajax系列中使用的Ajax命名，這裏就使用了Sjax。java

請求的後臺url是jsonp.js，它返回以下數據庫

 
        jsonp = {name: 
        'jack' 
        };

由於是測試，這裏使用最簡單的方式實現。請求的後臺其實沒必要是js文件，能夠是php，java等任何後臺語言，它們可能會鏈接數據庫進行一系列的業務查詢。總之它最後返回的結構必須變量jsonp，這個變量就是一個js對象，至於有多複雜則無需關注。json

相關標籤/搜索

每日一句

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