日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

取不到數(shù)據(jù)！

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比澄江網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式澄江網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋澄江地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

上周客戶新買了服務(wù)器，原本在舊的服務(wù)器上放著客戶的Web主頁(yè)信息和一個(gè)后臺(tái)程序(asp.net)，在客戶的主頁(yè)中有一個(gè)動(dòng)態(tài)顯示最新消息的處理，這個(gè)處理就是通過(guò)ajax異步從那個(gè)后臺(tái)程序中取得的。由于又購(gòu)買了新的服務(wù)器，客戶想把web主頁(yè)和那個(gè)后臺(tái)程序分開(kāi)來(lái)，后臺(tái)程序被部署到了新的服務(wù)器上。不過(guò)這個(gè)項(xiàng)目是我的同事小福同志開(kāi)發(fā)的，也就由他來(lái)把程序分開(kāi)部署，然后進(jìn)行一些小改動(dòng)。

"怎么最新消息取不到了，異步處理的url也已經(jīng)添加上新服務(wù)器的地址(http://xxxx.com/.../news.ashx)，奇怪了..."小福在一邊抱怨，我看了看IE7下還出了個(gè)腳本錯(cuò)誤"アクセスが拒否されました"的錯(cuò)誤(環(huán)境是日文的，意思是訪問(wèn)被拒絕了)。網(wǎng)上查了下中文環(huán)境應(yīng)該是"沒(méi)有權(quán)限"吧。在Firefox和Chrome上是看不到任何腳本錯(cuò)誤的，不過(guò)可以通過(guò)Firebug工具測(cè)出這個(gè)錯(cuò)誤（"Permission denied to call method XMLHttpRequest.open"）。

同源策略

為什么會(huì)出這樣的錯(cuò)誤呢？這是因?yàn)樗兄С諮avascript的瀏覽器都會(huì)使用同源策略這個(gè)安全策略?？纯窗俣鹊慕忉專?/p>

同源策略，它是由Netscape提出的一個(gè)著名的安全策略。現(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。所謂同源是指，域名，協(xié)議，端口相同。當(dāng)一個(gè)瀏覽器的兩個(gè)tab頁(yè)中分別打開(kāi)來(lái) 百度和谷歌的頁(yè)面當(dāng)一個(gè)百度瀏覽器執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁(yè)面的，即檢查是否同源，只有和百度同源的腳本才會(huì)被執(zhí)行。

這就是引起為何取不到數(shù)據(jù)的原因了，那如何才能解決跨域的問(wèn)題呢？沒(méi)錯(cuò)，我們現(xiàn)在可以進(jìn)入正題，來(lái)了解下什么是JSONP了。

JSON和JSONP

JSONP和JSON好像啊，他們之間有什么聯(lián)系嗎？

JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。對(duì)于JSON大家應(yīng)該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡(jiǎn)單易懂。

JSONP是JSON with Padding的略稱。它是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。--來(lái)源百度

JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充)， 我們先看下面的小例子然后再詳細(xì)介紹。

跨域的簡(jiǎn)單原理

光看定義還不是很明白，那首先我們先來(lái)手動(dòng)做個(gè)簡(jiǎn)單易懂的小測(cè)試。新建一個(gè)asp.net的web程序，添加sample.html網(wǎng)頁(yè)和一個(gè)test.js文件，代碼如下：

sample.html的代碼：

test.js的代碼：

 
 
 
  
  
  
alert("success"); 
 
 

打開(kāi)sample.html后會(huì)跳出"success”這樣的這樣的信息框，這似乎并不能說(shuō)明什么， 跨域問(wèn)題到底怎么解決呢？好，現(xiàn)在我們模擬下非同源的環(huán)境，剛才我們不是已經(jīng)用Visual Studio新建了一個(gè)Web程序嗎(這里我們叫A程序)，現(xiàn)在我們?cè)俅蜷_(kāi)一個(gè)新的Visual Studio再新建一個(gè)Web程序(B程序)，將我們的之前的test.js文件從A程序中移除然后拷貝到B程序中。兩個(gè)程序都運(yùn)行起來(lái)后，Visual Studio會(huì)啟動(dòng)內(nèi)置服務(wù)器，假設(shè)A程序是localhost:20001,B程序是localhost:20002，這就模擬了一個(gè)非同源的環(huán)境了(雖然域名相同但端口號(hào)不同，所以是非同源的)。

