最近有一個(gè)活動(dòng)，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個(gè)網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問(wèn)題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法
這里采用了JSONP（JSON with Padding-填充json數(shù)據(jù)也就是常用的json跨域方式）：利用script標(biāo)簽，通過(guò)特定的src地址的調(diào)用，來(lái)執(zhí)行一個(gè)客戶端的js函數(shù)，在 服務(wù)器端生成相對(duì)的數(shù)據(jù)（JSON格式）并以參數(shù)的形式傳遞給這個(gè)客戶端的js函數(shù)并執(zhí)行這個(gè)函數(shù)，前提是需要服務(wù)器端的數(shù)據(jù)輸出支持。在JQuery1.2以后支持JSONP的應(yīng)用。
JSON 是一種含有簡(jiǎn)單括號(hào)結(jié)構(gòu)的純文本，因此許多通道都可以交換 JSON 消息。因?yàn)橥床呗缘南拗疲覀儾荒茉谂c外部服務(wù)器進(jìn)行通信的時(shí)候使用 XMLHttpRequest。而JSONP是一種可以繞過(guò)同源策略的方法，即通過(guò)使用 JSON 與 <script> 標(biāo)記相結(jié)合的方法，從服務(wù)端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JavaScript對(duì)象。
整個(gè)調(diào)用過(guò)程中，起關(guān)鍵作用的是jsoncallback=?,在客戶端調(diào)用時(shí)需在請(qǐng)求地址中添加參數(shù)：jsoncallback=?；同時(shí)服務(wù)器端則需要把jsoncallback的值作為方法名傳回來(lái)。
服務(wù)端代碼：
protected void Page_Load(object sender, EventArgs e) { Response.Write(Request.QueryString["jsoncallback"] + "({name:'test'})"); } html頁(yè)面調(diào)用：
<html xmlns="http://www.w3.org/1999/xhtml" > <head > <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $.getJSON("http://localhost:10272/test.aspx?jsoncallback=?", function(data) { $("#divHeaderLink").html(data.name); }); }); </script> </head> <body> <div id="divHeaderLink"> </div> </body> </html>
新聞熱點(diǎn)
疑難解答
圖片精選
