title: ajax学习总结 date: 2021-08-18 08:55:59 tags: - node.js - JS categories: - 学习笔记
1.什么是ajax：
AJAX = (async)异步 JavaScript 和 XML；
AJAX 是一种用于创建快速动态网页的技术；
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验；
1.1应用场景：
-
页面上拉加载更多数据
-
列表数据无刷新分页
-
表单项离开焦点数据验证
-
搜索框提示文字下拉列表
1.2 ajax的运行环境：
Ajax 技术需要运行在网站环境中才能生效，一般使用Node创建的服务器作为网站服务器；
2.Ajax实现步骤：
-
创建Ajax对象：
let xhr = new XMLHttpRequest();
-
告诉Ajax请求地址以及请求方式：
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first'); -
发送请求：
// 3.发送请求
xhr.send(); -
获取服务器端响应到客户端的数据
// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
} -
客户端完整(test.html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
</script>
</body>
</html> -
创建服务器(app.js)：
// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));
// 01ajax入门
app.get("/first", (req, res) => {
res.send("Hello Ajax!");
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功"); -
在浏览器中输入：http://localhost:3000/first 进行ajax请求访问
3.服务器端响应数据的格式
-
在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中；
-
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输；
JSON.parse() // 将 json 字符串转换为json对象
-
服务器端：
// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
res.send({ name: "张三" });
}); -
处理返回的数据：
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
// 将JSON字符串转换成JSON对象
let responseText = JSON.parse(xhr.responseText);
console.log(responseText);
// 对服务器返回的数据进行使用
let str = '<h2>'+responseText.name+'</h2>';
document.body.innerHTML=str;
}
3.1向服务器中传递get请求参数
-
客户端：
<!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>
<p>
<input id="username" name type="text">
</p>
<p>
<input id="age" name type="text">
</p>
<p>
<input id="btn" name type="button" value="提交">
</p>
<script>
// 获取按钮元素
let btn = document.getElementById('btn');
let username = document.getElementById('username');
let age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick=function(){
// 创建ajax对象
let xhr = new XMLHttpRequest();
let nameValue = username.value;
let ageValue = age.value;
// 拼接请求参数
let params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax对象
xhr.open('get','http://localhost:3000/get?'+params);
// 发送请求
xhr.send();
// 获取服务器端响应的数据
xhr.onload = function(){
// console.log(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
}
}
</script>
</body>
</html> -
服务器端
// 对应03
app.get("/get", (req, res) => {
res.send(req.query);
});
3.2向服务器传递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>
<p>
<input id="username" name type="text">
</p>
<p>
<input id="age" name type="text">
</p>
<p>
<input id="btn" name type="button" value="提交">
</p>
<script>
// 获取按钮元素
let btn = document.getElementById('btn');
let username = document.getElementById('username');
let age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick=function(){
// 创建ajax对象
let xhr = new XMLHttpRequest();
let nameValue = username.value;
let ageValue = age.value;
// 拼接请求参数
let params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax对象
xhr.open('post','http://localhost:3000/post');
// 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
// 获取服务器端响应的数据
xhr.onload = function(){
console.log(xhr.responseText);
// console.log(JSON.parse(xhr.responseText));
}
}
</script>
</body>
</html> -
服务器端：
// 对应04
app.post("/post", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
3.4请求报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式；
3.5请求参数的格式
-
application/x-www-form-urlencoded
name=zhangsan&age=20&sex=男
-
application/json
{name: 'zhangsan', age: '20', sex: '男'}
-
在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。
-
JSON.stringify() // 将json对象转换为json字符串
-
注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
3.6向服务器传递json格式参数
-
客户端
<!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>
<script>
// 创建ajax对象
let xhr = new XMLHttpRequest();
// 配置ajax对象
xhr.open('post','http://localhost:3000/json');
// 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
xhr.setRequestHeader('Content-Type','application/json');
// JSON.stringify()将JSON对象转换成json字符串
// 发送请求
xhr.send(JSON.stringify({name:'lisi',age:50}));
// 获取服务器端响应的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
</script>
</body>
</html> -
服务器端
// 解析传递过来的请求参数
app.use(bodyParser.json());
app.post("/json", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
3.7Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码；
-
0：请求未初始化(还没有调用open())1：请求已经建立，但是还没有发送(还没有调用send())2：请求已经发送3：请求正在处理中，通常响应中已经有部分数据可以用了4：响应已经完成，可以获取并使用服务器的响应了
xhr.readyState // 获取Ajax状态码
-
onreadystatechange 事件,当 Ajax 状态码发生变化时将自动触发该事件
在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了;
<script>
let xhr = new XMLHttpRequest();
// 0已经创建ajax对象，但是还没有对ajax对象进行配置
console.log(xhr.readyState);
xhr.open('get','http://localhost:3000/readystate')
// 1已经对ajax对象进行配置，但是还没有发送数据
console.log(xhr.readyState);
// 当ajax状态发生改变时触发
xhr.onreadystatechange = function(){
// 2请求已经发送了
// 3已经接收到服务器的部分数据了
// 4服务器端的响应数据已经接收完成
console.log(xhr.readyState);
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
xhr.send();
</script>
4.Ajax错误处理
-
网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
-
网络畅通，服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。
-
网络畅通，服务器端能接收到请求，服务器端返回500状态码。服务器端错误，找后端程序员进行沟通。
-
网络中断，请求无法发送到服务器端。会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。
-
客户端：
<button id="btn">提交ajax数据</button>
<script>
let btn = document.getElementById('btn');
btn.onclick=function(){
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/error');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
// 获取http状态码 xhr.status
console.log(xhr.status);
if(xhr.status==400){
alert('请求发生错误');
}
}
// 当网络中断时,不会触发onload事件，会触发onerror事件
xhr.onerror = function(){
alert('网络中断，无法发送ajax请求！');
}
// Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
// Http状态码：表示请求的处理结果 是服务器返回
}
</script> -
服务器端：
// 对应07
app.get("/error", (req, res) => {
// console.log(asdfa);
res.status(400).send("not ok");
});
5.Ajax函数封装
发送一次请求代码过多，发送多次请求代码冗余且重复时，将请求代码封装到函数中，发请求时调用函数即可;
-
客户端
<!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>
<button id="btn">提交ajax数据</button>
<script>
let btn = document.getElementById('btn');
btn.onclick=function(){
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/error');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
// 获取http状态码 xhr.status
console.log(xhr.status);
if(xhr.status==400){
alert('请求发生错误');
}
}
// 当网络中断时,不会触发onload事件，会触发onerror事件
xhr.onerror = function(){
alert('网络中断，无法发送ajax请求！');
}
// Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
// Http状态码：表示请求的处理结果 是服务器返回
}
</script>
</body>
</html>
6.服务器端总代码：
// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
const bodyParser = require("body-parser");
const { parse } = require("path");
const { fstat } = require("fs");
// 创建web服务器
const app = express();
// 解析传递过来的请求参数
app.use(bodyParser.json());
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));
// 01ajax入门
app.get("/first", (req, res) => {
res.send("Hello Ajax!");
});
// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
// 将JSON字符串转换成JSON对象
res.send({ name: "张三" });
});
// 对应03
app.get("/get", (req, res) => {
res.send(req.query);
});
// 对应04
app.post("/post", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
// 对应05
app.post("/json", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
// 对应06
app.get("/readystate", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send("hello world");
});
// 对应07
app.get("/error", (req, res) => {
// console.log(asdfa);
res.status(400).send("not ok");
});
//08 当前的路由意思是，当访问的是cache时，要将读取到的内容返回到浏览器中
app.get("/cache", (req, res) => {
fs.readFile("./test.txt", (err, result) => {
res.send(result);
});
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");
title: ajax学习总结 date: 2021-08-18 08:55:59 tags: - node.js - JS categories: - 学习笔记
1.什么是ajax：
AJAX = (async)异步 JavaScript 和 XML；
AJAX 是一种用于创建快速动态网页的技术；
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验；
1.1应用场景：
-
页面上拉加载更多数据
-
列表数据无刷新分页
-
表单项离开焦点数据验证
-
搜索框提示文字下拉列表
1.2 ajax的运行环境：
Ajax 技术需要运行在网站环境中才能生效，一般使用Node创建的服务器作为网站服务器；
2.Ajax实现步骤：
-
创建Ajax对象：
let xhr = new XMLHttpRequest();
-
告诉Ajax请求地址以及请求方式：
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first'); -
发送请求：
// 3.发送请求
xhr.send(); -
获取服务器端响应到客户端的数据
// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
} -
客户端完整(test.html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
</script>
</body>
</html> -
创建服务器(app.js)：
// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));
// 01ajax入门
app.get("/first", (req, res) => {
res.send("Hello Ajax!");
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功"); -
在浏览器中输入：http://localhost:3000/first 进行ajax请求访问
3.服务器端响应数据的格式
-
在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中；
-
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输；
JSON.parse() // 将 json 字符串转换为json对象
-
服务器端：
// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
res.send({ name: "张三" });
}); -
处理返回的数据：
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
// 将JSON字符串转换成JSON对象
let responseText = JSON.parse(xhr.responseText);
console.log(responseText);
// 对服务器返回的数据进行使用
let str = '<h2>'+responseText.name+'</h2>';
document.body.innerHTML=str;
}
3.1向服务器中传递get请求参数
-
客户端：
<!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>
<p>
<input id="username" name type="text">
</p>
<p>
<input id="age" name type="text">
</p>
<p>
<input id="btn" name type="button" value="提交">
</p>
<script>
// 获取按钮元素
let btn = document.getElementById('btn');
let username = document.getElementById('username');
let age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick=function(){
// 创建ajax对象
let xhr = new XMLHttpRequest();
let nameValue = username.value;
let ageValue = age.value;
// 拼接请求参数
let params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax对象
xhr.open('get','http://localhost:3000/get?'+params);
// 发送请求
xhr.send();
// 获取服务器端响应的数据
xhr.onload = function(){
// console.log(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
}
}
</script>
</body>
</html> -
服务器端
// 对应03
app.get("/get", (req, res) => {
res.send(req.query);
});
3.2向服务器传递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>
<p>
<input id="username" name type="text">
</p>
<p>
<input id="age" name type="text">
</p>
<p>
<input id="btn" name type="button" value="提交">
</p>
<script>
// 获取按钮元素
let btn = document.getElementById('btn');
let username = document.getElementById('username');
let age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick=function(){
// 创建ajax对象
let xhr = new XMLHttpRequest();
let nameValue = username.value;
let ageValue = age.value;
// 拼接请求参数
let params = 'username='+nameValue+'&age='+ageValue;
// 配置ajax对象
xhr.open('post','http://localhost:3000/post');
// 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
// 获取服务器端响应的数据
xhr.onload = function(){
console.log(xhr.responseText);
// console.log(JSON.parse(xhr.responseText));
}
}
</script>
</body>
</html> -
服务器端：
// 对应04
app.post("/post", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
3.4请求报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式；
3.5请求参数的格式
-
application/x-www-form-urlencoded
name=zhangsan&age=20&sex=男
-
application/json
{name: 'zhangsan', age: '20', sex: '男'}
-
在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。
-
JSON.stringify() // 将json对象转换为json字符串
-
注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
3.6向服务器传递json格式参数
-
客户端
<!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>
<script>
// 创建ajax对象
let xhr = new XMLHttpRequest();
// 配置ajax对象
xhr.open('post','http://localhost:3000/json');
// 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
xhr.setRequestHeader('Content-Type','application/json');
// JSON.stringify()将JSON对象转换成json字符串
// 发送请求
xhr.send(JSON.stringify({name:'lisi',age:50}));
// 获取服务器端响应的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
</script>
</body>
</html> -
服务器端
// 解析传递过来的请求参数
app.use(bodyParser.json());
app.post("/json", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
3.7Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码；
-
0：请求未初始化(还没有调用open())1：请求已经建立，但是还没有发送(还没有调用send())2：请求已经发送3：请求正在处理中，通常响应中已经有部分数据可以用了4：响应已经完成，可以获取并使用服务器的响应了
xhr.readyState // 获取Ajax状态码
-
onreadystatechange 事件,当 Ajax 状态码发生变化时将自动触发该事件
在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了;
<script>
let xhr = new XMLHttpRequest();
// 0已经创建ajax对象，但是还没有对ajax对象进行配置
console.log(xhr.readyState);
xhr.open('get','http://localhost:3000/readystate')
// 1已经对ajax对象进行配置，但是还没有发送数据
console.log(xhr.readyState);
// 当ajax状态发生改变时触发
xhr.onreadystatechange = function(){
// 2请求已经发送了
// 3已经接收到服务器的部分数据了
// 4服务器端的响应数据已经接收完成
console.log(xhr.readyState);
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
xhr.send();
</script>
4.Ajax错误处理
-
网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
-
网络畅通，服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。
-
网络畅通，服务器端能接收到请求，服务器端返回500状态码。服务器端错误，找后端程序员进行沟通。
-
网络中断，请求无法发送到服务器端。会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。
-
客户端：
<button id="btn">提交ajax数据</button>
<script>
let btn = document.getElementById('btn');
btn.onclick=function(){
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/error');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
// 获取http状态码 xhr.status
console.log(xhr.status);
if(xhr.status==400){
alert('请求发生错误');
}
}
// 当网络中断时,不会触发onload事件，会触发onerror事件
xhr.onerror = function(){
alert('网络中断，无法发送ajax请求！');
}
// Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
// Http状态码：表示请求的处理结果 是服务器返回
}
</script> -
服务器端：
// 对应07
app.get("/error", (req, res) => {
// console.log(asdfa);
res.status(400).send("not ok");
});
5.Ajax函数封装
发送一次请求代码过多，发送多次请求代码冗余且重复时，将请求代码封装到函数中，发请求时调用函数即可;
-
客户端
<!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>
<button id="btn">提交ajax数据</button>
<script>
let btn = document.getElementById('btn');
btn.onclick=function(){
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/error');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
// 获取http状态码 xhr.status
console.log(xhr.status);
if(xhr.status==400){
alert('请求发生错误');
}
}
// 当网络中断时,不会触发onload事件，会触发onerror事件
xhr.onerror = function(){
alert('网络中断，无法发送ajax请求！');
}
// Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
// Http状态码：表示请求的处理结果 是服务器返回
}
</script>
</body>
</html>
6.服务器端总代码：
// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
const bodyParser = require("body-parser");
const { parse } = require("path");
const { fstat } = require("fs");
// 创建web服务器
const app = express();
// 解析传递过来的请求参数
app.use(bodyParser.json());
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));
// 01ajax入门
app.get("/first", (req, res) => {
res.send("Hello Ajax!");
});
// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
// 将JSON字符串转换成JSON对象
res.send({ name: "张三" });
});
// 对应03
app.get("/get", (req, res) => {
res.send(req.query);
});
// 对应04
app.post("/post", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
// 对应05
app.post("/json", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send(req.body);
});
// 对应06
app.get("/readystate", (req, res) => {
// 需要借助第三方模块body-parser才能够成功接受到
res.send("hello world");
});
// 对应07
app.get("/error", (req, res) => {
// console.log(asdfa);
res.status(400).send("not ok");
});
//08 当前的路由意思是，当访问的是cache时，要将读取到的内容返回到浏览器中
app.get("/cache", (req, res) => {
fs.readFile("./test.txt", (err, result) => {
res.send(result);
});
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");