Ajax前后端交互利器详解(一)

1.4、传递get请求参数

---

• 传统网站表单提交

<!– 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 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式

1.5、传递POST请求参数

---

• 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

1.6、请求参数的格式

---

我们客户端在向服务器端发送请求参数有以下几种格式，不同的格式需要设置的请求头也是不一样的

1. 设置请求头为 application/x-www-form-urlencoded ,传递如下请求参数

name=zhangsan&age=20&sex=男

2. 设置请求头为 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.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状态码 | 不需要 | 需要 |

| 被调用次数 | 一次 | 多次 |

1.8、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 请求报错通常会出现以下几种情况，我们来进行查看并排查

1. 网络畅通，服务器端没有接收到请求，返回404状态码

检查请求地址是否错误。

2. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。

服务器端错误，找后端程序员进行沟通

app.get(‘/error’, (req, res) => {

// 打印一个未定义的变量,服务器端就会出现错误

console.log(abc);

res.send(“hello”)

})

3. 网络中断，请求无法发送到服务器端。

会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

// 当网络中断时会触发onerrr事件

xhr.onerror = function() {

alert(‘网络中断, 无法发送Ajax请求’)

}

• Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的(0、1、2、3、4)

• Http状态码: 表示请求的处理结果 是服务器端返回的

1.9、低版本 IE 浏览器的缓存问题

---

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同

xhr.open(‘get’, ‘http://www.example.com?t=’ + Math.random());

2、Ajax异步编程

============================================================================

2.1、同步异步概述

---

同步

• 一个人同一时间只能做一件事情，只有一件事情做完，才能做另外一件事情

• 落实到代码上，就是上一行代码执行完成后，才能执行下一行代码，即代码逐行执行

console.log(“before”);

console.log(“after”);

异步

• 一个人一件事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头来继续做之前未完成的事情。

• 落实到代码上，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

console.log(‘before’);

setTimeout(

() => { console.log(‘last’);

}, 2000);

console.log(‘after’);

2.2、Ajax封装

---

问题: 发送一次请求代码过多，发送多次请求代码冗余且重复

解决方案：将请求代码封装到函数中，发请求时调用函数即可

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 文件，并传递相应的参数，这样就可以大大节省我们的代码量

3、模板引擎

========================================================================

模板引擎概述

作用: 使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来

官方地址：https://aui.github.io/art-template/zh-cn/index.html

3.1 使用步骤

---

1. 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

2. 准备 art-template 模板

3. 告诉模板引擎将哪一个模板和哪个数据进行拼接

• 第一个参数是 模板ID

• 第二个参数是 对象

• 方法的返回值就是拼接好的 html 字符串

var html = template(‘tpl’, {username: ‘zhangsan’, age: ‘20’});

4. 将拼接好的html字符串添加到页面中

document.getElementById(‘container’).innerHTML = html;

5. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接

5、FormData

============================================================================

5.1、FormData对象的作用

---

1. 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。

2. 异步上传二进制文件

5.2、FormData对象的使用

---

1. 准备HTML表单

2. 将 HTML 表单转化为 formData 对象

var form = document.getElementById(‘form’);

var formData = new FormData(form);

3. 提交表单对象

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);

注意：

1. Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。

2. 服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析

5.3、FormData对象的实例方法

---

1. 获取表单对象中属性的值

formData.get(‘key’);

2. 设置表单对象中属性的值

formData.set(‘key’, ‘value’);