首頁 web前端 js教程 什麼是json和jsonp,jQuery json實例詳詳細說明_json

什麼是json和jsonp,jQuery json實例詳詳細說明_json

May 16, 2016 pm 05:46 PM
json jsonp

什麼是JSON?
前面簡單說了一下,JSON是一種基於文字的資料交換方式,或者叫做資料描述格式,你是否該選用他首先肯定要關注它所擁有的優點。

JSON的優點
1、基於純文本,跨平台傳遞極其簡單;
2、Javascript原生支持,後台語言幾乎全部支持;
3 、輕量級資料格式,佔用字元數量極少,特別適合網路傳遞;
4、可讀性較強,雖然比不上XML那麼一目了然,但在合理的依序縮排之後還是很容易辨識的;
5、容易編寫和解析,當然前提是你要知道資料結構;
JSON的缺點當然也有,但在作者看來實在是無關緊要的東西,所以不再單獨說明。

JSON的格式或稱為規則
JSON能夠以非常簡單的方式來描述資料結構,XML能做的它都能做,因此在跨平台方面兩者完全不分伯仲。
1、JSON只有兩種資料型別描述符,大括號{}和方括號[],其餘英文冒號:是映射符,英文逗號,是分隔符,英文雙引號”"是定義符。
2、大括號{}用來描述一組「不同類型的無序鍵值對集合」(每個鍵值對可以理解為OOP的屬性描述),方括號[]用來描述一組“相同類型的有序資料集合」(可對應OOP的陣列)。
3、上述兩種集合中若有多個子項,則透過英文逗號,進行分隔。
4、鍵值對以英文冒號:進行分隔,並且建議鍵名都加上英文雙引號”",以便於不同語言的解析。
5、JSON內部常用資料型別就是字串、數字、布林、日期、null 這麼幾個,字串必須用雙引號引起來,其餘的都不用,日期類型比較特殊,這裡就不展開講述了,只是建議如果客戶端沒有按日期排序功能需求的話,那麼把日期時間直接作為字串傳遞就好,可以省去很多麻煩。
JSON實例
複製程式碼 程式碼如下:

