Back to the general list of articles
1. Create in the testtwo folder and in this folder
2. Create get.html文件
3. Createserver.js文件
get.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax get 请求</title>
</head>
<body>
<button>点击发送get请求</button>
<!-- id为result的div -->
<div id="result" style="width: 200px;height: 100px;border: solid 1px #770088;"></div>
<script>
// 获取button元素
// 1.这个指定元素是那个——第一个按钮 （下标为0）
const btn = document.getElementsByTagName('button')[0];
// 把获取到的响应体展示在div中
const result = document.getElementById("result");
// 2.绑定事件 btn.onclick = function(){}
// 一般作为开发会进行本网页是否功能正常，测试则为在控制台输出信息
// btn.onclick = function(){console.log('测试成功');}
//
btn.onclick = function(){
// 1.创建对象
const textone = new XMLHttpRequest();
// 2.初始化，设置请求方法和URL
// 第一个参数为[什么类型的请求]
// 第二个参数为[给那个url发送]
textone.open('GET','http://127.0.0.1:8000/server');
// 3.发送
textone.send();
// 4.事件绑定 处理服务端返回的结果
// onreadystatechange 的意思
// on 就是when 当...的时候
// readystate 是textone 对象中的属性，表示状态 有5个值
// 状态 意思
// 0 没初始化
// 1 open方法调用完毕
// 2 send方法调用完毕
// 3 服务端返回了部分结果
// 4 服务端返回了所有结果
// change 更改，改变
textone.onreadystatechange = function(){
// 判断 (服务端返回了所有的结果) 4
if(textone.readyState === 4){
// 再次判断响应状态码 200 404 403 401 500之类的
// 200-299的都是认定为成功
if(textone.status >= 200 && textone.status < 300){
// 处理结果
// 1.响应行
console.log('状态码',textone.status);//状态码
console.log('状态符串',textone.statusText);//状态字符串
console.log('所有响应头','\n',textone.getAllResponseHeaders());//所有响应头
console.log('响应体',textone.response);//响应体
// 设置result的文本
result.innerHTML = textone.response;
}else{
}
}
}
}
</script>
</body>
</html>
server.js文件
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
app.get('/server', (request, response)=>{
// 设置响应头 设置允许跨域
// 头名字为Access-Control-Allow-Origin
// 头的值为
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('路由设置为server,响应体为本段文字');
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});
Start node to
open the created html webpage, and check whether the server can be started normally
1. Open with a browser get.html
2. Open the 127.0.0.1:8000/serverpage
Click the button to test whether the data can be obtained
One more thing
, the XHR here is a filter of ajax
The document to remove the test is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax get 请求</title>
</head>
<body>
<button>点击发送get请求</button>
<!-- id为result的div -->
<div id="result" style="width: 200px;height: 100px;border: solid 1px #770088;"></div>
<script>
// 获取button元素
// 1.这个指定元素是那个——第一个按钮 （下标为0）
const btn = document.getElementsByTagName('button')[0];
// 把获取到的响应体展示在div中
const result = document.getElementById("result");
// 2.绑定事件 btn.onclick = function(){}
btn.onclick = function(){
// 1.创建对象
const textone = new XMLHttpRequest();
// 2.初始化，设置请求方法和URL
// 第一个参数为[什么类型的请求]
// 第二个参数为[给那个url发送]
textone.open('GET','http://127.0.0.1:8000/server');
// 3.发送
textone.send();
// 4.事件绑定 处理服务端返回的结果
textone.onreadystatechange = function(){
// 判断 (服务端返回了所有的结果) 4
if(textone.readyState === 4){
// 再次判断响应状态码 200 404 403 401 500之类的
// 200-299的都是认定为成功
if(textone.status >= 200 && textone.status < 300){
// 处理结果
// 设置result的文本
result.innerHTML = textone.response;
}else{
}
}
}
}
</script>
</body>
</html>