当前位置： 首页 > news >正文

jsonp

news 来源：原创 2024/5/3 5:12:22

什么是数据库

能长久存放数据的地方，就是数据库 应用最广泛的数据库 MySQL

  1. 下载文件 https://github.com/chenfeng900000029/serverfile保存到本地 建个文件夹保存

2.进入到这个文件夹 cd

3.再这个文件夹执行 node server.js 8888 或者 node server 8888

4.编辑 server.js

5.在server文件中创建一个html并编辑html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Record</title>
	</head>
	</body>
	<h5 id="amount">100</h5>
	<button id="button">点我减1</button>

	</body>
	<script>
		button.addEventListener('click',(e)=>{  //添加监听事件
			let n = amount.innerText				//aument的innerText  n的值是字符串
			let number = parseInt(n,10)			//将n的值转换成10进制    let number= n - 0 & let number=+n
			let newNumber = number - 1			// 每次 减1
			amount.innerText = newNumber			// 每次减去1的值 传给amount.innerText
 		})
		




	</script>

</html>
复制代码
  1. server 文件中创建 touch db ← 将作为数据库文件 编辑文件 写入 100 接着 修改html文件
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Record</title>
	</head>
	</body>
	<h5 >我的金额<span id="amount">&&&amount&&&</span></h5>
	
	<!--利用from发请求-->
	<form action="/pay" method="post">
		  <!--注意  type="submit"--> 
		<button type="submit" value="付款">付款</button>  
	</form>
	

</body>

</html>
复制代码

7.编辑 server.js 承接 第6步

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/


  if(path === '/'){
  	var string = fs.readFileSync('./index.html','utf8')
  	var amount = fs.readFileSync('./db','utf8')	  //100
 	string = string.replace('&&&amount&&&',amount)
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)  //'重要'  关联string （页面）
    response.end()
// '重要' 请求的/pay  请求的方式 post 大小写要对应
    }else if(path === '/pay' && method.toUpperCase()==='POST'){
    //读取文件  格式
  	var amount = fs.readFileSync('./db','utf8')	  //100
  	//计算
  	var newAmount= amount - 1
  	//再将计算后的值写入 /db
  	fs.writeFileSync('./db',newAmount)
  	//返回状态
  	response.write('success')
  	//结束
  	response.end()
  	}else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)



复制代码

7.1 添加一个概率 #模拟#

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/

  console.log('方方说：含查询字符串的路径\n' + pathWithQuery)

  if(path === '/'){
  	var string = fs.readFileSync('./index.html','utf8')
  	var amount = fs.readFileSync('./db','utf8')	  //100
 	string = string.replace('&&&amount&&&',amount)
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)  //重要  关联string （页面）
    response.end()
    }else if(path === '/pay' && method.toUpperCase()==='POST'){
  	var amount = fs.readFileSync('./db','utf8')	  //100
  	var newAmount= amount - 1
  	//模拟  50% 成功率
  	if(Math.random()>0.5){
  		fs.writeFileSync('./db',newAmount)
  		response.write('success')
  	}else{
  	response.write('失败')	
  	}
  	
  	response.end()
  	}else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)



复制代码

6.1 优化 提示内容 添加一个iframe

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Record</title>
	</head>
	</body>
	<h5 >我的金额<span id="amount">&&&amount&&&</span></h5>
	
	<!--利用from发请求-->
	<form action="/pay" method="post" target="reslut">
		  <!--注意  type="submit"--> 
		<button type="submit" value="付款">付款</button>  
	</form>
	<iframe src="about:black" name="reslut" width="1000" height="100"></iframe>
	

</body>

</html>
复制代码

###############################

利用script创建请求 （只有get 没办法post）

HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Record</title>
	</head>
	</body>
	<h5 >我的金额<span id="amount">&&&amount&&&</span></h5>
	<button id="button">付款</button>  

	<!--利用from发请求-->
		

</body>
<script type="text/javascript">
	button.addEventListener('click',(e)=>{
		let script=document.createElement('script')
		script.src='/pay'
		//一定要把script放到body
		document.body.appendChild(script)
		//监听script 加载是否成功
		
		//BUT  BUT  BUT  如果script加载成功 就会执行 这个jsvascript
		//所以就可以不用onload 监听成功状态
		script.onload=function(x){
			//因为没此成功都要加载一个js  所以要删掉他
			x.currentTarget.remove()	
		}
		script.onerror=function(){
			alert('erron')
			x.currentTarget.remove()	
		}
	})
</script>

</html>
复制代码

