Json和Jsonp理論實例代碼詳解
什么是Json?
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON采用
完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語言。易于人
閱讀和編寫，同時也易于機器解析和生成。
JSON有兩種結構：
json簡單說就是javascript中的對象和數(shù)組，所以這兩種結構就是對象和數(shù)組2種結構，通過這兩種結構可以表示各種復雜的結構
1、對象：對象在js中表示為“{}”擴起來的內(nèi)容，數(shù)據(jù)結構為 {key：value,key：value,...}的鍵值對的結構，在面向對象的語言中，key為對象的屬性，value為對應的屬性值，所以很容易理解，取值方法為 對象.key 獲取屬性值，這個屬性值的類型可以是 數(shù)字、字符串、數(shù)組、對象幾種。
2、數(shù)組：數(shù)組在js中是中括號“[]”擴起來的內(nèi)容，數(shù)據(jù)結構為 ["java","javascript","vb",...]，取值方式和所有語言中一樣，使用索引獲取，字段值的類型可以是 數(shù)字、字符串、數(shù)組、對象幾種。
經(jīng)過對象、數(shù)組2種結構就可以組合成復雜的數(shù)據(jù)結構了。
JSON的格式或者叫規(guī)則：
JSON能夠以非常簡單的方式來描述數(shù)據(jù)結構，XML能做的它都能做，因此在跨平臺方面兩者完全不分伯仲。
1、JSON只有兩種數(shù)據(jù)類型描述符，大括號{}和方括號[]，其余英文冒號:是映射符，英文逗號,是分隔符，英文雙引號""是定義符。
2、大括號{}用來描述一組“不同類型的無序鍵值對集合”（每個鍵值對可以理解為OOP的屬性描述），方括號[]用來描述一組“相同類型的有序數(shù)據(jù)集合”（可對應OOP的數(shù)組）。
3、上述兩種集合中若有多個子項，則通過英文逗號,進行分隔。
4、鍵值對以英文冒號:進行分隔，并且建議鍵名都加上英文雙引號""，以便于不同語言的解析。
5、JSON內(nèi)部常用數(shù)據(jù)類型無非就是字符串、數(shù)字、布爾、日期、null 這么幾個，字符串必須用雙引號引起來，其余的都不用，日期類型比較特殊，這里就不展開講述了，只是建議如果客戶端沒有按日期排序功能需求的話，那么把日期時間直接作為字符串傳遞就好，可以省去很多麻煩。
JSON實例
// 描述一個人
var Person = {
"Name": "aehyok",
"Age": 25,
"Company": "aehyok",
"Engineer": true
}
//獲取這個人的信息
var PersonAge = Person.Age;
alert(PersonAge);
//描述幾個人
var members = [
{
"Name": "aehyok",
"Age": 25,
"Company": "aehyok",
"Engineer": true
},
{
"Name": "lqm",
"Age": 25,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "thl",
"Age": 22,
"Company": "Microsoft",
"Engineer": false
}
]
// 讀取其中l(wèi)qm的公司名稱
var lqmCompany = members[1].Company;
alert(lqmCompany);
// 描述一次會議
var conference = {
"Conference": "Future Marketing",
"Date": "2013-5-22",
"Address": "ShenZhen",
"Members":
[
{
"Name": "aehyok",
"Age": 25,
"Company": "IBM",
"Engineer": true
},
{
"Name": "lqm",
"Age": 25,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Thl",
"Age": 20,
"Company": "Microsoft",
"Engineer": false
}
]
}
// 讀取參會者Thl是否工程師
var ThlIsAnEngineer = conference.Members[2].Engineer;
alert(ThlIsAnEngineer);
什么是Jsonp
1、一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態(tài)頁面、動態(tài)網(wǎng)頁、web服務、WCF，只要是跨域請求，一律不準；
2、不過我們又發(fā)現(xiàn)，Web頁面上調(diào)用js文件時則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有"src"這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；
3、于是可以判斷，當前階段如果想通過純web端（ActiveX控件、服務端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數(shù)據(jù)就只有一種可能，那就是在遠程服務器上設法把數(shù)據(jù)裝進js格式的文件里，供客戶端調(diào)用和進一步處理；
4、恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡潔的描述復雜數(shù)據(jù)，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)；
5、這樣子解決方案就呼之欲出了，web客戶端通過與調(diào)用腳本一模一樣的方式，來調(diào)用跨域服務器上動態(tài)生成的js格式文件（一般以JSON為后綴），顯而易見，服務器之所以要動態(tài)生成JSON文件，目的就在于把客戶端需要的數(shù)據(jù)裝入進去。
6、客戶端在對JSON文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進行處理和展現(xiàn)了，這種獲取遠程數(shù)據(jù)的方式看起來非常像AJAX，但其實并不一樣。
7、為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個要點就是允許用戶傳遞一個callback參數(shù)給服務端，然后服務端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)了。
如果對于callback參數(shù)如何使用還有些模糊的話，我們后面會有具體的實例來講解。
Jsonp的客戶端具體實現(xiàn)：
1.先來個最簡單的一個。首先我在IIS中建立了兩個網(wǎng)站，當然端口一個是888另外一個是8888，我們就把888作為本地服務器，8888作為遠程服務器的。
現(xiàn)在本地有這樣一個網(wǎng)頁
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
</head>
<body></body>
</html>
其中JavaScript文件引用的是8888的remote.js文件。
alert('我是遠程文件');
運行本地服務器網(wǎng)站后效果為
現(xiàn)在最簡單的跨域成功了。
2.我們在1的基礎上進行修改一下，先看代碼
<html>
<head>
<title>index.html</title>
<script type="text/javascript">
function aehyok(data)
{
alert(data.result);
}
</script>
<script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
</head>
<body></body>
</html>
先將本地文件中添加一個js函數(shù)，然后調(diào)用遠程服務器的js文件。
aehyok({"result":"我是遠程js帶來的數(shù)據(jù)"});
這是在遠程服務端js文件中的代碼。
運行后效果
調(diào)用成功。顯示本地函數(shù)被跨域的遠程js調(diào)用成功，并且還接收到了遠程js帶來的數(shù)據(jù)。很欣喜，跨域遠程獲取數(shù)據(jù)的目的基本實現(xiàn)了，但是又一個問題出現(xiàn)了，我怎么讓遠程js知道它應該調(diào)用的本地函數(shù)叫什么名字呢？畢竟是jsonp的服務者都要面對很多服務對象，而這些服務對象各自的本地函數(shù)都不相同啊？我們接著往下看。
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "get",
async: false,
url: "../Home/aehyok",
dataType: "jsonp",
jsonp: "callback", //傳遞給請求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認為:callback)
jsonpCallback: "aehyok", //自定義的jsonp回調(diào)函數(shù)名稱，默認為jQuery自動生成的隨機函數(shù)名，也可以寫"?"，jQuery會自動為你處理數(shù)據(jù)
success: function (json) {
alert("第二次"+json.result);
},
error: function () {
alert('fail');
}
});
});
function aehyok(data) {
alert("第一次"+data.result);
}
</script>
我是在asp.net mvc3.0項目中，所以后臺在控制器中
public string aehyok()
{
return "aehyok({\"result\":\"我是遠程js帶來的數(shù)據(jù)\"})";
}
然后執(zhí)行結果為
通過調(diào)試可以發(fā)現(xiàn)URLhttp://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641
callback=aehyok就是回調(diào)函數(shù)，在調(diào)用完后臺返回是先執(zhí)行aehyok(data)。
然后又執(zhí)行success(json)。所以有兩次的彈窗。
我現(xiàn)在只不過是在一個項目下進行，其實道理還是一樣的。
相關文章
辨析JavaScript中的Undefined類型與null類型
Undefined與null都是js中的基本數(shù)據(jù)類型,然而正如它們的名字那樣,未初始化和空并不相同,下面我們就來詳細辨析JavaScript中的Undefined類型與null類型:2016-05-05
JavaScript操作HTML DOM節(jié)點的基礎教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點的基礎入門教程,包括對節(jié)點的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點時需注意的問題,需要的朋友可以參考下2016-03-03
表單元素如果用js賦值刷新后，記錄是js賦值后的值而不是初始值；非表單元素如果用js賦值刷新后，記錄的是初始值2013-11-11
javascript delete的一些技巧，主要是從對象中刪除一個屬性，或從數(shù)組中刪除一個元素。具體的使用方法，可以參考下面的代碼。2010-03-03
Date 對象用于處理日期和時間，Date對象會自動把當前日期和時間保存為其初始值，本文整理了一些，喜歡的朋友可以收藏下2013-11-11
本文詳細講解了JavaScript自定義函數(shù)的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
javascript中實現(xiàn)兼容JAVA的hashCode算法代碼分享
這篇文章主要介紹了javascript中實現(xiàn)兼容JAVA的hashCode算法代碼分享,實現(xiàn)跟JAVA中的運算結果一致,需要的朋友可以參考下2014-08-08
javascript中interval與setTimeOut的區(qū)別示例介紹
這篇文章主要介紹了javascript中interval與setTimeOut的區(qū)別,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了詳解JavaScript中循環(huán)控制語句的用法,包括break語句和continue語句的使用方法,需要的朋友可以參考下2015-06-06
這篇文章介紹了JavaScript splice()方法，有需要的朋友可以參考一下2013-11-11