經過jsonp獲取json數據--實現AJAX跨域請求

時間 2019-12-07

標籤經過 jsonp 獲取 json 數據實現 ajax 請求欄目 JSON 简体版

原文原文鏈接

AJAX（異步的 JavaScript 和 XML）是用於建立快速動態網頁的一種技術，它在不從新加載整個頁面的狀況下，與服務器交換數據並更新部分網頁，ajax 使用XMLHttpRequest對象在後臺與服務器交換數據，XMLHttpRequest 是 AJAX 的基礎，它容許客戶端 JavaScript 經過 HTTP請求鏈接到遠程服務器。
可是，因爲受到瀏覽器的限制，這種方法不能夠進行跨域訪問，若是使用這種方法進行跨域訪問則會出現安全問題。不過，咱們能夠發現，在web頁面跨域調用 js文件時，不會受到瀏覽器的限制，因此咱們能夠利用將遠程服務器端的數據裝入js格式的文件，而後再用來供客戶端進行調用。
JSON（JavaScript 對象表示法）是一種輕量級的文本數據交換格式，它具備自我描述性，易於理解。JSON 可經過 JavaScript 進行解析，JSON 數據可以使用 AJAX 進行傳輸。javascript

JSON實例：php

{
    "employees": [
    { "firstName":"Bill" , "lastName":"Gates" },
    { "firstName":"George" , "lastName":"Bush" },
    { "firstName":"Thomas" , "lastName":"Carter" }
    ]
    }

JSON 語法是 JavaScript 對象表示法語法的子集:
數據在名稱/值對中, 數據由逗號分隔 ,花括號保存對象, 方括號保存數組。
JSON的特性html

純文本，易於跨平臺傳遞java
Javascript原生支持，後臺語言幾乎所有支持jquery
使用輕量級的文本數據交換格式，適合在互聯網中傳遞web
比 XML 更小、更快，更易解析。ajax

基於JSON的這些特性，能夠經過使服務器動態生成JSON文件，而後將客戶端須要的數據裝入這個文件，再將該文件調回客戶端供客戶端使用。爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來裝入JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。json

如何使用JSONP

一種簡單的方式就是使用jQuery來實現：跨域

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>test</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){ 
         
        $.ajax({
             type: "get",
             async: false,
             url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
             dataType: "jsonp",
             jsonp: "callback",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)
             jsonpCallback:"message",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
             success: function(json){
                 alert('你的名字：' + json.name + '  年齡： ' + json.age);
                 
             },
             error: function(){
                 alert('fail');
             }
         });
   
     });
     </script>
</head>
<body>

</body>
</html>

type：請求類型，GET 或 POST,默認爲 GET；
async:true（異步）或 false（同步）,默認狀況下爲true,同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行;
url:發送請求的地址(跨域請求時應爲絕對地址);
dataType:指定服務器返回的數據類型;
jsonpCallback:自定義JSONP回調函數名稱;
success:請求成功後回調函數;
error:請求失敗時調用此方法。數組

運行結果：