一、一些概念
①傳統(tǒng)Ajax:交互的數(shù)據(jù)格式——自定義字符串或XML描述;
跨域——通過服務(wù)器端代理解決。
②如今最優(yōu)方案:使用JSON格式來傳輸數(shù)據(jù),使用JSONP來跨域。
③JSON:一種數(shù)據(jù)交換格式;诩兾谋尽⒈辉鶭S支持。
格式:兩種數(shù)據(jù)類型描述符:大括號(hào){ }、方括號(hào)[ ]。分隔符逗號(hào)、映射符冒號(hào)、定義符雙引好。
④JSONP:一種跨域數(shù)據(jù)交互協(xié)議,非官方。
1、Web頁面調(diào)用js文件,可跨域。擴(kuò)展:但凡有src屬性的標(biāo)簽都具有跨域能力。
2、跨域服務(wù)器 動(dòng)態(tài)生成數(shù)據(jù) 并存入js文件(通常json后綴),供客戶端 調(diào)用。
3、為了便于客戶端使用數(shù)據(jù),形成一個(gè)非正式傳輸協(xié)議,稱為JSONP。該協(xié)議重點(diǎn)是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)器,然后服務(wù)器返回?cái)?shù)據(jù)時(shí) 將此callback參數(shù)作為函數(shù)名包裹住JSON數(shù)據(jù),使得客戶端可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)。
二、JSONP實(shí)現(xiàn)
實(shí)例1——客戶端單方面接收:
①客戶端——在客戶端設(shè)置創(chuàng)建一個(gè)函數(shù)對(duì)象,名稱可為callFunc,用于接收服務(wù)器的js數(shù)據(jù)和對(duì)其進(jìn)行處理。
js數(shù)據(jù)中的核心是:調(diào)用callFunc函數(shù)的同時(shí)附帶著參數(shù),此參數(shù)即data對(duì)象的值。
<script type="text/javascript"> var callFunc = function(data){ alert('遠(yuǎn)程js文件傳來的數(shù)據(jù):' + data.result);//data為服務(wù)器端的JSON數(shù)據(jù)對(duì)象。 }; </script> <script type="text/javascript" src="http://其他域的js文件.com/remote.js"></script>
②服務(wù)器端——直接調(diào)用客戶端js中的函數(shù),并傳入數(shù)據(jù)。
callFunc({"result":"value1"});
實(shí)例2——客戶端向服務(wù)器傳送 指定函數(shù)名,服務(wù)器端接收該函數(shù)名 并調(diào)用對(duì)應(yīng)函數(shù) 將數(shù)據(jù)以參數(shù)形式傳入。
<script type="text/javascript"> // 得到航班信息查詢結(jié)果后的回調(diào)函數(shù) var flightHandler = function(data){ alert('你查詢的航班結(jié)果是:票價(jià) ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 張。'); }; // 動(dòng)態(tài)添加鏈接服務(wù)器js文件的script。 // 在url地址中傳遞了一個(gè)code參數(shù)匹配JSON數(shù)據(jù)中的某個(gè)key,callback參數(shù)則告訴服務(wù)器:本地回調(diào)函數(shù)名為callFuncName。 var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName"; var script = document.createElement('script'); script.setAttribute('src', url); // 將script元素在網(wǎng)頁加載時(shí)插入head頭部 document.getElementsByTagName('head')[0].appendChild(script); </script>
總結(jié):實(shí)現(xiàn)的代碼并不復(fù)雜,但在實(shí)現(xiàn)Ajax跨域、frameset/iframe跨域等卻是效率頗高的。