資訊專欄INFORMATION COLUMN
摘要：創(chuàng)造過程需求點(diǎn)擊按鈕存款減元純前端實(shí)現(xiàn)添加后端通過來實(shí)現(xiàn)需求通過來發(fā)送請求通過來發(fā)送請求的前端代碼能操作的后端代碼將第六步的代碼進(jìn)行更新就能變成第一個版本將的后端代碼中的路由代碼中的內(nèi)所有內(nèi)容剪切添加在的前端代碼開頭添加在服務(wù)端通知第二個版
JSONP創(chuàng)造過程
需求: 點(diǎn)擊按鈕, 存款減 1 元
純前端實(shí)現(xiàn): http://js.jirengu.com/vimugub...
添加后端, 通過 form 來實(shí)現(xiàn)需求: https://github.com/wojiaofeng...
通過 img 來發(fā)送請求: https://github.com/wojiaofeng...
通過 script 來發(fā)送請求: https://github.com/wojiaofeng...
rao.com 的前端代碼能操作 jack.com 的后端代碼: https://github.com/wojiaofeng...
將第六步的 demo 代碼進(jìn)行更新, 就能變成JSONP
第一個版本:
將 jack.com 的后端代碼中/pay的路由代碼中的 write 內(nèi)所有內(nèi)容剪切, 添加xxx.call(undefined, "success")
在rao.com 的前端代碼 script 開頭添加
window.xxx = function(){
alert("success在服務(wù)端通知")
}
第二個版本: 將后端代碼完全和前端代碼解耦
rao.com的前端代碼中的script.src后添加查詢參數(shù)?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內(nèi)的代碼寫delete window[functionName]
在jack.com的后端將${query.callbackName}變成${query.callback}
?
? ?JSONP的理解 JSONP 的實(shí)現(xiàn)步驟
請求方: rao.com 的前端程序員(瀏覽器)
響應(yīng)方: jack.com 的后端程序員(服務(wù)器)
請求方創(chuàng)建 script, src 指向響應(yīng)方, 同時傳一個查詢參數(shù)?callbackName=yyy434321
請求方寫好window.yyy434321函數(shù)
響應(yīng)方根據(jù)查詢參數(shù) callbackName, 構(gòu)造形如yyy434321.call(undefined, "你想要的數(shù)據(jù)AA")這樣的響應(yīng)
瀏覽器收到響應(yīng), 就會執(zhí)行 yyy434321.call(undefined, "你要的數(shù)據(jù)AA")
那么請求方就知道了他要的數(shù)據(jù)
JSONP的約定callbackName -> callback
yyy -> 隨機(jī)數(shù) yyy32132432()
jQuery的寫法:
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === "success"){
amount.innerText = amount.innerText - 1
}
}
})
JSONP問題
在 JSONP 的第二步, 不是已經(jīng)寫好了window.yyy434321函數(shù),直接執(zhí)行就好了,為什么要多此一舉,多寫這么多代碼?
答案: 因?yàn)樵?rao.com 前端的window.yyy434321這個函數(shù)一直在等待一個 result,而這個 result 又是 jack.com 后端傳給 rao.com 前端的
JSONP 是什么?在 JSONP 的實(shí)現(xiàn)步驟中, 第三步的你要的數(shù)據(jù)AA必須是 JSONP 格式, 它是從后端傳給前端的數(shù)據(jù)
而 P 則表示padding, 它表示 JSONP 的左右兩邊
JSONP === yyy434321.call(undefined, "你要的數(shù)據(jù)AA")
其中 yyy434321 是 jack.com 后端根據(jù) rao.com 的查詢參數(shù)產(chǎn)生的
你要的數(shù)據(jù)AA 則是 jack.com 后端傳給 rao.com 前端的 JSON 數(shù)據(jù)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90765.html
摘要：因?yàn)橥床呗缘南拗疲覀儾荒茉谂c外部服務(wù)器進(jìn)行通信的時候使用。這個是跨域服務(wù)器取數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務(wù)器。 一、同源策略 同源策略，它是由Netscape提出的一個著名的安全策略，現(xiàn)在所有的可支持javascript的瀏覽器都會使用這個策略。 為什么需要同源策略，這里舉個例子： 假設(shè)現(xiàn)在沒有同源策略，會發(fā)生什么事...
摘要：但是有可能還不太它內(nèi)部具體是如何實(shí)現(xiàn)一個的，從請求的發(fā)出，到指定的成功或失敗回調(diào)函數(shù)的執(zhí)行。服務(wù)端會解析請求的至少拿到一個回調(diào)函數(shù)比如參數(shù)之后將數(shù)據(jù)放入其中返回給客戶端。 前言 原文地址 倉庫地址 jsonp(JSON with padding)你一定不會陌生，前端向后端拿數(shù)據(jù)的方式之一，也是處理跨域請求的得利助手。 我們早已習(xí)慣，早已熟練了jQ或者zepto的ajax調(diào)用方式。但是...
摘要：逆向工程實(shí)踐篇二今天做了一個小實(shí)驗(yàn)隨便下載了一個替換首頁的圖片原來的是靜態(tài)的圖片我要給它換成網(wǎng)絡(luò)動態(tài)加載的圖片六步驟用把反編譯找到啟動的修改資源寫圖片加載的代碼測試打包收工一解包把下載好的使用工具解包二找到啟動的頁面首先大家應(yīng)該看確定第一個 Android逆向工程 實(shí)踐篇 二 今天做了一個小實(shí)驗(yàn). 隨便下載了一個apk.替換首頁的圖片, 原來的apk是靜態(tài)的圖片. 我要給它換成網(wǎng)絡(luò)動...
閱讀 3288·2023-04-25 18:03
閱讀 1151·2021-11-15 11:38
閱讀 5560·2021-10-25 09:45
閱讀 847·2021-09-24 09:48
閱讀 2303·2021-09-22 15:34
閱讀 1742·2019-08-30 15:44
閱讀 2685·2019-08-30 13:12
閱讀 609·2019-08-29 16:05