OK，我們接下來(lái)應(yīng)該改下sample.html里的代碼，因?yàn)閠est.js文件在B程序上了，url也就變成了localhost:20002。

sample.html部分代碼：

請(qǐng)保持AB兩個(gè)Web程序的運(yùn)行狀態(tài)，當(dāng)你再次刷新localhost:20001/sample.html的時(shí)候，和原來(lái)一樣跳出了"success"的對(duì)話框，是的，成功訪問(wèn)到了非同源的localhost:20002/test.js這個(gè)所謂的遠(yuǎn)程服務(wù)了。到了這一步，相信大家應(yīng)該已經(jīng)大概明白如何跨域訪問(wèn)了的原理了。

 

  

程序B中test.js的代碼：

 
 
 
  
  
  
//調(diào)用callback函數(shù)，并以json數(shù)據(jù)形式作為闡述傳遞，完成回調(diào)  
  
  
  
 callback({message:"success"}); 
 
 

這其實(shí)就是JSONP的簡(jiǎn)單實(shí)現(xiàn)模式，或者說(shuō)是JSONP的原型：創(chuàng)建一個(gè)回調(diào)函數(shù)，然后在遠(yuǎn)程服務(wù)上調(diào)用這個(gè)函數(shù)并且將JSON 數(shù)據(jù)形式作為參數(shù)傳遞，完成回調(diào)。

將JSON數(shù)據(jù)填充進(jìn)回調(diào)函數(shù)，這就是JSONP的JSON+Padding的含義吧。

一般情況下，我們希望這個(gè)script標(biāo)簽?zāi)軌騽?dòng)態(tài)的調(diào)用，而不是像上面因?yàn)楣潭ㄔ趆tml里面所以沒(méi)等頁(yè)面顯示就執(zhí)行了，很不靈活。我們可以通過(guò)javascript動(dòng)態(tài)的創(chuàng)建script標(biāo)簽，這樣我們就可以靈活調(diào)用遠(yuǎn)程服務(wù)了。

程序A中sample的部分代碼：

程序B的test.js代碼不變，我們?cè)賵?zhí)行下程序，是不是和原來(lái)的一樣呢。如果我們?cè)傧胝{(diào)用一個(gè)遠(yuǎn)程服務(wù)的話，只要添加addScriptTag方法，傳入遠(yuǎn)程服務(wù)的src值就可以了。這里說(shuō)明下為什么要將addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，這個(gè)script標(biāo)簽是被添加到body里的，由于我們寫(xiě)的javascript代碼是在head標(biāo)簽中，document.body還沒(méi)有初始化完畢呢，所以我們要通過(guò)window.onload方法先初始化頁(yè)面，這樣才不會(huì)出錯(cuò)。

上面的例子是最簡(jiǎn)單的JSONP的實(shí)現(xiàn)模型，不過(guò)它還算不上一個(gè)真正的JSONP服務(wù)。我們來(lái)看一下真正的JSONP服務(wù)是怎么樣的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

q=?這個(gè)問(wèn)號(hào)是表示你要搜索的內(nèi)容，最重要的是第二個(gè)callback=?這個(gè)是正如其名表示回調(diào)函數(shù)的名稱，也就是將你自己在客戶端定義的回調(diào)函數(shù)的函數(shù)名傳送給服務(wù)端，服務(wù)端則會(huì)返回以你定義的回調(diào)函數(shù)名的方法，將獲取的json數(shù)據(jù)傳入這個(gè)方法完成回調(diào)。有點(diǎn)羅嗦了，還是看看實(shí)現(xiàn)代碼吧：

像這樣的JSONP服務(wù)還有很多(以下信息來(lái)自使用 JSONP 實(shí)現(xiàn)跨域通信，第 1 部分: 結(jié)合 JSONP 和 jQuery 快速構(gòu)建強(qiáng)大的 mashup)：

Digg API：來(lái)自 Digg 的頭條新聞： http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=? Geonames API：郵編的位置信息： http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=? Flickr JSONP API：載入最新貓的圖片： http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? Yahoo Local Search API：在郵編為 10504 的地區(qū)搜索比薩： http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

接下來(lái)我們自己來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的遠(yuǎn)程服務(wù)，實(shí)現(xiàn)和上面一樣的JSONP服務(wù)。還是利用Web程序A和程序B來(lái)做演示，這次我們?cè)诔绦駼上創(chuàng)建一個(gè)MyService.ashx文件。

