小編給大家分享一下jsonp原理的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司主營通州網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app開發(fā)定制,通州h5成都微信小程序搭建,通州網(wǎng)站營銷推廣歡迎通州等地區(qū)企業(yè)咨詢

一：跨域問題。

二，跨域產(chǎn)生的原因

Js是不能跨域請求。出于安全考慮，js設計時不可以跨域。

什么是跨域：

1、域名不同時。

2、域名相同，端口不同。

只有域名相同、端口相同時，才可以訪問。

可以使用jsonp解決跨域問題。

三，跨域失敗的案例 3.1，同源策略

首先基于安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性?？雌饋聿恢朗裁匆馑?，實踐一下就知道了。

3.2，隨便建兩個網(wǎng)頁

一個端口是2698，一個2701，按照定義它們是不同源的。

3.3，用jQuery發(fā)起不同源的請求

在2698端口的網(wǎng)頁上添加一個按鈕，Click事件隨便發(fā)起兩個向端口為2701域的請求。

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
console.log(data)
})

$.get("http://localhost:2701/home/index", function (data) {
console.log(data)
})
})

根據(jù)同源策略，很明顯會悲劇了。瀏覽器會阻止，根本不會發(fā)起這個請求。（not allowed by Access-Control-Allow-Origin）

OK，原來jsonp是要解決這個問題的。

換句話就是說在一個src中或者一個url中直接去請求了另一個項目的json數(shù)據(jù)。

例如在端口是8080的項目中的頁面的url中直接去請求了一個http://localhost:8081/category.json這個語句，而這個category.json就在8081的webapp的目錄下，就會產(chǎn)生跨域請求的提示。

四，跨域的解決方法 4.1，啟發(fā)

我們有時候在項目中經(jīng)常能看到這樣的代碼

這樣即使不在同一個項目中，也可以請求成功。就是利用了這個漏洞，或者說是技術吧，來實現(xiàn)的寬裕的請求。

4.2，方法（案例一） 4.2.1，利用script獲取不同源的json

既然它叫jsonp，很明顯目的還是json，而且是跨域獲取。根據(jù)上面的分析，很容易想到：利用js構造一個script標簽，把json的url賦給script的scr屬性，把這個script插入到dom里，讓瀏覽器去獲取。實踐：

function CreateScript(src) {
 $("

程序B中test.js的代碼：
1 //調用callback函數(shù)，并以json數(shù)據(jù)形式作為闡述傳遞，完成回調
2 callback({message:"success"});
這其實就是JSONP的簡單實現(xiàn)模式，或者說是JSONP的原型：創(chuàng)建一個回調函數(shù)，然后在遠程服務上調用這個函數(shù)并且將JSON 數(shù)據(jù)形式作為參數(shù)傳遞，完成回調。

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

一般情況下，我們希望這個script標簽能夠動態(tài)的調用，而不是像上面因為固定在html里面所以沒等頁面顯示就執(zhí)行了，很不靈活。我們可以通過javascript動態(tài)的創(chuàng)建script標簽，這樣我們就可以靈活調用遠程服務了。

4.3.2，簡單應用的升級以一

程序A中sample的部分代碼：

function callback(data) {
alert(data.message);
}
//添加

程序B的test.js代碼不變，我們再執(zhí)行下程序，是不是和原來的一樣呢。如果我們再想調用一個遠程服務的話，只要添加addScriptTag方法，傳入遠程服務的src值就可以了。這里說明下為什么要將addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，這個script標簽是被添加到body里的，由于我們寫的javascript代碼是在head標簽中，document.body還沒有初始化完畢呢，所以我們要通過window.onload方法先初始化頁面，這樣才不會出錯。

這樣這個http://localhost:20002/test.js路徑就可以動態(tài)的變化了。

4.3.3，簡單應用的升級二

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

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

//添加

這個result方法是自己定義的，可能服務器上有千千萬萬個類似于result 的回調函數(shù)，但是我現(xiàn)在要的就是result而不是其它的方法，所以在這里自己定義回調方法。而不是寫死的?？赡芟乱淮挝揖透某蓃esult1，result2，result3，等了只要自己把回調方法的名稱改一下就行了。

4.4.4,jquery對jsonp的支持

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

 $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
  alert(data.name + " is a a" + data.sex);
 });

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

當然，加入說我們想指定自己的回調函數(shù)名，或者說服務上規(guī)定了固定回調函數(shù)名該怎么辦呢？我們可以使用$.ajax方法來實現(xiàn)(參數(shù)較多，詳細可以參考http://api.jquery.com/jQuery.ajax)。先來看看如何實現(xiàn)吧：

 $.ajax({
  url:"http://localhost:20002/MyService.ashx?callback=?", 
  dataType:"jsonp",
  jsonpCallback:"person",
  success:function(data){
   alert(data.name + " is a a" + data.sex);
  }
 });

沒錯，jsonpCallback就是可以指定我們自己的回調方法名person，遠程服務接受callback參數(shù)的值就不再是自動生成的回調名，而是person。dataType是指定按照JSOPN方式訪問遠程服務。

以上是“jsonp原理的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！