POST请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="t1" cols="30" rows="10">
</textarea>
<script>
//获取标签信息
const text = document.getElementById('t1');
//给标签绑定事件 鼠标移动到指定物体事件 悬浮事件
text.addEventListener('mouseover',()=>{
// console.log("执行了悬浮事件")
/**创建请求对象，初始化请求类型和ip，
* 判断事件执行状态，
* 只有当status >= 200 && status <300 为成功后将请求的response赋值给html
*/
const xhr = new XMLHttpRequest();
xhr.open("POST",'http:/192.168.0.102:8001/server');
xhr.send();
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response)
text.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
<style>
#t1{
width: 200px;
height: 200px;
border: #68e91e solid 2px;
}
</style>
</html>
//引用express模块
const express = require('express');
//实例化对象
const app = express();
//get规划路由
app.get('/server',(resquset,response)=>{
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('hello Ajax')
})
//post规划路由
app.post('/server',(resquset,response)=>{
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('hello Ajax post')
})
//监听服务启动
app.listen(8001,()=>{
console.log('post请求准备完毕')
})
//回顾点：每个请求方法的不同，要规划不同请求方试的路由
POST请求携带参数的方试
post请求携带参数，是在发送请求的时候携带的
const xhr = new XMLHttpRequest();
xhr.open("POST",'http:/192.168.0.102:8001/server');
let params = 'a=300&b=200&c=100'
xhr.send(params);//post请求携带参数，是在发送请求的时候携带的
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response)
text.innerHTML = xhr.response;
}
}
}
设置请求头
设置请求头一般传递用户身份识别信息
const xhr = new XMLHttpRequest();
xhr.open("POST",'http:/192.168.0.102:8001/server');
//设置请求头信息 使用setRequestHeader 需要在open之后，send之前使用中，其中的参数键值对，第一个为键。第二个为值
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.setRequestHeader('name','asen')//可以设置自定义请求头，但是需要后台设置允许自定义请求头
let params = 'a=300&b=200&c=100'
xhr.send(params);//post请求携带参数，是在发送请求的时候携带的
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response)
text.innerHTML = xhr.response;
}
}
}
//post规划路由
// app.post('/server',(resquset,response)=>{
// // console.log(response)
// response.setHeader('Access-Control-Allow-Header','*')
// //设置响应头，允许跨域
// response.setHeader('Access-Control-Allow-Origin','*')
// //设置响应体
// response.send('hello Ajax post')
// })
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.all('/server',(resquset,response)=>{
// console.log(response)
//设置允许自定义请求头
// response.setHeader('Access-Control-Allow-Headers','*')
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('hello Ajax all')
})
6.服务器传递JSON数据
const result = document.getElementById('result')
//监听键盘按下事件
window.onkeydown = function(){
let xhr = new XMLHttpRequest();
xhr.responseType = "json"
xhr.open('get','http://192.168.141.51:8002/json-server')
xhr.send();
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
//手动 将服务器请求的json数据转为数据
// let obj = JSON.parse(xhr.response)
// result.innerHTML = obj.name
//自动转化 只需要xhr.responseTpye = "json"
console.log(xhr.response)
result.innerHTML = xhr.response.name
}
}
}
}
//引用express模块
const express = require('express');
//实例化对象
const app = express();
//规划路由
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.all('/json-server',(resquset,response)=>{
// console.log(response)
//设置允许自定义请求头
// response.setHeader('Access-Control-Allow-Headers','*')
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
//设置传送数据 手动数据转json
let obj = {
name : 'asen',
age: '18',
}
obj = JSON.stringify(obj)
//send方法中只能传输 字符串 和 buffer（0,1组成的数据）
response.send(obj)
})
//监听服务启动
app.listen(8002,()=>{
console.log('json请求准备完毕')
})
7.安装nodemon监听服务器(server)自动重启
需要监听哪个文件就去哪个文件下面输入nodemon "文件名"
问题：系统禁止运行脚本。
解决方案
1.输入nodemon.cmd "运行文件夹名字"
2.按下组合键Windows + R以打开运行窗口。输入powershell然后按下回车键。
输入Start-Process powershell -Verb runAs，会打开管理员窗口
在管理员窗口输入set-ExecutionPolicy RemoteSigned 回复输入Y即可
