进阶课程就是开始和后端打交道
- 什么是数据库呢? 就是能长久存数据的地方就是数据库,文件系统就是在数据库的基础上的数据管理系统 ,有的人会将两者统称为数据库// 因为数据存放也是需要管理的~~~
- 老师利用之前的nodejs server代码做出了点击一个页面的按钮就可以改变数值的功能
// 其中注意一点,字串要改变成数字类型 - 当这个页面刷新的时候你会发现,页面上的数字又变回100 ,不能保存,这时候就体现出数据库的作用了,数据库就是用了存储数据的,或者说是记录数字,下次再点进来就知道还剩下多少
这个过程中的思路:
1.页面上的数字,被按钮点击就可以改变,可是更新后发现,数字又变回去了~!怎么办???
2.我们要用一种技术把那个数字变成可以记忆的
3.这时候数据库就登场了~~可以就在项目文件旁边新建立一个空文件,里面存你所需要的数字,一个简单的数据库就形成了~~数据库就那么简单,就是那么一回事
4.如何把这个数据库里面的数字变成页面上的数字呢?用NOdejs代码实现,首先在index.hrml上用一个占位符表示那个数字,然后用nodejs代码把那个占位符替换成数据库里面的数字
//付款思路:
- 让数据库来记忆这个付款后的金额,这样就保证了数据的真实性,而不是页面的假数据,刷新变回100(我们要的是,用了多少还剩多少都能记录的真数据)
- 这样子的做法,就是前段来负责发送请求,后端来操作这个金额占位符,说白了这个逻辑整体基本是后端在干活,后端从数据库里面保存一个客户的剩余金额,当前段发送请求,也就是客户在页面上操作的时候,发送请求到后端,后端从数据库里面取出对应客户的剩余金额,根据前端发来的请求,进行相应的金额增减,然后再放回到数据库里面,这样一个真实的余额操作就实现了
- 逻辑实现了,后端还要返回一些东西,让前端那边刷新页面,显示金额变少或者变多了,因为你不给数据前端,前端就停留在以前的页面了,这一步可以说是用户体验的一步,实际上付款逻辑已经完成了,要页面显示这种逻辑结果
5.功能的实现:通过浏览器发送post请求,来和服务器交互,让浏览器去请求把数据库里面的数字改变,并保存
//以上是旧时代的前后端交互的过程
//其中有个小细节,后端返回的东西显示在前端的当前页面,由于课堂代码返回的是成功,并且把'成功'字符串显示在当前前端页面,可是这样的用户体验太差了~,这就导致后面的一系列事情的发生
//其中有个小细节,html里面有的标签是发送请求的,具体是post还get要看哪个标签,其中form表单标签是发送post请求//那时候为了体验还用了iflame标签
//2005年之前全世界的付款都是这样子操作的
2005年之后,程序员之间开始思考有什么办法可以实现支付功能的前提下,不影响体验,一下内容都是围绕这个目的而产生的
//这就是为什么明明后端都返回成功或者失败的信号,也就是状态200或者400,前端代码还要写显示成功或者失败的效果代码,因为用户要看的啊,他要知道成功了或者失败了,难道要用户去用开发者工具查看状态码吗?这不是扯淡吗? 用户又不是程序员o(╥﹏╥)o
随之出现了很多种方法,利用<img>,和在body里面的<script>.....这些可以直接发送请求的标签来代替之前的iframe方法,来提高用户体验,不过又出现新的问题,就是这个标签只能发送get请求不能发post请求
//最终的方案是放弃刷新页面,前端代码不告诉用户成功或者失败,直接让余额来显示,多了或者少了,既不用刷新页面也增加了用户体验.
//这个script发送必须是包裹在body里面才有效.~~~前端们发现的<a>等可以发送请求的标签来代替,但是这些都不是最终方案
//自从用了script之后,程序员又发现了新大陆. 因为script不是img不再返回图片了,响应更快了,而且发现了一个新问题,因为用的是script标签,script返回的代码,浏览器是会执行的,因此,他们就更进了一步,直接让后端返回可以执行的前端代码,那么就不用让前端来刷新页面了,和渲染余额的增减效果,而是直接让后端返回并且执行这些代码
这就是这些代码的由来
response.write
amount.innerTwxt = amount.innerText -1
//因为用的是script标签,所以后端返回的JavaScript字串,会被浏览器执行,所以干脆让前端的代码写在后端上面
//这种技术就叫SRJ
// 以前的方案具体实现,请回去看视频,这是程序员为了提高用户体验绞尽脑汁的过程~~~!!很值得回味一下
- 可以跨网页使用script代码,//也就是说两个网站之间是可以互相访问的
- 牵涉到安全问题,打钱都是post请求,get请求是很危险的
JSONP
请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）
请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应
浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
这就是 JSONP
很简单，就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.example.net/api?param1=1¶m2=2"></script> 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
