爲什麼要寫這個短文?我在複習 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 啦。