VUE JSONP的誕生 原理及應用例項

2022-03-05 17:47:00 字數 1668 閱讀 1395

頁面中有乙個按鈕,點選之後會更新網頁中的乙個盒子的內容。

ajax可以很容易的滿足這種無須重新整理整個頁面就可以實現資料變換的需求。

但是,ajax有乙個缺點,就是他不允許跨域請求資源。

如果我的**在codepen上,我不能將我的資料放到codepen**上,那麼我只能放到我自己的伺服器中,這樣的話,就無法通過ajax訪問到這個資料了。

想要實現這種跨域資源請求,有很多解決辦法,列舉出一部分:

讓伺服器來載入遠端資料,然後在使用者請求時提供給瀏覽器。

localhost:

這樣,localhost就已經可以使用jsonhost中的資料了。然後localhost說,我希望可以在我的使用者點選一次按扭時,就執行一遍callbackfunction(json),而不是頁面載入後執行一次。於是他就需要動態的建立

otherhost:

這樣一來,使用什麼函式名都是不同host自己的事情,他們互不干擾,jsonhost也不用操心這件事,專心提供資料就可以了。其他host也紛紛前來獲取json。於是這種模式被廣泛使用,然後這種通訊方式就被命名為「jsonp」。如果用jquery的話,就不用自己命名函式並傳遞給引數了,因為這個函式名一點也不重要,他只是個代號而已,jquery會幫我們自動生成乙個函式名,然後將得到的資料傳給這個函式。jquery還會幫我們建立script標籤, 我們只要關心如何處理這個資料就好了。知道了原理之後,迫不及待的想要用一下jsonp來獲取資料。這裡用php來實現。

有了自己的伺服器和php執行環境之後,就可以開始了。想要在codepen上獲取本地資料。

本機php:

<?php 

$quotes = '[,,,

,,,]';

echo $_get['callback'] . "(" . $quotes . ")";

?>

codepen上的js:

function update()).fadein(600);

});}$(document).ready(function());

而且要注意把codepen的https改成http。成功之後可以看到,傳送的請求中,傳給callback的是乙個jquery自動生成的函式:

返回的也是這個函式呼叫資料:

如果不想自己配置的話,可以應用其他**提供的api,實現原理是一樣的。demo

參考:

flink執行原理 Flink基本原理及應用場景

在大資料處理領域,批處理任務和流處理任務一般被認為是兩種不同的任務,乙個大資料框架一般會被設計為只能處理其中一種任務 例如storm只支援流處理任務,而mapreduce spark只支援批處理任務。spark streaming是採用了一種micro batch的架構,即把輸入的資料流且分為細粒度...

sitemesh教程 頁面裝飾技術原理及應用

sitemesh是一種頁面裝飾技術 它通過過濾器 filter 來攔截頁面訪問,據被訪問頁面的url找到合適的裝飾模板等等,感興趣的朋友可以了解下哦 一,基本概念 1,sitemesh是一種頁面裝飾技術 1 它通過過濾器 filter 來攔截頁面訪問 2 根據被訪問頁面的url找到合適的裝飾模板 3...

ldpc解碼講解 LDPC碼編譯碼原理及應用

ldpc 碼編譯碼原理及應用 下一代移動通訊系統的設計能力將遠遠超過當前的第三代移動通訊系統的 能力其中乙個最重要的特點表現在需要在 20m赫茲的頻寬內 實現高達 100mbps 的資料傳輸。因此 在如此高的頻譜效率下如何保證資料通訊的可靠性 也就成了乙個非常值得關注的課題。以通道編碼為核心內容的前...