pg电子娱乐官方网站

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 722字
更新時間： 2020-11-28 16:21:47

3.9 跨域的AJAX-JSONP

默認情況下，瀏覽器不允許AJAX進行跨域訪問，這主要是出于安全方面的考慮。事實上，開發人員存在很多跨域訪問服務器的需求，該怎么辦呢？JSONP技術就是其中一種常見的AJAX跨域訪問的解決方案。

JSONP（JSON with Padding）是資料格式JSON（JavaScript Object Notation）的一種“使用模式”，可以讓網頁從別的網域獲取資料。JSONP是一個非官方協議，允許服務器端與客戶端之間實現跨域訪問。JSONP也是一種典型的面向數據結構的分析和設計方法，以活動為中心，一連串活動的順序組合成一個完整的工作進程。

之所以會有跨域這個問題，根本原因是瀏覽器的同源策略限制。簡單理解同源策略，指的是阻止代碼獲得或者更改從另一個域名下獲得的文件或信息。解決這個限制的一個相對簡單的辦法是讓服務器端作為中介發送請求，或者使用框架（Frames）的形式引入腳本文件。但是，這些解決方案都不夠靈活。

有一個很巧妙的辦法是在頁面中使用動態代碼元素，這些動態代碼的源指向目標服務地址，并在自己的代碼中加載數據。當這些代碼加載執行時，同源策略就不會限制。一般來說，這些數據的加載格式是JSON。

通過使自定義函數加載動態JSON數據從而處理動態數據，這項技術叫做Dynamic JavaScript Insertion。

【示例3-11】jq_dyjs.html

        01    <html>
        02         <head>
        03             <title>動態JavaScript調用</title>
        04               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        05               <script type="text/javascript">
        06                 function showAge(data){                   //自定義函數
        07                          alert("Name:" + data.name + ", Age:" + data.age);
                                                                  //展示信息數據
        08                    }
        09                 var url = "jquery/info.js";               //外部的URL地址
        10                    var script = document.createElement('script');
                                                                  //動態創建腳本標簽
        11                 script.setAttribute('src', url);        //設置腳本的路徑
        12                 //加載腳本
        13
         document.getElementsByTagName('head')[0].appendChild(script);
        14               </script>
        15         </head>
        16         <body style="text-align:center">
        17         </body>
        18    </html>

動態JavaScript調用外部URL腳本的代碼如下：

        //info.js中的代碼
        var data = {name:'Mike', age:20};                 //定義一條數據
        showAge(data);                               //回調函數

本示例的效果如圖3.12所示。

圖3.12 動態JavaScript調用

在本網頁里，定義一個需要的函數，然后只需要把外部URL的腳本寫上數據已經動態回調，就可以實現跨域的訪問了，這也被稱為動態代碼調用。JSONP的根本原理也是這樣，只不過它處理得更優雅一些，而且從jQery1.2以后開始支持JSONP的調用。

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.9 跨域的AJAX-JSONP

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）