程序B的MyService.ashx代碼：

 
 
 
  
  
  
public class MyService : IHttpHandler  
  
  
  
     {  
  
  
  
         public void ProcessRequest(HttpContext context)  
  
  
  
         {  
  
  
  
             //獲取回調(diào)函數(shù)名  
  
  
  
             string callback = context.Request.QueryString["callback"];  
  
  
  
             //json數(shù)據(jù)  
  
  
  
             string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";  
  
  
  
   
  
  
  
             context.Response.ContentType = "application/json";  
  
  
  
             //輸出：回調(diào)函數(shù)名(json數(shù)據(jù))  
  
  
  
             context.Response.Write(callback + "(" + json + ")");  
  
  
  
         }  
  
  
  
   
  
  
  
         public bool IsReusable  
  
  
  
         {  
  
  
  
             get  
  
  
  
             {  
  
  
  
                 return false;  
  
  
  
             }  
  
  
  
         }  
  
  
  
     } 
 
 

程序A的sample代碼中的調(diào)用：

這就完成了一個(gè)最基本的JSONP服務(wù)調(diào)用了，是不是很簡(jiǎn)單，下面我們來(lái)了解下JQuery是如何調(diào)用JSONP的。

jQuery對(duì)JSONP的實(shí)現(xiàn)

jQuery框架也當(dāng)然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(詳細(xì)可以參考http://api.jquery.com/jQuery.getJSON/)。那我們就來(lái)修改下程序A的代碼，改用jQuery的getJSON方法來(lái)實(shí)現(xiàn)(下面的例子沒(méi)用用到向服務(wù)傳參，所以只寫(xiě)了getJSON(url,[callback]))：

結(jié)果是一樣的，要注意的是在url的后面必須添加一個(gè)callback參數(shù)，這樣getJSON方法才會(huì)知道是用JSONP方式去訪問(wèn)服務(wù)，callback后面的那個(gè)問(wèn)號(hào)是內(nèi)部自動(dòng)生成的一個(gè)回調(diào)函數(shù)名。這個(gè)函數(shù)名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

當(dāng)然，加入說(shuō)我們想指定自己的回調(diào)函數(shù)名，或者說(shuō)服務(wù)上規(guī)定了固定回調(diào)函數(shù)名該怎么辦呢？我們可以使用$.ajax方法來(lái)實(shí)現(xiàn)(參數(shù)較多，詳細(xì)可以參考http://api.jquery.com/jQuery.ajax)。

先來(lái)看看如何實(shí)現(xiàn)吧：

沒(méi)錯(cuò)，jsonpCallback就是可以指定我們自己的回調(diào)方法名person，遠(yuǎn)程服務(wù)接受callback參數(shù)的值就不再是自動(dòng)生成的回調(diào)名，而是person。dataType是指定按照J(rèn)SOPN方式訪問(wèn)遠(yuǎn)程服務(wù)。

利用jQuery可以很方便的實(shí)現(xiàn)JSONP來(lái)進(jìn)行跨域訪問(wèn)。先暫時(shí)寫(xiě)到這吧。

網(wǎng)站題目：深入淺出JSONP：解決AJAX跨域問(wèn)題
網(wǎng)頁(yè)網(wǎng)址：http://m.5511xx.com/article/djcigei.html