理解回調函數與jsonp的原理(個人理解)

首先說下回調函數(js爲例,java的等語言將參數換做類class類比):

舉例子來說:

function A(b){
xxxxx
b.call(this,’hello’);
}

function B(args){
console.log(args);
}

下面這個例子:A的參數接受一個function,將B作爲參數創遞給A入參,那麼B就叫回調函數。(xxxx代表A函數自己的操作,自身操作完成後,可能會得到傳給B的參數args的值這時將結果作爲參數傳給B,B是在邏輯之後的操作,叫回調)。

下面說下jsonp,這個可以跨域的解決方法,思想是,html標籤中link標籤和script標籤是可以引用外部資源的,例如引入jquery的cdn之類的。因此瀏覽器不允許我們在ajax時直接訪問別的域,那麼我們就使用這種構造script標籤的方式來做跨域(link標籤引用css樣式,不是腳本,放棄這種db的想法吧。。。)。

網上的jsonp原理:

首先在客戶端註冊一個callback (如:’jsoncallback’), 然後把callback的名字(如:jsonp1236827957501)傳給服務器。注意:服務端得到callback的數值後,要用jsonp1236827957501(……)把將要輸出的json內容包括起來,此時,服務器生成 json 數據才能被客戶端正確接收。
然後以 javascript 語法的方式,生成一個function , function 名字就是傳遞上來的參數 ‘jsoncallback’的值 jsonp1236827957501 .
最後將 json 數據直接以入參的方式,放置到 function 中,這樣就生成了一段 js 語法的文檔,返回給客戶端。
客戶端瀏覽器,解析script標籤,並執行返回的 javascript 文檔,此時javascript文檔數據,作爲參數,
傳入到了客戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裏.(動態執行回調函數)

一大堆,不免有些頭暈,這裏簡單說一下吧:

$.ajax({
            type       : 
            url        : 
            dataType   : 'jsonp'
            data       : 
            jsonp      : 'callback'
            success    : function(res)  { 
             },
          error     : function (err) {
          }
  });

以jsonp的標準代碼爲例,其實是,客戶端也就是瀏覽器構造了一個script標籤,並將url賦給script標籤的url,這樣script標籤會被解析,並把callback參數=jsonp的值(這裏就是’callback’)作爲參數以get形式發送過去,服務端計算的結果後,返回時將返回值拼接到function的入參中(fucntion這個數據串由服務端按照js語法生成,function名字是由callback參數而定),這些數據返回瀏覽器,這樣的過程其實就跟請求一個js文件差不多,接着該執行js中的代碼了,也就是服務端把參數給我們填好的function。接着問題就來了,怎麼執行我們寫的success和error呢?其實這兩個function的名字都已經訂好了,一個叫success,一個叫error,那麼固定的名字就可以在服務端生成function代碼時直接定義出來,拿到瀏覽器直接執行,這兩個函數爲啥叫回調可以清楚了,就是上面所講的那種回調形式,success和error被服務端返回的function執行,參數入參也是function內部定義好的,例如:success.call(this,’args’)。這就更明顯是個回調了。(個人對這個原理的一些理解,有不嚴謹和不謹慎的地方請大家多評論批評)。

演示圖

!!PS:補充一句

jsonp:遇到405的情況:由於請求的服務端不接受GET請求造成的結果。有同學會說,我在請求時將type參數改成POST不就行了??剛纔說過,原理是使用script標籤進行的,標籤默認就是GET請求,標籤沒有位置讓你設置POST,所以,只能說。。。愛莫能助,換個服務端吧。。。

發佈了140 篇原創文章 · 獲贊 51 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章