server.js

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/

  console.log('方方说：含查询字符串的路径\n' + pathWithQuery)

  if(path === '/'){
  	var string = fs.readFileSync('./index.html','utf8')
  	var amount = fs.readFileSync('./db','utf8')	  //100
 	string = string.replace('&&&amount&&&',amount)
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)  //重要  关联string （页面）
    response.end()
    }else if(path === '/pay'){
  	var amount = fs.readFileSync('./db','utf8')	  //100
  	var newAmount= amount - 1
	  		response.setHeader('Content-Type', 'application/javascript')
			response.statusCode=200
			fs.writeFileSync('./db',newAmount)
			//不刷新直接修改 余额
	  		response.write(`
	  		amount.innerText = amount.innerText - 1 
	  		`)
  	response.end()
  	}else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('呜呜呜')
    response.end()
  }

  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)




复制代码

jsonp

1.请求方： coo.com 的前端 （浏览器）

2.相应方： bug.com 的后端 （服务器）

  • 1 请求方创建script src指向响应方 同时传一个查询参数？callback=xxx
  • 2 响应方 根据查询参数 callback 构造形如
  •   1. xxx.call（undefind,'你要的数据'）
复制代码
  •   2. xxx(undefind,'你要的数据'）
复制代码
  • 3 浏览器接收到响应， 就会执行 xxx.call(undefind,'你要得数据')
  • 4.那么请求方就知道了他要的数据

约定： callbackName 约定就叫callback
yyy 一般用的是随机数字

jsonp 为什么不支持post

jsonp是动态创建script实现的 动态创建script只有get没有post

相关文章：

  • find_first_zore_bit-一个位图的实现
  • 素材锦囊——50个高质量的 PSD 素材免费下载《上篇》
  • Spark2.1.1spark写入Hbase的三种方法性能对比
  • javascript框架概览备忘
  • mybatis 逆向工程配置文件
  • O2O？啥是“呕吐呕”？
  • 快速搞定常用的ES6新特性
  • Excel 将换行符替换为空
  • android PhoneGap源码详解
  • 数据绑定（九）Binding的数据校验
  • 【转】oc中消息传递机制-附：对performSelector方法的扩充
  • 【WPF】SnapsToDevicePixels与UseLayoutRounding二者到底有什么区别？供参考
  • 每日一Lua(3)-函数
  • Python 学习日记7
  • js实现深拷贝
  • - C#编程大幅提高OUTLOOK的邮件搜索能力!
  • CSS居中完全指南——构建CSS居中决策树
  • emacs初体验
  • gf框架之分页模块(五) - 自定义分页
  • js作用域和this的理解
  • Laravel深入学习6 - 应用体系结构：解耦事件处理器
  • Spring技术内幕笔记（2）：Spring MVC 与 Web
  • 当SetTimeout遇到了字符串
  • 反思总结然后整装待发
  • 解析带emoji和链接的聊天系统消息
  • 京东美团研发面经
  • 经典排序算法及其 Java 实现
  • 警报：线上事故之CountDownLatch的威力
  • 买一台 iPhone X，还是创建一家未来的独角兽？
  • 使用API自动生成工具优化前端工作流
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • Linux权限管理(week1_day5)--技术流ken
  • 阿里云API、SDK和CLI应用实践方案
  • ​LeetCode解法汇总2304. 网格中的最小路径代价
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • ​Linux·i2c驱动架构​
  • ​云纳万物 · 数皆有言｜2021 七牛云战略发布会启幕，邀您赴约
  • # 安徽锐锋科技IDMS系统简介
  • $.extend({},旧的,新的)；合并对象，后面的覆盖前面的
  • （ｃ语言）strcpy函数用法
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • （附源码）ssm教材管理系统 毕业设计 011229
  • （论文阅读26/100）Weakly-supervised learning with convolutional neural networks
  • （已解决）vue+element-ui实现个人中心，仿照原神
  • (原創) X61用戶，小心你的上蓋!! (NB) (ThinkPad) (X61)
  • (转)VC++中ondraw在什么时候调用的
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • .net 7 上传文件踩坑
  • .net core 3.0 linux,.NET Core 3.0 的新增功能
  • .NET Core 中的路径问题
  • .NET Framework 和 .NET Core 在默认情况下垃圾回收（GC）机制的不同（局部变量部分）
  • .Net6 Api Swagger配置
  • @Autowired和@Resource装配
  • @RequestMapping 的作用是什么？
  • @serverendpoint注解_SpringBoot 使用WebSocket打造在线聊天室（基于注解）