高级就要跟后台打交道
MySQL My是数据库作者女儿的名字
开服务之后,页面如下:
问题:刷新之后,数值又恢复到100了
数据没有长久的存在一个地方
把数据100存到一个文件里
把html页面里的数值100替换成一个占位符
页面的显示数据是读取服务器里的值(类型为字符串)
然后每次点击,告诉服务器要减数据
点击付款:给服务器发post请求(不用 get,get请求是获取数据)
toUpperCase()变成大写
点击一下,然后给服务器发POST请求,然后服务器减一,然后页面读取服务器的数据显示
问题:浏览器会显示在当前页面
点击返回再点击刷新
显示文件里的数字
模拟一个失败的场景
用随机数来模拟
form表单一旦提交了,一定会刷新当前页面的
解决:增加iframe,在iframe里刷新
但是数字显示还是需要刷新下
如果不用form发请求,还可以用什么发请求?
a标签可以:但是需要用户点击
link可以:
script可以
图片可以:
这个方法的缺陷是没有POST,一定会去GET
image.onload就是图片请求成功了 通过状态码
image.onerror就是图片请求失败了 通过状态码
除了状态码,还需要一个真实图片
另外优化:点击成功之后帮用户刷新页面
window.location.reload()
方法二:在显示页面端数值也减一(除了在服务器端减一以外)
换用script来发请求
发现不行
需要把script放到body里才行
这个相比image是不用返回图片了
问题:用script是会执行的,如
每点击一次,script就会叠加一次
那么点击之后,就会执行script,然后浏览器会把pay里面的内容(alert("我是pay"))给执行掉
然后再执行unload事件
因为成功后既要执行pay里面的内容,又要执行unload事件,所以没必要,可以删掉unload事件
成功之后帮用户刷新下
刷新页面的体验不好,直接改值(在服务端)
问题:每点击一次付钱,就增加一个script
无论成功或失败都监听下,然后remove掉
server rendered javascript(上述方案名称)
服务器返回的javascript
/////////////////////////////////////////////////////////script可以访问其他域名
任何一个网站都可以使用另外一个网站的JS
重要操作不要用get请求
先有JSONP,再有AJAX
如果A网站的前端想跟B网站的后端交流,怎么办?
在自己目录下改hosts
:wq退出
开2个server,先弄2个端口
然后再打开一个窗口
该方案的缺点是:后端对前端的了解太深入了
页面中8001要去8002,8002成功后会去调用8001(前端)里的代码执行
JSONP要解决的问题就是2个网站之间要如何交流
JSON数据
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来写
请问JSONP为什么不支持POST请求?
因为JSONP是通过动态创建script实现的
动态创建script的时候只能用GET,没有办法用POST
用form表单,问题:提交会刷新页面
不用form用image,问题:image只能知道成功和失败,不知道更多的数据
不用image用script,问题:我如何让后端知道我要执行什么代码,加callback参数呗
script+callback参数就是JSONP了