jsonp

奈君
239 阅读5分钟

什么是数据库

能长久存放数据的地方，就是数据库 应用最广泛的数据库 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

avatar
文章
阅读
粉丝