JS单独格式文件：Ajax
// npm i express 安装express
//引入
const express = require('express')
//创建应用对象
const app =express();
//创建路由
app.get('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello');
});
//启动端口 //终端输入运行 ： node express基本使用.js http://127.0.0.1:8000/ 按ctrl+c释放端口
app.listen(8000,()=>{
console.log('启动端口')
})
html中使用ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#result {
width: 300px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<button type="submit">点击发送请求</button>
<div id="result"></div>
</body>
<script type="text/javascript">
//获取btn元素
var btn = document.getElementsByTagName('button')[0];
//获取div元素
var result = document.getElementById('result');
//点击button显示sever.js内容
btn.onclick = function(){
//1.创建对象
var xhl = new XMLHttpRequest();
//2.设置请求以及url
xhl.open('GET','http://127.0.0.1:8000/server');
//3.发送请求到服务器
xhl.send();
//4.事件绑定，处理服务器返回的结果
//on 当 readystate 是xhl的对象的属性，表示状态：0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
//onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
//status 状态码
xhl.onreadystatechange = function(){
//判断服务器返回所有结果
if(xhl.readyState === 4){
//判断响应状态码是否为200,大于200，小于300
if(xhl.status >= 200 && xhl.status < 300 ){
//将响应的请求转化为html显示在页面
result.innerText = xhl.response;
}
}
}
}
</script>
</html>
标签：功能,请求,button,express,xhl,点击,result,response From： https://www.cnblogs.com/wsx123/p/17097040.html