五句话明白JSONP

RdouTyping 发布于2019-08-21 18:44 / 1955人阅读

摘要：创造过程需求点击按钮存款减元纯前端实现添加后端通过来实现需求通过来发送请求通过来发送请求的前端代码能操作的后端代码将第六步的代码进行更新就能变成第一个版本将的后端代码中的路由代码中的内所有内容剪切添加在的前端代码开头添加在服务端通知第二个版

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云服务器五句话我明白了明白人对这些不太明白

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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