前端請求進化之路--從form表單到JSONP

fxyf1991發表於2018-01-23

簡單梳理前端請求的變遷史,著重對JSONP進行整理


請求演變

  1. 使用form表單提交請求,缺點是每次提交必定會重新整理頁面
  2. 在1基礎之上使用iframe進行區域性重新整理,使用者體驗得到一定優化
  3. 動態建立圖片提交請求
    • 注意請求與返回內容型別須一致
    • 每次必須返回圖片較為不便
  4. 動態建立script提交請求(即JSONP)
    • 注意script必須在插入頁面後(可使用append方法)才會提交請求
    • 為了不重新整理頁面可依據後端資料庫變化情況同時對前端頁面內容進行同步更新
    • script載入完成後可將其移除
    • 提交請求時可直接講callback值傳入

JSONP定義:

  1. 請求方建立 script,src 指向響應方,同時傳一個查詢引數 ?callback=xxx

  2. 響應方根據查詢引數 callback,構造形如

    • xxx.call(undefined, '你要的資料')
    • xxx('你要的資料')

    這樣的響應

  3. 瀏覽器接收到響應,就會執行 xxx.call(undefined, '你要的資料')

  4. 那麼請求方就知道了他要的資料

相關文章