摘要:显然不能发起一个请求,所以使用,表单是可以发起一个请求的,而且可以指定请求的方式。发送请求我们发现,居然也能发送请求,那更好了,请求返回的是空字符串,那可比图片小多了。
数据库
有时候,我们需要长久的存储数据,不随着外界因素的改变而改变,这样的数据栖息地可以称之为数据库。
version1.0-表面工作 建立一个扣款功能做例子存在的问题pay 您的账户余额: 100
之所以称之为表面,是因为,所有的操作都是表面现象,当页面刷新时,一切都会回到初始状态。而且,别人很容易就能够获取你的信息。最好是,我们去调取数据库里你的信息,然后显示在页面上。
version2.0-将操作在后端进行以往,我们是在前端的代码中去改用户的余额。现在,不,我们去后端直接改数据库里的余额,然后,把后端数据库的金额显示在前端页面上。而前端用来向后端发起一个请求,请求更改数据库里的余额。
存在的问题
过时。虽然不需要再按返回了,但是还是需要刷新页面才能看到真正的余额。
version3.2-既然,我们不希望页面刷新,那我们就得换一个方式发送请求。铛铛铛铛!这就是!不过
只能发送get请求,不过,方法先进,用户体验良好,get也可以接受。
前端代码:
注意!功能是在js里实现的
当点击
>使用Javascript写的后端代码:
与之前区别在于,这次不需要要用到刷新页面,当然刷新页面功能也没问题
与之前区别在于,这次返回的是一张图片response.write(fs.readFileSync(你的图片路径));
//和之前一样,读取数据库中金额,并显示在页面上,但这里并不一定会用到这些代码,因为我们不需要刷新页面了 if(path === "./"){ var index_string = fs.readFileSync("./index.html","utf8"); var amount = fs.readFileSync("./db","utf8"); index_string.replace("$$amount$$",amount); response.setHeader("Content-type","text/html;charset=utf-8"); response.write(string); response.end(); } //修改数据库中金额,成功后返回一张图片 else if(path === "/pay"){ var amount = fs.readFileSync("./db","utf8"); var newAmount = amount - 1; fs.writeFileSync("./db",newAmount); response.setHeader("Content-type","image/jpg"); response.write(fs.readFileSync(你的图片路径)); response.end(); }优点
不用像`
之前的思路:修改后端数据库 → 获取数据库金额显示在页面上(需要刷新页面获得显示)
现在的思路:修改后端数据库 → 修改成功后,直接修改页面显示(不刷新);获得数据库金额(刷新)
成功、失败的提示依赖alert(),不像之前需要新的页面
机智的地方在:虽然建立了标签,也成功获取了一张图片,但是图片并没有显示出来,因为,我们只是在js里创建了
标签,并没有把它加到页面里,没有append()到哪里去。所以,我们利用了
能够发送请求的特点,而没有真正的显示出图片。
哇!这样已经很好了,可以返回一个大小很小的图片呀,或者什么乱起八糟的图片。但是,图片毕竟是图片,返回一张图片会影响响应速度。
version3.3-您的账户余额: $$amount$$
>使用Javascript写的后端代码:
与之前区别在于,这次不需要要用到刷新页面,当然刷新页面功能也没问题
与之前区别在于,这次返回的是空字符串response.write("");
//和优化-1发送请求时的没有区别 if(path === "./"){ var index_string = fs.readFileSync("./index.html","utf8"); var amount = fs.readFileSync("./db","utf8"); index_string.replace("$$amount$$",amount); response.setHeader("Content-type","text/html;charset=utf-8"); response.write(string); response.end(); //修改数据库中金额,成功后返回空字符串 }else if(path === "/pay"){ var amount = fs.readFileSync("./db","utf8"); var newAmount = amount - 1; fs.writeFileSync("./db",newAmount); response.setHeader("Content-type","application/javascript"); response.write(""); response.end(); }
在使用发送请求的本例中,我们没有在前端代码中加入,当script.onload=function(){}时,页面中数字减一amount.innerText -= 1;。这是因为,经过测试,
在前端代码中加入:
script.onload=function(){ //之前的代码 console.log("我是前端"); }
在后端代码中加入:
else if(path === "/pay"){ //之前的代码 response.write("console.log("我是后端")"); //之后的代码 }
结果发现,首先出现后端的console.log("我是后端"),再出现前端的console.log("我是前端")。
之前,我们将amount.innerText -= 1;放在前端代码里是因为,之前使用,返回只能是一张图片;现在我们使用,返回值会被当做Javascript执行。
所以,我们直接在后端代码输入我们想要执行的前端代码就行啦
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108346.html
现在流行的axios库不支持jsonp,因此这里推荐一个jsonp库,简单易用。以下是介绍: Easy JSONP A minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions. Features Implement JSONP request from th...
摘要:前言最近因为工作的缘故,几乎把市面上所有库都下载了一遍,却发现没有百分百让我满意的,最后自己手动改写了,才符合了要求,也因此有了这篇文章。在这一点上不得不说做的很好,的函数包含了对各种情况的处理,还伪造了一个状态码的返回。 前言 最近因为工作的缘故,几乎把市面上所有Jsonp库都下载了一遍,却发现没有百分百让我满意的,最后自己手动改写了Jsonp,才符合了要求,也因此有了这篇文章。本文...
摘要:同源策略在中有一个很重要的安全性限制,被称为同源策略。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候同源策略就显得过于苛刻。 JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。 ...
摘要:但是当我们有多个请求,并且每个请求的处理都是不一样的时候,这个变量将会被覆盖。这是不行的,因此我们应该为每一次请求设置一个唯一且不会冲突的变量,因此增加一个生成名字的方法如下这时候我们会发现我们已经利用了一个类似于随机的形式完成了多次请求。 文章首发于我的github及个人博客,github请看https://github.com/huruji/blo...,转载请注明出处。 show...
摘要:是一种协议,为了解决客户端请求服务器跨域的问题,但是并非是正式的传输协议。结果明明请求回来数据,结果还是报错。是一种使用数据的方式,返回的不是对象,是包含对象的脚本。 1、什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的 元素是一个例外。利用 元素的这个开放策略,网页可以得到...
摘要:请求服务器数据并规定回调函数为上面代码通过动态添加元素,向服务器发出请求。另外假设向服务发送的请求是这样的在这种情况下,是表示请求的请求参数,而是应用程序的回调函数的名称。清单调用回调服务注意,我们使用作为回调函数名,而非真实的函数名。 同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都...
阅读 1417·2021-09-23 11:51
阅读 1615·2021-09-04 16:45
阅读 704·2019-08-30 15:54
阅读 2145·2019-08-30 15:52
阅读 1700·2019-08-30 11:17
阅读 3192·2019-08-29 13:59
阅读 2171·2019-08-28 18:09
阅读 448·2019-08-26 12:15