程式碼如下:
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
// 取得這個人的資訊
var personAge = person.Age;
// 描述幾個人
var members = [
{
"Name" : "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": " John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry" ,
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// 讀取其中John的公司名稱
var johnsCompany = members[1].Company;
// 描述一次會議
var conference = {
"Conference": "Future Marketing",
"Date": "2012-6 -1",
"Address": "Beijing",
"Members":
[
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
" Company": "Microsoft",
"Engineer": false
}
]
}
// 讀取參會者Henry是否工程師
var henryIsAnEngineer = conference.Members[ 2].Engineer;


什麼是JSONP
其實網路上關於JSONP的講解有很多,但卻千篇一律,而且雲裡霧裡,對於很多剛接觸的人來講理解起來有些困難,小可不才,試著用自己的方式來闡釋一下這個問題,看看是否有幫助。
1、一個眾所周知的問題,Ajax直接請求普通文件存在跨域無權限訪問的問題,甭管你是靜態頁面、動態網頁、web服務、WCF,只要是跨域請求,一律不准;
2、不過我們又發現,Web頁面上呼叫js檔案時則不受是否跨域的影響(不僅如此,我們還發現凡是擁有」src」這個屬性的標籤都擁有跨域的能力,例如<script>、<img src="/static/imghw/default1.png" data-src="http://remoteserver.com/remote.js" class="lazy" alt="什麼是json和jsonp,jQuery json實例詳詳細說明_json" >、<iframe>);<BR>3、於是可以判斷,當前階段如果想透過純web端(ActiveX控件、服務端代理、屬於未來的HTML5之Websocket等方式不算)跨域訪問資料只有一種可能,那就是在遠端伺服器上設法把資料裝進js格式的檔案裡,供客戶端呼叫和進一步處理; <BR>4、恰巧我們已經知道有一種叫做JSON的純字元資料格式可以簡潔的描述複雜數據,更妙的是JSON還被js原生支持,所以在客戶端幾乎可以隨心所欲的處理這種格式的數據;<BR>5、這樣子解決方案就呼之欲出了,web客戶端通過與呼叫腳本一模一樣的方式,來呼叫跨域伺服器上動態產生的js格式檔案(一般以JSON為後綴),顯而易見,伺服器之所以要動態產生JSON文件,目的就在於把客戶端需要的資料裝入進去。 <BR>6.客戶端在對JSON檔案呼叫成功之後,也就獲得了自己所需的數據,剩下的就是按照自己需求進行處理和展現了,這種獲取遠端資料的方式看起來非常像AJAX ,但其實不一樣。 <BR>7、為了便於客戶端使用數據,逐漸形成了一種非正式傳輸協議,人們把它稱作JSONP,該協議的一個要點就是允許用戶傳遞一個callback參數給服務端,然後服務端返回數據時會將這個callback參數當作函數名稱來包裹住JSON數據,這樣客戶端就可以隨意自訂自己的函數來自動處理回傳資料了。 <BR>如果對於callback參數如何使用還有些模糊的話,我們後面會有具體的實例來講解。 <br><br><STRONG>JSONP的客戶端具體實現: <BR>不管jQuery也好,extjs也罷,又或者是其他支援jsonp的框架,他們幕後所做的工作都是一樣的,下面我來循序漸進的說明一下jsonp在客戶端的實作: <BR>1、我們知道,即使跨域js檔案中的程式碼(當然指符合web腳本安全策略的),web頁面也是可以無條件執行的。 <BR>遠端伺服器remoteserver.com根目錄下有個remote.js檔案程式碼如下: <BR><div class="codetitle"><span><a style="max-width:90%" data="5077" class="copybut" id="copybut5077" onclick="doCopy('code5077')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code5077"> <BR>alert('我是遠端檔案'); <BR> <BR>本地伺服器localserver.com下有jsonp.html頁碼如下: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="83051" class="copybut" id="copybut83051" onclick="doCopy('code83051')"><U>複製代碼 代碼如下:<div class="codebody" id="code83051"> <BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <BR> <head> <BR><title> <BR><script type="text/javascript"></script>
head>


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

golang WebSocket與JSON的結合:實現資料傳輸與解析 golang WebSocket與JSON的結合:實現資料傳輸與解析 Dec 17, 2023 pm 03:06 PM

golangWebSocket與JSON的結合:實現資料傳輸和解析在現代的Web開發中,即時資料傳輸變得越來越重要。 WebSocket是一種用於實現雙向通訊的協議,與傳統的HTTP請求-回應模型不同,WebSocket允許伺服器向客戶端主動推送資料。而JSON(JavaScriptObjectNotation)是一種用於資料交換的輕量級格式,它簡潔易讀

如何在Java中使用@Expose註解從JSON中排除一個欄位? 如何在Java中使用@Expose註解從JSON中排除一個欄位? Sep 16, 2023 pm 09:49 PM

Gson@Expose註解可用於標記欄位是否公開(包含或不包含)以進行序列化或反序列化。 @Expose註解可以採用兩個參數,每個參數都是一個布林值,可以採用值true或false。為了讓GSON對@Expose註解做出反應,我們必須使用GsonBuilder類別建立一個Gson實例,並且需要呼叫excludeFieldsWithoutExposeAnnotation()方法,它將Gson配置為排除所有沒有Expose註解的欄位進行序列化或反序列化。語法publicGsonBuilderexclud

MySQL5.7和MySQL8.0的差別是什麼? MySQL5.7和MySQL8.0的差別是什麼? Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是兩個不同的MySQL資料庫版本,它們之間有以下一些主要差異:效能改進:MySQL8.0相對於MySQL5.7有一些效能改進。其中包括更好的查詢優化器、更有效率的查詢執行計劃產生、更好的索引演算法和平行查詢等。這些改進可以提高查詢效能和整體系統效能。 JSON支援:MySQL8.0引入了對JSON資料類型的原生支持,包括JSON資料的儲存、查詢和索引。這使得在MySQL中處理和操作JSON資料變得更加方便和有效率。事務特性:MySQL8.0引進了一些新的事務特性,如原子

PHP 數組轉 JSON 的效能最佳化技巧 PHP 數組轉 JSON 的效能最佳化技巧 May 04, 2024 pm 06:15 PM

PHP數組轉JSON的效能最佳化方法包括:使用JSON擴充和json_encode()函數;新增JSON_UNESCAPED_UNICODE選項以避免字元轉義;使用緩衝區提高循環編碼效能;快取JSON編碼結果;考慮使用第三方JSON編碼庫。

使用golang中的json.MarshalIndent函數將結構體轉換為格式化的JSON字串 使用golang中的json.MarshalIndent函數將結構體轉換為格式化的JSON字串 Nov 18, 2023 pm 01:59 PM

使用golang中的json.MarshalIndent函數將結構體轉換為格式化的JSON字串在使用Golang編寫程式時,我們經常需要將結構體轉換為JSON字串,在這個過程中,json.MarshalIndent函數可以幫助我們實現格式化的輸出。下面我們將詳細介紹如何使用這個函數,並提供具體的程式碼範例。首先,讓我們建立一個包含一些資料的結構體。以下是示

C#開發中如何處理XML和JSON資料格式 C#開發中如何處理XML和JSON資料格式 Oct 09, 2023 pm 06:15 PM

C#開發中如何處理XML和JSON資料格式,需要具體程式碼範例在現代軟體開發中,XML和JSON是廣泛應用的兩種資料格式。 XML(可擴展標記語言)是一種用於儲存和傳輸資料的標記語言,而JSON(JavaScript物件表示)是一種輕量級的資料交換格式。在C#開發中,我們經常需要處理和操作XML和JSON數據,本文將重點放在如何使用C#處理這兩種數據格式,並附上

Pandas使用教學:讀取JSON檔案的快速入門 Pandas使用教學:讀取JSON檔案的快速入門 Jan 13, 2024 am 10:15 AM

快速入門:Pandas讀取JSON檔案的方法,需要具體程式碼範例引言:在資料分析和資料科學領域,Pandas是一個重要的Python庫之一。它提供了豐富的功能和靈活的資料結構,能夠方便地對各種資料進行處理和分析。在實際應用中,我們經常會遇到需要讀取JSON檔案的情況。本文將介紹如何使用Pandas來讀取JSON文件,並附上特定的程式碼範例。一、Pandas的安裝

Jackson庫中註解如何控制JSON序列化和反序列化? Jackson庫中註解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson庫中的註解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略屬性@JsonProperty:指定名稱@JsonGetter:使用獲取方法@JsonSetter:使用設定方法反序列化:@JsonIgnoreProperties:忽略屬性@ JsonProperty:指定名稱@JsonCreator:使用建構子@JsonDeserialize:自訂邏輯

See all articles