- 传统网站表单提交
<!– http://www.example.com?username=zhangsan&password=123456 -->
- GET请求方式
xhr.open(‘get’, ‘http://www.example.com?name=zhangsan&age=20’);
在 app.js 中创建路由
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
// 创建路由
app.get(‘/get’, (req, res) => {
// 获取 get 请求参数
res.send(req.query);
})
// 监听端口
app.listen(3000, () => {
console.log(‘服务器启动成功’);
});
请求报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式
- POST请求方式
// post请求必须要设置请求参数格式的类型
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)
// 发送请求(POST请求要带参数)
xhr.send(‘name=zhangsan&age=20’);
在 app.js 中创建路由
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 第三方模块
const bodyParser = require(‘body-parser’);
// parse application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: false }))
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
// 创建路由
app.post(‘/post’, (req, res) => {
// 获取 post 请求参数
res.send(req.body);
})
// 监听端口
app.listen(3000, () => {
console.log(‘服务器启动成功’);
});
注意:借助了第三方模块 body-parser
我们客户端在向服务器端发送请求参数有以下几种格式,不同的格式需要设置的请求头也是不一样的
- 设置请求头为
application/x-www-form-urlencoded
,传递如下请求参数
name=zhangsan&age=20&sex=男
- 设置请求头为
application/json
,传递如下请求参数,是 json 对象
{name: ‘zhangsan’, age: ‘20’, sex: ‘男’}
在请求头中指定 Content-Type 属性的值是 application/json,告诉服务器端当前请求参数的格式是 json,我们还需要将 json 对象转换为 json 字符串,因为请求参数必须要以字符串格式传递
JSON.stringify() // 将json对象转换为json字符串
在app.js 中配置路由
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 第三方模块
const bodyParser = require(‘body-parser’);
// 创建web服务器
const app = express();
// parse application/json
app.use(express.json())
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
// 创建路由
app.post(‘/json’, (req, res) => {
res.send(req.body);
});
// 监听端口
app.listen(3000, () => {
console.log(‘服务器启动成功’);
});
注意:get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。
1.7.1、Ajax状态码
在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态码。
0:请求未初始化(还没有调用open())
1:请求已经建立,但是还没有发送(还没有调用send())
2:请求已经发送
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
xhr.readyState // 获取Ajax状态码
1.7.2、onreadystatechange事件
当 Ajax 状态码发生变化时将自动触发该事件。
在事件处理函数中可以获取 Ajax 状态码并对其进行判断,当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了
在 app.js 中配置路由
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 第三方模块
const bodyParser = require(‘body-parser’);
// 创建web服务器
const app = express();
// parse application/json
app.use(express.json())
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
// 创建路由
app.get(‘/readystate’, (req, res) => {
res.send(‘hello’);
});
// 监听端口
app.listen(3000, () => {
console.log(‘服务器启动成功’);
});
1.7.3、区别
两种获取服务器端响应方式的区别
| 区别描述 | onload事件 | onreadystatechange事件 |
| — | — | — |
| 是否兼容IE低版本 | 不兼容 | 兼容 |
| 是否需要判断Ajax状态码 | 不需要 | 需要 |
| 被调用次数 | 一次 | 多次 |
-
网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期结果。
-
我们可以判断服务器端返回的状态码,分别进行处理。
xhr.status
获取http状态码
发送Ajax请求
在app.js 中设置路由
// 引入express框架
const express = require(‘express’);
// 路径处理模块
const path = require(‘path’);
// 第三方模块
const bodyParser = require(‘body-parser’);
// 创建web服务器
const app = express();
// parse application/json
app.use(express.json())
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
// 创建路由
app.get(‘/error’, (req, res) => {
// res.status 设置http状态码
res.status(400).send(‘not ok’);
})
// 监听端口
app.listen(3000, () => {
console.log(‘服务器启动成功’);
});
1.8.1、几种错误示例
Ajax 请求报错通常会出现以下几种情况,我们来进行查看并排查
- 网络畅通,服务器端没有接收到请求,返回404状态码
检查请求地址是否错误。
- 网络畅通,服务器端能接收到请求,服务器端返回500状态码。
服务器端错误,找后端程序员进行沟通
app.get(‘/error’, (req, res) => {
// 打印一个未定义的变量,服务器端就会出现错误
console.log(abc);
res.send(“hello”)
})
- 网络中断,请求无法发送到服务器端。
会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理。
// 当网络中断时会触发onerrr事件
xhr.onerror = function() {
alert(‘网络中断, 无法发送Ajax请求’)
}
-
Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的(0、1、2、3、4)
-
Http状态码: 表示请求的处理结果 是服务器端返回的
问题:在低版本的 IE 浏览器中,Ajax 请求有严重的缓存问题,即在请求地址不发生变化的情况下,只有第一次请求会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了,客户端依然拿到的是缓存中的旧数据。
解决方案:在请求地址的后面加请求参数,保证每一次请求中的请求参数的值不相同
xhr.open(‘get’, ‘http://www.example.com?t=’ + Math.random());
============================================================================
同步
-
一个人同一时间只能做一件事情,只有一件事情做完,才能做另外一件事情
-
落实到代码上,就是上一行代码执行完成后,才能执行下一行代码,即代码逐行执行
console.log(“before”);
console.log(“after”);
异步
-
一个人一件事情做了一半,转而去做其他事情,当其他事情做完以后,再回过头来继续做之前未完成的事情。
-
落实到代码上,就是异步代码虽然需要花费时间去执行,但程序不会等待异步代码执行完成后再继续执行后续代码,而是直接执行后续代码,当后续代码执行完成后再回头看异步代码是否返回结果,如果已有返回结果,再调用事先准备好的回调函数处理异步代码执行的结果。
console.log(‘before’);
setTimeout(
() => { console.log(‘last’);
}, 2000);
console.log(‘after’);
问题: 发送一次请求代码过多,发送多次请求代码冗余且重复
解决方案:将请求代码封装到函数中,发请求时调用函数即可
Ajax 封装代码如下:
function ajax (options) {
// 默认值
var defaults = {
type: ‘get’,
url: ‘’,
async: true,
data: {},
header: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
},
success: function () {},
error: function () {}
}
// 使用用户传递的参数替换默认值参数
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 参数拼接变量
var params = ‘’;
// 循环参数
for (var attr in defaults.data) {
// 参数拼接
params += attr + ‘=’ + defaults.data[attr] + ‘&’;
// 去掉参数中最后一个&
params = params.substr(0, params.length-1)
}
// 如果请求方式为get
if (defaults.type == ‘get’) {
// 将参数拼接在url地址的后面
defaults.url += ‘?’ + params;
}
// 配置ajax请求
xhr.open(defaults.type, defaults.url, defaults.async);
// 如果请求方式为post
if (defaults.type == ‘post’) {
// 设置请求头
xhr.setRequestHeader(‘Content-Type’, defaults.header[‘Content-Type’]);
// 如果想服务器端传递的参数类型为json
if (defaults.header[‘Content-Type’] == ‘application/json’) {
// 将json对象转换为json字符串
xhr.send(JSON.stringify(defaults.data))
}else {
// 发送请求
xhr.send(params);
}
} else {
xhr.send();
}
// 请求加载完成
xhr.onload = function () {
// 获取服务器端返回数据的类型
var contentType = xhr.getResponseHeader(‘content-type’);
// 获取服务器端返回的响应数据
var responseText = xhr.responseText;
// 如果服务器端返回的数据是json数据类型
if (contentType.includes(‘application/json’)) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText);
}
// 如果请求成功
if (xhr.status == 200) {
// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
defaults.success(responseText, xhr);
} else {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(responseText, xhr);
}
}
// 当网络中断时
xhr.onerror = function () {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(xhr);
}
}
我们可以将上述代码抽离成一个 ajax.js 文件,这样我们的客户端只需要引入 ajax.js 文件,并传递相应的参数,这样就可以大大节省我们的代码量
========================================================================
模板引擎概述
作用: 使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来
官方地址:https://aui.github.io/art-template/zh-cn/index.html
- 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
- 准备 art-template 模板
- 告诉模板引擎将哪一个模板和哪个数据进行拼接
-
第一个参数是 模板ID
-
第二个参数是 对象
-
方法的返回值就是拼接好的 html 字符串
var html = template(‘tpl’, {username: ‘zhangsan’, age: ‘20’});
- 将拼接好的html字符串添加到页面中
document.getElementById(‘container’).innerHTML = html;
- 通过模板语法告诉模板引擎,数据和html字符串要如何拼接
============================================================================
-
模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。
-
异步上传二进制文件
- 准备HTML表单
- 将 HTML 表单转化为 formData 对象
var form = document.getElementById(‘form’);
var formData = new FormData(form);
- 提交表单对象
xhr.send(formData);
例如客户端代码如下:
服务器端代码如下:
-
之前我们使用 body-parser 第三方模块处理客户端向服务器端提供的 POST 请求参数,但是 body-parser 不能处理客户端向服务器端提供的 formData 对象
-
这里要使用 formidable 第三方模块:https://www.npmjs.com/package/formidable
// 引入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.post(‘/formData’, (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
res.send(fields);
});
});
// 监听端口
app.listen(3000);
注意:
-
Formdata 对象不能用于 get 请求,因为对象需要被传递到 send 方法中,而 get 请求方式的请求参数只能放在请求地址的后面。
-
服务器端 bodyParser 模块不能解析 formData 对象表单数据,我们需要使用 formidable 模块进行解析
- 获取表单对象中属性的值
formData.get(‘key’);
- 设置表单对象中属性的值
formData.set(‘key’, ‘value’);