如何实现Ajax概述、封装及与模板引擎结合的数据交互？
- 内容介绍
- 文章标签
- 相关推荐
本文共计4034个文字，预计阅读时间需要17分钟。
欢迎访问博客冻山一树Sankey，浏览效果更佳。直接右上角搜索该即可。自由联合主页：自由联合主页-冻山一树Sankey+CSDN主页：CSDN主页-冻山一树Sankey，更多资料可参考Ajax介绍篇及相关内容。
欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可
自由互联主页：自由互联主页-冰山一树Sankey
CSDN主页：CSDN主页-冰山一树Sankey
更多资料可参考Ajax 介绍篇丨慕课网教程 (imooc.com)
一. Ajax概述下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成
在网站中存在以下问题：
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
于是Ajax诞生了，Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
二. Ajax运行环境及实现 2.1 Ajax运行环境Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。在浏览器端与服务器端进行请求响应是不可以控制的，但使用Ajax后，开发人员人员可控制其过程。
那如何实现Ajax呢？
- 创建 Ajax 对象
var xhr = new XMLHttpRequest();
- 告诉 Ajax 请求地址以及请求方式
xhr.open('get', 'www.example.com');
- 发送请求
xhr.send();
- 获取服务器端给与客户端的响应数据
xhr.onload = function () {
console.log(xhr.responseText);
}
因为Ajax 技术需要运行在网站环境中才能生效，下面使用Node创建的服务器作为网站服务器。
手写在创建一个文件夹server，在其根目录下再创建public，使用npm安装express和body-parser，其package.jion文件如下
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
}
}
然后再在根目录下创建app.js文件，这里编写服务端代码
2.2 传递get请求参数在public中新建传递get请求参数.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
// 获取按钮元素
var btn = document.getElementById('btn');
// 获取姓名文本框
var username = document.getElementById('username');
// 获取年龄文本框
var age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick = function () {
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
// 拼接请求参数
var params = 'username='+ nameValue +'&age=' + ageValue;
// 配置ajax对象
xhr.open('get', 'localhost:3000/get?'+params);
// 发送请求
xhr.send();
// 获取服务器端响应的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
在服务的app.js，添加
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 传递get请求参数
app.get('/get', (req, res) => {
//req.query得到json字符串
res.send(req.query);
});
这里放在app.js的最后，
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
在server下调用命令行启动nodejs服务器，为了方便调试，可使用
nodemon app.js
然后在浏览器打开localhost:4000/传递get请求参数.html,输入数据后，可返回输入值。
解释下这里的过程： 用get的请求方法把输入的数据从浏览器端发送到服务端，服务端再把得到的数据再返回到浏览器端进行输出，当然这里为了测试，从服务端发送到浏览器端的数据也可以是其他内容
可以看到这里的请求的url是域名+?key=value&key=value的形式以及请求方法为get
传递post请求参数有两种方式，第一种格式和get相同，传递的数据格式为key=value&key=value
在public中新建传递post请求参数.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
// 获取按钮元素
var btn = document.getElementById('btn');
// 获取姓名文本框
var username = document.getElementById('username');
// 获取年龄文本框
var age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick = function () {
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
// 拼接请求参数
var params = 'username='+ nameValue +'&age=' + ageValue;
// 配置ajax对象
xhr.open('post', 'localhost:3000/post');
// 设置请求参数格式的类型（post请求必须要设置）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
// 获取服务器端响应的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
在原app.js的基础上再添加
//解析传递的post数据，格式为
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded());
// 传递post请求参数
app.post('/post', (req, res) => {
res.send(req.body);
});
打开浏览器中输入localhost:3000/post请求参数.html, 打开浏览器调试，点击网络，输入数据后，可以得到post，请求url以及请求方法
这里的表单数据为输入的值，说明数据传递成功。
第二种传递的格式为json数据，主要区别在于xhr.setRequestHeader('Content-Type', 'application/json');，以及服务端的app.use(bodyParser.json());具体看下面的代码
注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
在public中新建向服务器端传递JSON格式的请求参数.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('post', 'localhost:3000/json');
// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
xhr.setRequestHeader('Content-Type', 'application/json');
// JSON.stringify() 将json对象转换为json字符串
// 3.发送请求
xhr.send(JSON.stringify({name: 'lisi', age:50}));
// 4.获取服务器端响应到客户端的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
</script>
</body>
</html>
在原app.js的基础上再添加
//将app.use(bodyParser.urlencoded())改为app.use(bodyParser.json());
app.use(bodyParser.json());
//向服务器端传递JSON格式的请求参数
app.post('/json', (req, res) => {
res.send(req.body);
});
注意：还需要将app.use(bodyParser.urlencoded());改为app.use(bodyParser.json());
在说明之前，先来介绍一个概念——报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。
上面的get与post请求，我们均是使用onload来获取服务端的报文，但也可以通过另外的方法来获取：
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应报文，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。使用onreadystatechange 事件，可以检测状态码的变化，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据。
0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送(还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了
即下面方法可onload方法等效
// 当Ajax状态码发生变化时
xhr.onreadystatechange = function () {
// 判断当Ajax状态码为4时
if (xhr.readyState == 4) {
// 获取服务器端的响应数据
console.log(xhr.responseText);
}
}
2.4 Ajax错误处理
- Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
- Http状态码: 表示请求的处理结果 是服务器端返回的
- 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取localhost:3000/error'); // 3.发送请求 xhr.send(); // 4.获取服务器端响应到客户端的数据 xhr.onload = function (){ // xhr.status 获取aui.github.io/art-template/zh-cn/index.html
先去下载art-template文件
进入官网，点击Docs
然后点击安装，将temlate-web.js另存到本地就下载好了
4.2 使用步骤- 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
<script src="./js/template-web.js"></script>
- 准备 art-template 模板
<script id="tpl" type="text/html">
<div class="box"></div>
</script>
- 告诉模板引擎将哪一个模板和哪个数据进行拼接
var html = template('tpl', {username: 'zhangsan', age: '20'});
- 将拼接好的html字符串添加到页面中
document.getElementById('container').innerHTML = html;
- 通过模板语法告诉模板引擎，数据和html字符串要如何拼接
<script id="tpl" type="text/html">
<div class="box"> {{ username }} </div>
</script>
4.3 案例
下面介绍三个案例说明如何使用模板引擎，一起利用Ajax进行数据的交互。
所有服务端均在app.js中。
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 邮箱地址验证
app.get('/verifyEmailAdress', (req, res) => {
// 接收客户端传递过来的邮箱地址
const email = req.query.email;
// 判断邮箱地址注册过的情况
if (email == 'itheima@itcast.cn') {
// 设置localhost:3000/verifyEmailAdress',
data: {
email: email
},
success: function (result) {
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error: function (result) {
console.log(result)
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
运行app.js，然后在浏览器中输入localhost:3000/验证邮箱地址唯一性.html
在public文件夹下面新建搜索框内容自动提示.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
.list-group {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
<ul class="list-group" id="list-box">
</ul>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
{{each result}}
<li class="list-group-item">{{$value}}</li>
{{/each}}
</script>
<script>
// 获取搜索框
var searchInp = document.getElementById('search');
// 获取提示文字的存放容器
var listBox = document.getElementById('list-box');
// 存储定时器的变量
var timer = null;
// 当用户在文本框中输入的时候触发
searchInp.oninput = function () {
// 清除上一次开启的定时器
clearTimeout(timer);
// 获取用户输入的内容
var key = this.value;
// 如果用户没有在搜索框中输入内容
if (key.trim().length == 0) {
// 将提示下拉框隐藏掉
listBox.style.display = 'none';
// 阻止程序向下执行
return;
}
// 开启定时器 让请求延迟发送
timer = setTimeout(function () {
// 向服务器端发送请求
// 向服务器端索取和用户输入关键字相关的内容
ajax({
type: 'get',
url: 'localhost:3000/searchAutoPrompt',
data: {
key: key
},
success: function (result) {
// 使用模板引擎拼接字符串
var html = template('tpl', {result: result});
// 将拼接好的字符串显示在页面中
listBox.innerHTML = html;
// 显示ul容器
listBox.style.display = 'block';
}
})
}, 800)
}
</script>
</body>
</html>
运行app.js，然后在浏览器中输入localhost:3000/搜索框内容自动提示.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLWXExa1-1647700819349)(C:/Users/27532/Desktop/省市区三级联动.gif)]
在public文件夹下面新建省市区联动.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="province"></select>
</div>
<div class="form-group">
<select class="form-control" id="city">
<option>请选择城市</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="area">
<option>请选择县城</option>
</select>
</div>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
{{each province}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 城市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
{{each city}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 县城模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县城</option>
{{each area}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<script>
// 获取省市区下拉框元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
// 获取省份信息
ajax({
type: 'get',
url: 'localhost:3000/province',
success: function (data) {
// 将服务器端返回的数据和html进行拼接
var html = template('provinceTpl', {province: data});
// 将拼接好的html字符串显示在页面中
province.innerHTML = html;
}
});
// 为省份的下拉框添加值改变事件
province.onchange = function () {
// 获取省份id
var pid = this.value;
// 清空县城下拉框中的数据
var html = template('areaTpl', {area: []});
area.innerHTML = html;
// 根据省份id获取城市信息
ajax({
type: 'get',
url: '/cities',
data: {
id: pid
},
success: function (data) {
var html = template('cityTpl', {city: data});
city.innerHTML = html;
}
})
};
// 当用户选择城市的时候
city.onchange = function () {
// 获取城市id
var cid = this.value;
// 根据城市id获取县城信息
ajax({
type: 'get',
url: 'localhost:3000/areas',
data: {
id: cid
},
success: function(data) {
var html = template('areaTpl', {area: data});
area.innerHTML = html;
}
})
}
</script>
</body>
</html>
运行app.js，然后在浏览器中输入localhost:3000/省市区联动.html
本文共计4034个文字，预计阅读时间需要17分钟。
欢迎访问博客冻山一树Sankey，浏览效果更佳。直接右上角搜索该即可。自由联合主页：自由联合主页-冻山一树Sankey+CSDN主页：CSDN主页-冻山一树Sankey，更多资料可参考Ajax介绍篇及相关内容。
欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可
自由互联主页：自由互联主页-冰山一树Sankey
CSDN主页：CSDN主页-冰山一树Sankey
更多资料可参考Ajax 介绍篇丨慕课网教程 (imooc.com)
一. Ajax概述下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成
在网站中存在以下问题：
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
于是Ajax诞生了，Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
二. Ajax运行环境及实现 2.1 Ajax运行环境Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。在浏览器端与服务器端进行请求响应是不可以控制的，但使用Ajax后，开发人员人员可控制其过程。
那如何实现Ajax呢？
- 创建 Ajax 对象
var xhr = new XMLHttpRequest();
- 告诉 Ajax 请求地址以及请求方式
xhr.open('get', 'www.example.com');
- 发送请求
xhr.send();
- 获取服务器端给与客户端的响应数据
xhr.onload = function () {
console.log(xhr.responseText);
}
因为Ajax 技术需要运行在网站环境中才能生效，下面使用Node创建的服务器作为网站服务器。
手写在创建一个文件夹server，在其根目录下再创建public，使用npm安装express和body-parser，其package.jion文件如下
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
}
}
然后再在根目录下创建app.js文件，这里编写服务端代码
2.2 传递get请求参数在public中新建传递get请求参数.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
// 获取按钮元素
var btn = document.getElementById('btn');
// 获取姓名文本框
var username = document.getElementById('username');
// 获取年龄文本框
var age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick = function () {
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
// 拼接请求参数
var params = 'username='+ nameValue +'&age=' + ageValue;
// 配置ajax对象
xhr.open('get', 'localhost:3000/get?'+params);
// 发送请求
xhr.send();
// 获取服务器端响应的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
在服务的app.js，添加
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 传递get请求参数
app.get('/get', (req, res) => {
//req.query得到json字符串
res.send(req.query);
});
这里放在app.js的最后，
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
在server下调用命令行启动nodejs服务器，为了方便调试，可使用
nodemon app.js
然后在浏览器打开localhost:4000/传递get请求参数.html,输入数据后，可返回输入值。
解释下这里的过程： 用get的请求方法把输入的数据从浏览器端发送到服务端，服务端再把得到的数据再返回到浏览器端进行输出，当然这里为了测试，从服务端发送到浏览器端的数据也可以是其他内容
可以看到这里的请求的url是域名+?key=value&key=value的形式以及请求方法为get
传递post请求参数有两种方式，第一种格式和get相同，传递的数据格式为key=value&key=value
在public中新建传递post请求参数.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
// 获取按钮元素
var btn = document.getElementById('btn');
// 获取姓名文本框
var username = document.getElementById('username');
// 获取年龄文本框
var age = document.getElementById('age');
// 为按钮添加点击事件
btn.onclick = function () {
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
// 拼接请求参数
var params = 'username='+ nameValue +'&age=' + ageValue;
// 配置ajax对象
xhr.open('post', 'localhost:3000/post');
// 设置请求参数格式的类型（post请求必须要设置）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
// 获取服务器端响应的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
在原app.js的基础上再添加
//解析传递的post数据，格式为
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded());
// 传递post请求参数
app.post('/post', (req, res) => {
res.send(req.body);
});
打开浏览器中输入localhost:3000/post请求参数.html, 打开浏览器调试，点击网络，输入数据后，可以得到post，请求url以及请求方法
这里的表单数据为输入的值，说明数据传递成功。
第二种传递的格式为json数据，主要区别在于xhr.setRequestHeader('Content-Type', 'application/json');，以及服务端的app.use(bodyParser.json());具体看下面的代码
注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
在public中新建向服务器端传递JSON格式的请求参数.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('post', 'localhost:3000/json');
// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
xhr.setRequestHeader('Content-Type', 'application/json');
// JSON.stringify() 将json对象转换为json字符串
// 3.发送请求
xhr.send(JSON.stringify({name: 'lisi', age:50}));
// 4.获取服务器端响应到客户端的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
</script>
</body>
</html>
在原app.js的基础上再添加
//将app.use(bodyParser.urlencoded())改为app.use(bodyParser.json());
app.use(bodyParser.json());
//向服务器端传递JSON格式的请求参数
app.post('/json', (req, res) => {
res.send(req.body);
});
注意：还需要将app.use(bodyParser.urlencoded());改为app.use(bodyParser.json());
在说明之前，先来介绍一个概念——报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。
上面的get与post请求，我们均是使用onload来获取服务端的报文，但也可以通过另外的方法来获取：
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应报文，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。使用onreadystatechange 事件，可以检测状态码的变化，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据。
0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送(还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了
即下面方法可onload方法等效
// 当Ajax状态码发生变化时
xhr.onreadystatechange = function () {
// 判断当Ajax状态码为4时
if (xhr.readyState == 4) {
// 获取服务器端的响应数据
console.log(xhr.responseText);
}
}
2.4 Ajax错误处理
- Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
- Http状态码: 表示请求的处理结果 是服务器端返回的
- 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取localhost:3000/error'); // 3.发送请求 xhr.send(); // 4.获取服务器端响应到客户端的数据 xhr.onload = function (){ // xhr.status 获取aui.github.io/art-template/zh-cn/index.html
先去下载art-template文件
进入官网，点击Docs
然后点击安装，将temlate-web.js另存到本地就下载好了
4.2 使用步骤- 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
<script src="./js/template-web.js"></script>
- 准备 art-template 模板
<script id="tpl" type="text/html">
<div class="box"></div>
</script>
- 告诉模板引擎将哪一个模板和哪个数据进行拼接
var html = template('tpl', {username: 'zhangsan', age: '20'});
- 将拼接好的html字符串添加到页面中
document.getElementById('container').innerHTML = html;
- 通过模板语法告诉模板引擎，数据和html字符串要如何拼接
<script id="tpl" type="text/html">
<div class="box"> {{ username }} </div>
</script>
4.3 案例
下面介绍三个案例说明如何使用模板引擎，一起利用Ajax进行数据的交互。
所有服务端均在app.js中。
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 邮箱地址验证
app.get('/verifyEmailAdress', (req, res) => {
// 接收客户端传递过来的邮箱地址
const email = req.query.email;
// 判断邮箱地址注册过的情况
if (email == 'itheima@itcast.cn') {
// 设置localhost:3000/verifyEmailAdress',
data: {
email: email
},
success: function (result) {
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error: function (result) {
console.log(result)
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
运行app.js，然后在浏览器中输入localhost:3000/验证邮箱地址唯一性.html
在public文件夹下面新建搜索框内容自动提示.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
.list-group {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
<ul class="list-group" id="list-box">
</ul>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
{{each result}}
<li class="list-group-item">{{$value}}</li>
{{/each}}
</script>
<script>
// 获取搜索框
var searchInp = document.getElementById('search');
// 获取提示文字的存放容器
var listBox = document.getElementById('list-box');
// 存储定时器的变量
var timer = null;
// 当用户在文本框中输入的时候触发
searchInp.oninput = function () {
// 清除上一次开启的定时器
clearTimeout(timer);
// 获取用户输入的内容
var key = this.value;
// 如果用户没有在搜索框中输入内容
if (key.trim().length == 0) {
// 将提示下拉框隐藏掉
listBox.style.display = 'none';
// 阻止程序向下执行
return;
}
// 开启定时器 让请求延迟发送
timer = setTimeout(function () {
// 向服务器端发送请求
// 向服务器端索取和用户输入关键字相关的内容
ajax({
type: 'get',
url: 'localhost:3000/searchAutoPrompt',
data: {
key: key
},
success: function (result) {
// 使用模板引擎拼接字符串
var html = template('tpl', {result: result});
// 将拼接好的字符串显示在页面中
listBox.innerHTML = html;
// 显示ul容器
listBox.style.display = 'block';
}
})
}, 800)
}
</script>
</body>
</html>
运行app.js，然后在浏览器中输入localhost:3000/搜索框内容自动提示.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLWXExa1-1647700819349)(C:/Users/27532/Desktop/省市区三级联动.gif)]
在public文件夹下面新建省市区联动.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="province"></select>
</div>
<div class="form-group">
<select class="form-control" id="city">
<option>请选择城市</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="area">
<option>请选择县城</option>
</select>
</div>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
{{each province}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 城市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
{{each city}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 县城模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县城</option>
{{each area}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<script>
// 获取省市区下拉框元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
// 获取省份信息
ajax({
type: 'get',
url: 'localhost:3000/province',
success: function (data) {
// 将服务器端返回的数据和html进行拼接
var html = template('provinceTpl', {province: data});
// 将拼接好的html字符串显示在页面中
province.innerHTML = html;
}
});
// 为省份的下拉框添加值改变事件
province.onchange = function () {
// 获取省份id
var pid = this.value;
// 清空县城下拉框中的数据
var html = template('areaTpl', {area: []});
area.innerHTML = html;
// 根据省份id获取城市信息
ajax({
type: 'get',
url: '/cities',
data: {
id: pid
},
success: function (data) {
var html = template('cityTpl', {city: data});
city.innerHTML = html;
}
})
};
// 当用户选择城市的时候
city.onchange = function () {
// 获取城市id
var cid = this.value;
// 根据城市id获取县城信息
ajax({
type: 'get',
url: 'localhost:3000/areas',
data: {
id: cid
},
success: function(data) {
var html = template('areaTpl', {area: data});
area.innerHTML = html;
}
})
}
</script>
</body>
</html>
运行app.js，然后在浏览器中输入localhost:3000/省市区联动.html