一分鐘瞭解 JSONP

時間 2019-11-05

標籤一分鐘瞭解 jsonp 欄目 JSON 简体版

原文原文鏈接

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

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

因而，不法分子們就抓住這個漏洞，開始了與瀏覽器的同源策略作鬥爭，打了場勝仗。ajax

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

因而呢，所謂的 JSONP 就至關因而利用 GET 到的這一段 js 代碼的方式。api

使用方法就是：
一、先後端相互溝通好，前端定義好一個函數，用來解析異步請求的數據。
例子：瀏覽器

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

二、後端寫一個接口，告訴前端你請求我接口的時候要加上 function 這個參數，而後返回這個函數的執行方式。
例子：異步

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

三、前端在 script 標籤裏的 src 屬性設置爲這個接口。
例子：函數

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

這個時候，瀏覽器就會去 GET 請求接口，而後 script 標籤獲得 ajax(1) 這個 js 代碼，而後瀏覽器開始執行它，由於你事先已經定義過 ajax 函數了，因此 ajax(1) 會正常運行。url

可是，第三步須要是異步請求，那麼就在須要作請求操做的地方，利用 js 生成這段 script 標籤放到 <head> 裏面就好了（或者是把 src 用js動態改一下，這個我卻是沒有試過）。code

這就是 JSONP 啦。

相關標籤/搜索

每日一句

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