五句話明白JSONP

RdouTyping 發布于2019-08-21 18:44 / 2047人閱讀

摘要：創造過程需求點擊按鈕存款減元純前端實現添加后端通過來實現需求通過來發送請求通過來發送請求的前端代碼能操作的后端代碼將第六步的代碼進行更新就能變成第一個版本將的后端代碼中的路由代碼中的內所有內容剪切添加在的前端代碼開頭添加在服務端通知第二個版

JSONP創造過程

需求: 點擊按鈕, 存款減 1 元

純前端實現: http://js.jirengu.com/vimugub...

添加后端, 通過 form 來實現需求: https://github.com/wojiaofeng...

通過 img 來發送請求: https://github.com/wojiaofeng...

通過 script 來發送請求: https://github.com/wojiaofeng...

rao.com 的前端代碼能操作 jack.com 的后端代碼: https://github.com/wojiaofeng...

將第六步的 demo 代碼進行更新, 就能變成JSONP

第一個版本:

將 jack.com 的后端代碼中/pay的路由代碼中的 write 內所有內容剪切, 添加xxx.call(undefined, "success")

在rao.com 的前端代碼 script 開頭添加

window.xxx = function(){
  alert("success在服務端通知")
}

第二個版本: 將后端代碼完全和前端代碼解耦

rao.com的前端代碼中的script.src后添加查詢參數?callbackName=xxx

jack.com后端代碼, 將xxx.call變成${query.callbackName}

第三個版本: 將 string padding 變成JSON padding

將jack的后端代碼中write中的"success"刪除, 變成如下:

{
  "zzz": "success",
  "left": ${newAount}
}

將前端代碼中的window.xxx的代碼變成:

window.xxx = function(result){
  alert(result["zzz"])
  number.innerText = result["left"]
}

第四版: 將其變成符合約定的 JSONP

將rao.com的前端代碼的callbackName 變成callback

在rao.com的前端代碼中, 在addEventListener中添加

let functionName = "rao" + parseInt(Math.random() * 10000)

將window.xxx變成

window[functionName] = function(result){
  alert(result["zzz"])
  number.innerText = result["left"] 
}

將?callback=xxx變成?callback=" + functionName

在onload內的代碼寫delete window[functionName]

在jack.com的后端將${query.callbackName}變成${query.callback}

  ?

  ?

JSONP的理解 JSONP 的實現步驟

請求方: rao.com 的前端程序員(瀏覽器)
響應方: jack.com 的后端程序員(服務器)

請求方創建 script, src 指向響應方, 同時傳一個查詢參數?callbackName=yyy434321

請求方寫好window.yyy434321函數

響應方根據查詢參數 callbackName, 構造形如yyy434321.call(undefined, "你想要的數據AA")這樣的響應

瀏覽器收到響應, 就會執行 yyy434321.call(undefined, "你要的數據AA")

那么請求方就知道了他要的數據

JSONP的約定

callbackName -> callback

yyy -> 隨機數 yyy32132432()

jQuery的寫法:

 $.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === "success"){
     amount.innerText = amount.innerText - 1
     }
 }
 })

JSONP問題

在 JSONP 的第二步, 不是已經寫好了window.yyy434321函數,直接執行就好了,為什么要多此一舉,多寫這么多代碼?

答案: 因為在 rao.com 前端的window.yyy434321這個函數一直在等待一個 result,而這個 result 又是 jack.com 后端傳給 rao.com 前端的

JSONP 是什么?

在 JSONP 的實現步驟中, 第三步的你要的數據AA必須是 JSONP 格式, 它是從后端傳給前端的數據

而 P 則表示padding, 它表示 JSONP 的左右兩邊

JSONP === yyy434321.call(undefined, "你要的數據AA")

其中 yyy434321 是 jack.com 后端根據 rao.com 的查詢參數產生的

你要的數據AA 則是 jack.com 后端傳給 rao.com 前端的 JSON 數據

云服務器 GPU云服務器五句話我明白了明白人對這些不太明白

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90765.html

關于javascript跨域及JSONP的原理與應用

摘要：因為同源策略的限制，我們不能在與外部服務器進行通信的時候使用。這個是跨域服務器取數據的接口，參數為回調函數的名字，返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務器。一、同源策略同源策略，它是由Netscape提出的一個著名的安全策略，現在所有的可支持javascript的瀏覽器都會使用這個策略。為什么需要同源策略，這里舉個例子：假設現在沒有同源策略，會發生什么事...

CoderBear 2019-08-21 10:23 評論0 收藏0
原來你是這樣的jsonp(原理與具體實現細節)

摘要：但是有可能還不太它內部具體是如何實現一個的，從請求的發出，到指定的成功或失敗回調函數的執行。服務端會解析請求的至少拿到一個回調函數比如參數之后將數據放入其中返回給客戶端。前言原文地址倉庫地址 jsonp(JSON with padding)你一定不會陌生，前端向后端拿數據的方式之一，也是處理跨域請求的得利助手。我們早已習慣，早已熟練了jQ或者zepto的ajax調用方式。但是...

DangoSky 2019-08-21 11:44 評論0 收藏0
Android逆向工程實踐篇二

摘要：逆向工程實踐篇二今天做了一個小實驗隨便下載了一個替換首頁的圖片原來的是靜態的圖片我要給它換成網絡動態加載的圖片六步驟用把反編譯找到啟動的修改資源寫圖片加載的代碼測試打包收工一解包把下載好的使用工具解包二找到啟動的頁面首先大家應該看確定第一個 Android逆向工程實踐篇二今天做了一個小實驗. 隨便下載了一個apk.替換首頁的圖片, 原來的apk是靜態的圖片. 我要給它換成網絡動...

blankyao 2019-08-15 10:37 評論0 收藏0