通過實例解析json與jsonp原理及使用方法
1.json與jsonp的引入
在ajax中 JSON用來解決數(shù)據(jù)交換問題,而JSONP來實現(xiàn)跨域。
備注：跨域也可以通過服務器端代理來解決;
理解：JSON是一種數(shù)據(jù)交換格式，而JSONP是一種依靠開發(fā)人員的聰明才智創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議。
2.JSON：是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式，是否該選用它首先肯定要關注它所擁有的優(yōu)點。
JSON的優(yōu)點：
- 1) 基于純文本，跨平臺傳遞極其簡單；
- 2) Javascript原生支持，后臺語言幾乎全部支持；
- 3) 輕量級數(shù)據(jù)格式，占用字符數(shù)量極少，特別適合互聯(lián)網(wǎng)傳遞；
- 4) 可讀性較強，雖然比不上XML那么一目了然，但在合理的依次縮進之后還是很容易識別的；
- 5) 容易編寫和解析，當然前提是你要知道數(shù)據(jù)結(jié)構(gòu)；
JSON的格式或者叫規(guī)則：
JSON能夠以非常簡單的方式來描述數(shù)據(jù)結(jié)構(gòu)，XML能做的它都能做，因此在跨平臺方面兩者完全不分伯仲。
- 1) JSON只有兩種數(shù)據(jù)類型描述符，大括號{}和方括號[]，其余英文冒號:是映射符，英文逗號,是分隔符，英文雙引號""是定義符。
- 2) 大括號{}用來描述一組“不同類型的無序鍵值對集合”（每個鍵值對可以理解為OOP的屬性描述），方括號[]用來描述一組“相同類型的有序數(shù)據(jù)集合”（可對應OOP的數(shù)組）。
- 3) 上述兩種集合中若有多個子項，則通過英文逗號,進行分隔。
- 4) 鍵值對以英文冒號:進行分隔，并且建議鍵名都加上英文雙引號""，以便于不同語言的解析。
- 5) JSON內(nèi)部常用數(shù)據(jù)類型無非就是字符串、數(shù)字、布爾、日期、null 這么幾個，字符串必須用雙引號引起來，其余的都不用，日期類型比較特殊，這里就不展開講述了，
只是建議如果客戶端沒有按日期排序功能需求的話，那么把日期時間直接作為字符串傳遞就好，可以省去很多麻煩。
示列1：{} 用來描述一組“不同類型的無序鍵值對集合”
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
示列2：[] 用來描述一組“相同類型的有序數(shù)據(jù)集合”
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;
示列3：{}中包含的[]使用
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;
3.什么是JSONP
JSONP(JSON with Padding)是資料格式 JSON 的一種“使用模式”，可以讓網(wǎng)頁從別的網(wǎng)域要資料。由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務器溝通，而 HTML 的 <script> 元素是一個例外。利用<script> 元素的這個開放策略，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。
3.1 JSOPN跨域的原理：script標簽的src屬性，支持跨域；它的基本思想是，網(wǎng)頁通過添加一個<script>元素，向服務器請求JSON數(shù)據(jù)，這種做法不受同源政策限制；服務器收到請求后，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)里傳回來。
3.2 JSOP包含兩部分：回調(diào)函數(shù)和數(shù)據(jù)，回調(diào)函數(shù)是在響應到來時應該調(diào)用的函數(shù)，一般通過查詢字符串添加; 數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)，確切的說，是一個JSON對象，可以直接訪問。
3.3 JSONP的缺點:
1) 只能實現(xiàn)GET，沒有POST；
2) 從其他域中加載的代碼可能不安全；難以確定JSONP請求是否失敗（XHR有error事件），常見做法是使用定時器指定響應的允許時間，超出時間認為響應失敗。
為了方便客戶端使用數(shù)據(jù)逐漸形成非正式傳輸協(xié)議jsonp該協(xié)議的一個要點就是允許用戶傳遞一個callback參數(shù)給服務端，然后服務端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住json數(shù)據(jù) 這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)
示列：
function ajaxFun(){
var strUrl="http://www.b.com/demo/json.txt";
$.ajax({
type:"get",
url:strUrl,
dataType: 'jsonp',
jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認為:callback)
jsonpCallback: "flightHandler",//自定義的jsonp回調(diào)函數(shù)名稱，默認為jQuery自動生成的隨機函數(shù)名，也可以寫"?"，jQuery會自動為你處理數(shù)據(jù)
success: function(data){
alert('您查到的信息：票價' + data.price + '元，余-票' + data.tickets + '張。');
},
error: function(XMLHttpRequest,textStatus,errorThrown){
alert("error");
// 狀態(tài)碼
console.log(XMLHttpRequest.status);
// 狀態(tài)
console.log(XMLHttpRequest.readyState);
// 錯誤信息
console.log(textStatus);
}
});
}
備注：
其中 sucess中的代碼片段也可以不寫，可以單獨建立一個回調(diào)函數(shù)來調(diào)用返回的數(shù)據(jù)。如下一樣可以獲得數(shù)據(jù)。
var flightHandler = function (data) {
alert('您查到的信息：票價' + data.price + '元，余票' + data.tickets + '張。');
};
需要注意的是，ajax跨域請求(jsonp)中,服務端返回數(shù)據(jù)格式必須是:flightHandler({ "price":"120","tickets":"20"});如果直接這樣的json格式{ "price":"120","tickets":"20"}，將會報parser error的錯誤.請注意這個函數(shù)最后的分號";",必須加上,否則,如果同一個頁面有多個ajax請求, 并且在數(shù)據(jù)沒有返回時,再發(fā)出其它ajax請求時,有可能出現(xiàn)parsererror出錯提示.這種錯誤很隱敝,在開發(fā)時,不容易發(fā)現(xiàn),在并發(fā)測試時,就很容易暴露出.
服務端代碼示列：
public String jsonReturn(HttpServletResponse response, String callback, Map<String, Object> jsonMap) {
if (org.apache.commons.lang.StringUtils.isEmpty(callback)) {
return appAjaxJson(response, getJson(jsonMap));
}
return appAjaxJson(response, callback + "(" + getJson(jsonMap) + ")");
}
public String appAjaxJson(HttpServletResponse response, String jsonString) {
return appAjax(response, jsonString, "text/html");
}
public String appAjax(HttpServletResponse response, String content, String type) {
try {
response.setContentType(type + ";charset=UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");//表示支持跨域請求
// 如果IE瀏覽器則設置頭信息如下
if ("IE".equals(type)) {
response.addHeader("XDomainRequestAllowed", "1");
}
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write(content);
response.getWriter().flush();
} catch (IOException e) {
this.logException(e);
}
return null;
}
4、JSON.stringify()、JSON.parse()、toString()
4.1 JSON.stringify()：將入?yún)?JavaScript值)轉(zhuǎn)換為 JSON 字符串;
示列1：
let arr = [1,2,3];
JSON.stringify(arr);//"[1,2,3]"
typeof JSON.stringify(arr);//"string"
示例2：
//判斷數(shù)組是否包含某對象
let data = [
{name:'echo'},
{name:'聽風是風'},
{name:'天子笑'},
],
val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
//判斷兩數(shù)組/對象是否相等
let a = [1,2,3],
b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true
4.2 JSON.parse()：將JSON字符串轉(zhuǎn)為一個對象;
示列：
let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object
4.3 JSON.stringify()與 toString()的區(qū)別
let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
非常不錯的，收藏效果代碼，增加當前頁的現(xiàn)實，實現(xiàn)對比2008-08-08
這篇文章主要介紹了Js實現(xiàn)復選框的全選、全不選和反選,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
本篇文章是對瀑布流局部的實現(xiàn)進行了詳細的分析介紹。需要的朋友參考下2013-05-05
下面小編就為大家分享一篇webpack下實現(xiàn)動態(tài)引入文件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了javascript父子頁面通訊的實現(xiàn)方法,實例分析了javascript針對父子頁面通訊的原理與相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了純js+html制作手風琴和純css+html制作手風琴兩種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細介紹了js截取字符串功能的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要帶領大家理解JavaScript表單的基礎知識，對javascript表單腳本進行深入學習，感興趣的小伙伴們可以參考一下2016-01-01
傳統(tǒng)的javascript中只有對象,沒有類的概念,下面這篇文章主要給大家介紹了關于ES6?class類實現(xiàn)繼承的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)可拖拽登錄框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10