请选择 进入手机版 | 继续访问电脑版

JSONP的衍生和应用

2018-12-6 09:37
1430
数据库

只要能长久地存数据,就是数据库

小案例:
点击按钮数字减1(点击按钮金额每次减少1)
  1. [/code][b]第一种方法:[/b]
  2. [code]
复制代码
上面的方法一旦刷新页面,金额又变成了100,不是我们想要的
第二种方法:
1.借用一个文件当作数据库保存每次的金额
(随便建一个什么类型的文件都可以,这里我直接用命令行新建了一个没有后缀的文件bd
  1. [/code]它里面存入我的原始金额100,也就是bd这个文件里就一个100
  2. 1. 将html里面的100换成一个占位符&&&amount&&&
  3. [code]
复制代码
下面的js代码和上面的一样,然后在node js里写
  1. [/code]这种方法和第一种方法的效果是一模一样的,也是一刷新页面数据就清空了
  2. [b]第三种方法:[/b]
  3. 在第二种方法的基础上,借用post请求来实现,页面刷新后数据也不会清掉;
  4. [code]
复制代码
node代码
  1. [/code]这种方法,就能每次得到的新的数值都会存在bd文件里,即使刷新也不会变,缺点:需要返回上一个页面才能看到现在的数值
  2. [b]上面的第三种方法主要问题就是因为:form表单提交后一定会刷新当前页面,并且会打开一个新的页面[/b]
  3. [size=5][b]想要不刷新当前页面的方法:[/b][/size]
  4. [b]1.引入一个空的iframe[/b]
  5. [code]
复制代码
2.不用form,用img标签创建请求,这种办法没有办法设置post方法,只能是get

JSONP的衍生和应用-1.jpg
  1. [/code]Node js:
  2. [code]
复制代码
注意这里用image需要真实的传入一张图片
刷新页面:Window.location.reload()
2. script发请求(会直接在页面里添加script标签,所以它里面的内容会执行)这个方案又叫SRJ:服务器返回的javascript(Server rendered javascript)
  1. [/code]Node js
  2. [code]
复制代码
两个不同网站之间的交互(一个作为前台页面展示,一个作为后台数据访问)

这里我设置的两个域名分别是:
wanglifa.com和jack.com
http://jack.com作为后台数据,用http://wanglifa.com访问它

1. 通过在hosts文件下设置两个默认网站域名:
找到/etc/hosts文件,用管理员身份运行编辑器
随便在本地ip上加两个网址

JSONP的衍生和应用-2.jpg
2. 开两个server
打开连个bash窗口,通过node server 8001r和node server 8002分别指定两个端口

JSONP的衍生和应用-3.jpg
由于上面在hosts里面制定了本机ip的两个默认网址
所以就可以通过http://wanglifa.com:8001,http://jack.com:8002来访问了,就相当于127.0.0.1:8001和127.0.0.1:8002

JSONP的衍生和应用-4.jpg
将点击按钮后跳转的链接改为
  1. [/code]这样在http://wanglif.com:8001里点击按钮,请求里就会看到http://jack.com
  2. JSONP的衍生和应用-5.jpg
  3. 说明不同网站之间可以通过SRJ访问
  4. [size=5][b]一个重要的变更(代码分离)[/b][/size]
  5. 因为上面的方案的缺陷,后台代码里面出现了前端页面的代码里的东西
  6. [code]
复制代码
上面的amount.innerText=amount.innerText-1就是前端页面的代码,这说明http://jack.com的后端程序元需要对http://wanglifa.com的页面细节了解的很清楚,这种情况叫做耦合。
解决办法:解耦
只需要在响应页面那里调用一个函数,然后在前台页面里声明这个函数,如果成功了就执行函数里面的内容,打印出success
node代码:
  1. [/code]前端代码:
  2. [code]
复制代码
JSONP的衍生和应用-6.jpg
问题:怎么能让后台知道我们前台页面的函数名那?
解决办法:
在script的路径里加上函数名字段
  1. [/code]后台代码只需要写成
  2. [code]
复制代码
就能获取到前台的函数名,然后调用了,这个方法就是JSONP

JSONP


JSONP的衍生和应用-7.jpg
上面代码高亮的部分就是JSON(一个键必须是双引号的对象)
JSON左边的代码就是左padding,右边就是右padding,所以JSONP=JSON +Padding
同样上面的代码${query.callbackName}.call(undefined,'success')
也叫StringP

详细解释什么是JSONP:
请求方:http://wanglifa.com的前端程序员(浏览器)
响应方:http://jack.com的后端程序员(服务器)
1. 请求方创建 script,src指向响应方,同时传一个查询参数?callbackName=xxx
2. 响应方根据查询参数callbackName,构造形如
1. xxx.call(undefined,‘你要的数据’)
2. xxx(‘你要的数据’)
这样的响应
3.浏览器接收到响应,就会执行xxx.call(undefined,‘你要的数据’)
4.那么请求方就知道了他要的数据
这就是JSONP
约定:
1. callbackName的名字要是callback
2. xxx要是一个随机数:wangliaf1233423454()
按照上面的约定改进之前的代码:
[code][/code]完整案例代码见:
wanglifa/server​github.com JSONP的衍生和应用-8.jpg 写代码时碰到的问题:
JSONP的衍生和应用-9.jpg
JSONP的衍生和应用-10.jpg
比如说我当前页面显示的余额是74,我如果在node里写response.write('success'),当我点击“点我付款1元”这个按钮后,需要刷新页面现在的值才能变成73,而如果我是在node那里写
response.write(`amount.innerText = amount.innerText -1`)
的话,我直接点击按钮就会从74变成73,可为什么当我再刷新页面后它就不会再减1,变成72那?

答:如果当前页面显示的数值是74,写response.write(`amount.innerText=amount.innerText-1`)前台页面直接减1,变成了73,而后台那个还是74,当你刷新后这时后台的也变成了74,也就是说response.write(`amount.innerText=amount.innerText-1`)这句代码不会改变你那个作为数据库的那个文件里面值,这里也引申出了后台服务器上的数据,只有在刷新页面后才能得到最新的数据,刷新就是在问服务器,如果不问服务器的话,就没法知道它的数据变了没有。
利用jQuery实现JSONP


JSONP的衍生和应用-11.jpg
Url里的路径无需写callback参数,他会自动给你加,这里要注意他不是ajax
面试题:为什么JSONP不支持POST请求?
答:1.因为JSONP是通过动态创建script实现的
2.动态创建script的时候只能用get,不能用post
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部