2018-01-26 JSONP是什么鬼

高级就要跟后台打交道
MySQL My是数据库作者女儿的名字

image.png

开服务之后，页面如下：

image.png

问题：刷新之后，数值又恢复到100了
数据没有长久的存在一个地方

把数据100存到一个文件里
把html页面里的数值100替换成一个占位符
页面的显示数据是读取服务器里的值（类型为字符串）
然后每次点击，告诉服务器要减数据
点击付款：给服务器发post请求（不用 get，get请求是获取数据）

image.png

toUpperCase()变成大写
点击一下，然后给服务器发POST请求，然后服务器减一，然后页面读取服务器的数据显示

image.png

image.png

image.png

问题：浏览器会显示在当前页面

image.png

image.png

点击返回再点击刷新

image.png

显示文件里的数字

模拟一个失败的场景
用随机数来模拟

image.png

form表单一旦提交了，一定会刷新当前页面的
解决：增加iframe，在iframe里刷新

image.png

但是数字显示还是需要刷新下

如果不用form发请求，还可以用什么发请求？
a标签可以：但是需要用户点击
link可以：
script可以
图片可以：

image.png

image.png

这个方法的缺陷是没有POST，一定会去GET
image.onload就是图片请求成功了 通过状态码
image.onerror就是图片请求失败了 通过状态码

除了状态码，还需要一个真实图片

另外优化：点击成功之后帮用户刷新页面
window.location.reload()
方法二：在显示页面端数值也减一（除了在服务器端减一以外）

image.png

换用script来发请求

image.png

发现不行

需要把script放到body里才行

image.png

这个相比image是不用返回图片了
问题：用script是会执行的，如

image.png

image.png

每点击一次，script就会叠加一次

添加

image.png

那么点击之后，就会执行script，然后浏览器会把pay里面的内容（alert("我是pay")）给执行掉
然后再执行unload事件

因为成功后既要执行pay里面的内容，又要执行unload事件，所以没必要，可以删掉unload事件

image.png

成功之后帮用户刷新下

image.png

刷新页面的体验不好，直接改值（在服务端）

image.png

问题：每点击一次付钱，就增加一个script
无论成功或失败都监听下，然后remove掉

image.png

server rendered javascript（上述方案名称）
服务器返回的javascript

/////////////////////////////////////////////////////////script可以访问其他域名
任何一个网站都可以使用另外一个网站的JS

重要操作不要用get请求
先有JSONP，再有AJAX

如果A网站的前端想跟B网站的后端交流，怎么办？

image.png

在自己目录下改hosts

image.png

:wq退出

开2个server，先弄2个端口

image.png

image.png

然后再打开一个窗口

image.png

修改script的访问地址：

image.png

image.png

该方案的缺点是：后端对前端的了解太深入了

image.png

页面中8001要去8002,8002成功后会去调用8001（前端）里的代码执行

image.png

image.png

JSONP要解决的问题就是2个网站之间要如何交流

image.png

JSON数据

image.png

JSONP
请求方：frank.com的前端程序员（浏览器）
响应方：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一般是用随机数

用jquery来写

image.png

image.png

请问JSONP为什么不支持POST请求？
因为JSONP是通过动态创建script实现的
动态创建script的时候只能用GET，没有办法用POST

用form表单，问题：提交会刷新页面
不用form用image，问题：image只能知道成功和失败，不知道更多的数据
不用image用script，问题：我如何让后端知道我要执行什么代码，加callback参数呗
script+callback参数就是JSONP了