首頁 >web前端 >js教程 >JSONP解決ajax跨域問題（附程式碼）

JSONP解決ajax跨域問題（附程式碼）

php中世界最好的语言原創: 2018-04-26 14:49:111712瀏覽

這次帶給大家JSONP解決ajax跨域問題（附程式碼），JSONP解決ajax跨域問題的注意事項有哪些，下面就是實戰案例，一起來看一下。

JSON和JSONP

　　JSONP和JSON好像啊，他們之間有什麼關聯嗎？

　　JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。對於JSON大家應該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。

　　JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在伺服器端整合Script tags返回到客戶端，透過javascript callback的形式實現跨域存取（這只是JSONP簡單的實作形式）。

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

同源策略

　　為什麼會出這樣的錯誤呢？這是因為所有支援Javascript的瀏覽器都會使用同源策略這個安全性策略。看看百度的解釋：

　　同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支援JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來百度和谷歌的頁面當一個百度瀏覽器執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執行。

　　這就是造成為何取不到資料的原因了，那如何才能解決跨域的問題呢？沒錯，我們現在可以進入正題，來了解下什麼是JSONP了。

跨域的簡單原理

　　光看定義還不是很明白，那首先我們先來手動做個簡單易懂的小測試。新建一個asp.net的web程序，加入sample.html網頁和一個test.js文件，程式碼如下：

sample.html的程式碼：

 <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
 <html xmlns="http://www.w.org//xhtml" >
 <head>
   <title>test</title>
   <script type="text/javascript" src="test.js"></script>
 </head>
 <body>
 </body>
 </html>

test.js的程式碼：

alert("success");

　　開啟sample.html後會跳出"success」這樣的這樣的資訊框，這似乎並不能說明什麼，跨域問題到底要怎麼解決呢？好，現在我們模擬下非同源的環境，剛才我們不是已經用Visual Studio新建了一個Web程式嗎(這裡我們叫A程式)，現在我們再開啟一個新的Visual Studio再新建一個Web程式(B程式)，將我們的先前的test.js檔案從A程式中移除然後拷貝到B程式中。兩個程式都運作起來後，Visual Studio會啟動內建伺服器，假設A程式是localhost:20001,B程式是localhost:20002，這就模擬了一個非同源的環境了(雖然網域名稱相同但連接埠號碼不同，所以是非同源的)。

　　OK，我們接下來應該改下sample.html裡的程式碼，因為test.js檔案在B程式上了，url也就變成了localhost:20002。

sample.html部分程式碼：

<script type="text/javascript" src="http://localhost:20002/test.js"></script>

　　請保持AB兩個Web程式的運作狀態，當你再次刷新localhost:20001/sample.html的時候，和原來一樣跳出了"success"的對話框，是的，成功訪問到了非同源的localhost:20002/test.js這個所謂的遠端服務了。到了這一步，相信大家應該已經大概明白如何跨域訪問了的原理了。

　　<script>標籤的src屬性並不被同源策略所約束，所以可以取得任何伺服器上腳本並執行。 </p> <p style="text-align: left;"><span style="background-color: #808080">JSONP的實作模式--CallBack</span></p> <p style="text-align: left;">　　剛才的小例子講解了跨域的原理，我們回上去再看看JSONP的定義說明中講到了javascript callback的形式。那我們就來修改下程式碼，如何實作JSONP的javascript callback的形式。 </p> <p style="text-align: left;">程式A中sample的部分程式碼：</p> <pre class="brush:php;toolbar:false"> <script type="text/javascript"> //回调函数 function callback(data) { alert(data.message); } </script> <script type="text/javascript" src="http://localhost:20002/test.js"></script>

程式B中test.js的程式碼：

//呼叫callback函數，並以json資料形式作為闡述傳遞，完成回調

callback({message:"success"});

　　这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

　　将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。

　　一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

程序A中sample的部分代码：

 <script type="text/javascript"> 
   function callback(data) { 
     alert(data.message); 
   } 
   //添加<script>标签的方法 
   function addScriptTag(src){ 
   var script = document.createElement('script'); 
     script.setAttribute("type","text/javascript"); 
     script.src = src; 
     document.body.appendChild(script);
   } 
 
   window.onload = function(){ 
     addScriptTag("http://localhost:/test.js"); 
   } 
 </script>

　　程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。

　　上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

　　q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：

 <script type="text/javascript"> 
   //添加<script>标签的方法 
   function addScriptTag(src){
     var script = document.createElement('script');
     script.setAttribute("type","text/javascript");
     script.src = src;
     document.body.appendChild(script);
   }
   window.onload = function(){
     //搜索apple，将自定义的回调函数名result传入callback参数中
     addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=.&q=apple&callback=result");
   }
   //自定义的回调函数result
   function result(data) {
     //我们就简单的获取apple搜索结果的第一条记录中url数据
     alert(data.responseData.results[].unescapedUrl);
   }
 </script>

像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup)：

接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。

程序B的MyService.ashx代码：

 public class MyService : IHttpHandler 
   { 
     public void ProcessRequest(HttpContext context) 
     { 
       //获取回调函数名 
       string callback = context.Request.QueryString["callback"]; 
       //json数据 
       string json = "{\"name\":\"chopper\",\"sex\":\"man\"}"; 
 
       context.Response.ContentType = "application/json"; 
       //输出：回调函数名(json数据)
       context.Response.Write(callback + "(" + json + ")");
     } 
 
     public bool IsReusable 
     { 
       get 
       { 
         return false; 
       } 
     } 
   }

程序A的sample代码中的调用：

 <script type="text/javascript">   function addScriptTag(src){
     var script = document.createElement('script');
     script.setAttribute("type","text/javascript");
     script.src = src;
     document.body.appendChild(script);
   }
    window.onload = function(){
     //调用远程服务     addScriptTag("http://localhost:/MyService.ashx?callback=person");
   }
   //回调函数person   function person(data) {
     alert(data.name + " is a " + data.sex);
   }
 </script>

　　这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用JSONP的。

jQuery对JSONP的实现

　　jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">  
 $.getJSON("http://localhost:20002/MyService.ashx?callback=?",
function(data){     alert(data.name + " is a a" + data.sex);   }); 
</script>

　　结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

　　当然，加入说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现(参数较多，详细可以参考http://api.jquery.com/jQuery.ajax)。先来看看如何实现吧：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">  
 $.ajax({     url:"http://localhost:20002/MyService.ashx?callback=?",      
dataType:"jsonp",     jsonpCallback:"person",     
success:function(data){       
alert(data.name + " is a a" + data.sex);     }  }); 
</script>

　　没错，jsonpCallback就是可以指定我们自己的回调方法名person，远程服务接受callback参数的值就不再是自动生成的回调名，而是person。dataType是指定按照JSOPN方式访问远程服务。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JSONP解決ajax跨域問題（附程式碼）

相關文章