<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style>
#result {
width: 300px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="result">
</div>
</body>
<script type="text/javascript">
//获取元素对象
const result = document.getElementById('result');
//鼠标移入div显示内容
result.addEventListener('mouseover',function(){
//1.创建对象
var xhr = new XMLHttpRequest();
//初始化
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头（预定义写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//设置请求同（自定义写法）但是会报错，一般是后端人员进行写好，这里前端写法，在server.js写入 ,使用all，不使用get/post 写入这段语句 response.setHeader('Access-Control-Allow-Headers','*');
xhr.setRequestHeader('name','wsx');
//发送
xhr.send('111');
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300){
result.innerText = xhr.response;
}
}
}
})
</script>
</html>
// npm i express 安装express
//引入
const express = require('express')
//创建应用对象
const app =express();
//创建路由 get
app.get('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello');
});
//创建路由 post all 接受全部参数
app.all('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('Hello 111');
});
//创建路由 post all 接受全部参数
app.get('/json-server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应一条数据
const data = {
name : 'wsx'
};
//对对象进行字符串转换
var str = JSON.stringify(data);
//设置响应体
response.send(str);
});
//启动端口 //终端输入运行 ： node express基本使用.js http://127.0.0.1:8000/ 按ctrl+c释放端口
app.listen(8000,()=>{
console.log('启动端口')
})
标签：设置,鼠标,响应,express,Access,xhr,移入,post,response From： https://blog.51cto.com/u_15722979/6148291