一分鐘瞭解 JSONP

爲什麼要寫這個短文?我在複習 JSONP 知識的時候,隨便搜了幾篇文章看,額......後來就有了寫它的想法。

首先,頁面中的<script>標籤裏面放的是 js 代碼,而加上 src 屬性後<script>標籤就有了加載和運行外部 js 代碼的能力。

於是,不法分子們就抓住這個漏洞,開始了與瀏覽器的同源策略做鬥爭,打了場勝仗。

加上 src 屬性的 script 標籤,是利用 HTTP 的 GET 方法去訪問你指定的 url 的,
它預期會 GET 到一個 js 文件或者是一段 js 代碼,然後瀏覽器會去執行它。

於是呢,所謂的 JSONP 就相當於是利用 GET 到的這一段 js 代碼的方式。

使用方法就是:
1、前後端相互溝通好,前端定義好一個函數,用來解析異步請求的數據。
例子:

function ajax(result) {
  // 處理 result
}

2、後端寫一個接口,告訴前端你請求我接口的時候要加上 function 這個參數,然後返回這個函數的執行方式。
例子:

// 接口:http://www.abc.com/api?function=ajax
// 後端得到 function 參數的這個前端定義的函數名,示例是 ajax,然後像下面這樣組合好後返回:
// return 'ajax(1)';

3、前端在 script 標籤裏的 src 屬性設置爲這個接口。
例子:

<script src="http://www.abc.com/api?function=ajax">

這個時候,瀏覽器就會去 GET 請求接口,然後 script 標籤得到 ajax(1) 這個 js 代碼,然後瀏覽器開始執行它,因爲你事先已經定義過 ajax 函數了,所以 ajax(1) 會正常運行。

但是,第三步需要是異步請求,那麼就在需要做請求操作的地方,利用 js 生成這段 script 標籤放到 <head> 裏面就行了(或者是把 src 用js動態改一下,這個我倒是沒有試過)。

這就是 JSONP 啦。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章