簡析jsonp原理

時間 2019-12-06

標籤 jsonp 原理欄目 JSON 简体版

原文原文鏈接

相信大部分前端都遇到過跨域問題，也知道能夠用jsonp處理跨域。像jquery，extjs等一些流行的庫已經爲咱們封裝好了jsonp的解決方案，咱們能夠很方便的來使用。接下來咱們實際案例來簡單的講一下它的基本原理。html

咱們都知道ajax請求時，因爲同源策略，會產生跨域，可是html標籤的src屬性是自帶跨域功能的，好比img，script，link等，jsonp就是利用script標籤的src屬性來實現協商跨域。另外咱們也知道，當網頁加載完js文件後，就會去執行這個js腳本。所以服務器能夠把數據塞到這個腳本里返回給前端去處理。前端

咱們先看一個簡單的例子

一個本地頁面jquery

<html>
<head>
<script src="https://xxx.remote.com/jsonp.js"></script>
</head>
<body></body>
</html>複製代碼

遠程服務器的js文件git

alert('我是遠程文件');複製代碼

這時咱們會看到頁面上彈出一個alert警告框，那若是咱們把參數換成前端須要的數據，函數名設爲前端用來處理返回數據的方法，那不就完成了咱們的需求嘛，既拿到了想要的數據，而且能夠按照咱們想要的方式去處理數據。github

結合callback參數

爲了方便測試，我事先在服務器上放了一個js文件
ajax

callbackHandler({ result: 'i am the jsonp result' });
// 就是簡單的執行一個js函數，在本例中我把函數名和參數都寫死了。
實際應用場景中，參數應爲前端所請求的數據，函數名稱爲前端請求時callback參數的value值，
而且由服務器來動態生成的這個js文件返回給前端
複製代碼

本地頁面json

<html>
<head>
<script charset="utf-8">
    function callbackHandler(data) {
        console.log(data);
    }
</script>
<script src="https://xxx.remote.com/jsonp.js?callback=callbackHandler"></script>
</head>
<body></body>
</html>複製代碼

截圖、測試Demo

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。