快捷導(dǎo)航

通過(guò)jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請(qǐng)求

更新時(shí)間：2017年01月22日 15:33:34 作者：readyGo

JSON 可通過(guò) JavaScript 進(jìn)行解析，JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸，這篇文章主要介紹了通過(guò)jsonp獲取json數(shù)據(jù)（實(shí)現(xiàn)AJAX跨域請(qǐng)求），有興趣的可以了解一下。

AJAX（異步的 JavaScript 和 XML）是用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的一種技術(shù)，它在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)，ajax 使用XMLHttpRequest對(duì)象在后臺(tái)與服務(wù)器交換數(shù)據(jù)，XMLHttpRequest 是 AJAX 的基礎(chǔ)，它允許客戶(hù)端 JavaScript 通過(guò) HTTP請(qǐng)求連接到遠(yuǎn)程服務(wù)器。

但是，由于受到瀏覽器的限制，這種方法不可以進(jìn)行跨域訪問(wèn)，如果使用這種方法進(jìn)行跨域訪問(wèn)則會(huì)出現(xiàn)安全問(wèn)題。不過(guò)，我們可以發(fā)現(xiàn)，在web頁(yè)面跨域調(diào)用 js文件時(shí)，不會(huì)受到瀏覽器的限制，所以我們可以利用將遠(yuǎn)程服務(wù)器端的數(shù)據(jù)裝入js格式的文件，然后再用來(lái)供客戶(hù)端進(jìn)行調(diào)用。

JSON（JavaScript 對(duì)象表示法）是一種輕量級(jí)的文本數(shù)據(jù)交換格式，它具有自我描述性，易于理解。JSON 可通過(guò) JavaScript 進(jìn)行解析，JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸。

JSON實(shí)例：

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

JSON 語(yǔ)法是 JavaScript 對(duì)象表示法語(yǔ)法的子集:

數(shù)據(jù)在名稱(chēng)/值對(duì)中, 數(shù)據(jù)由逗號(hào)分隔 ,花括號(hào)保存對(duì)象, 方括號(hào)保存數(shù)組。

JSON的特性

純文本，易于跨平臺(tái)傳遞
Javascript原生支持，后臺(tái)語(yǔ)言幾乎全部支持
使用輕量級(jí)的文本數(shù)據(jù)交換格式，適合在互聯(lián)網(wǎng)中傳遞
比 XML 更小、更快，更易解析。

基于JSON的這些特性，可以通過(guò)使服務(wù)器動(dòng)態(tài)生成JSON文件，然后將客戶(hù)端需要的數(shù)據(jù)裝入這個(gè)文件，再將該文件調(diào)回客戶(hù)端供客戶(hù)端使用。為了便于客戶(hù)端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶(hù)傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)裝入JSON數(shù)據(jù)，這樣客戶(hù)端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了。

如何使用JSONP

一種簡(jiǎn)單的方式就是使用jQuery來(lái)實(shí)現(xiàn)：

<!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",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
    jsonpCallback:"message",//自定義的jsonp回調(diào)函數(shù)名稱(chēng)，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫(xiě)"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
    success: function(json){
     alert('你的名字：' + json.name + ' 年齡： ' + json.age);
     
    },
    error: function(){
     alert('fail');
    }
   });
 
  });
  </script>
</head>
<body>

</body>
</html>

type：請(qǐng)求類(lèi)型，GET 或 POST,默認(rèn)為 GET；
async:true（異步）或 false（同步）,默認(rèn)情況下為true,同步請(qǐng)求將鎖住瀏覽器，用戶(hù)其它操作必須等待請(qǐng)求完成才可以執(zhí)行;
url:發(fā)送請(qǐng)求的地址(跨域請(qǐng)求時(shí)應(yīng)為絕對(duì)地址);
dataType:指定服務(wù)器返回的數(shù)據(jù)類(lèi)型;
jsonpCallback:自定義JSONP回調(diào)函數(shù)名稱(chēng);
success:請(qǐng)求成功后回調(diào)函數(shù);
error:請(qǐng)求失敗時(shí)調(diào)用此方法。