前后端交互

2023-05-05 00:41| 来源: 网络整理| 查看: 265

一. 客户端模板引擎 1 - 模板引擎概述

**背景：**在传统网站中，客户端向服务端发送请求，服务器端都是将数据和html拼接好，再将拼接好的html字符串发送给客户端，但是现在我们使用Ajax技术向服务器端发送请求，服务器端大部分情况下都是返回json格式的数据作为响应内容，也就是说原本数据和html的拼接是在服务器端完成的，就比如前面我们学习的Node+Express。

在Node+Express的学习中我们使用的是art-template模板引擎，使用的方法是res.end或者res.render，然后将拼接好的html字符串响应给客户端，如下：

// 导入art-template const template = require('art-template'); // 模板路径 const views = path.join(__dirname, 'views', 'index.art'); // 使用template方法将模板和数据拼接 const html = template(views, { name: '张三', age: 20 }) // 将拼接好的字符串响应给客户端 res.end(html); // 或者 // 导入express框架 const express = require('express'); // 导入art-template const template = require('art-template'); // 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件 // 参数1:模板后缀参数2:使用的模板引擎 app.engine('art', require('express-art-template')) // 2.告诉express框架模板存放的位置是什么参数1:配置项的名字参数2:路径 app.set('views', path.join(__dirname, 'views')) // 3.告诉express框架模板的默认后缀是什么参数1:配置项的名字参数2:后缀 app.set('view engine', 'art'); app.get('/index', (req, res) => { // 前面我们使用res.end(html)方法将拼接好的字符串响应给客户端，现在我们使用render方法，更强大 // render方法做了下面一些事 // 1. 拼接模板路径 // 2. 拼接模板后缀 // 3. 哪一个模板和哪一个数据进行拼接 // 4. 将拼接结果响应给了客户端 // 参数1:模板名称参数2:向模板中传递的数据 res.render('index', { msg: 'message' }) }); 复制代码

现在这项工作是在客户端完成的，在客户端做数据拼接时，我们也需要使用模板引擎。

接下来我们就讲客户端模板引擎，无论服务器端模板引擎还是客户端模板引擎，它的作用都是：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。

官方地址： aui.github.io/art-templat…

2 - 客户端模板引擎使用步骤

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

注意下载的是template-web.js文件，和Node中通过npm下载的不一样。

复制代码准备 art-template 模板，通过模板语法告诉模板引擎，数据和html字符串要如何拼接 // id是模板的唯一标识 type="text/html"这样编辑器可以将script标签内部的代码当成html来解析 //这些代码就是html模板 {{ username }} 复制代码告诉模板引擎将哪一个模板和哪个数据进行拼接 var html = template('tpl', {username: 'zhangsan', age: '20'}); 复制代码将拼接好的html字符串添加到页面中 document.getElementById('container').innerHTML = html; 复制代码 3 - 导入模板变量 // 如果这个方法被定义在全局作用域下，那么在模板中可以直接使用如下方式使用 $imports.dataFormat(time) 复制代码 // 如果这个方法没有被定义在全局作用域下(比如定义在一个元素的onload方法里面) function dateFormat（未格式化的原始时间）{ return '已经格式化好的当前时间' } // 可以先将方法导入模板，然后在模板中再按照上面方式使用 template.defaults.imports.dateFormat = dateFormat; 复制代码二. 案例 1 - 验证邮箱地址唯一性

获取文本框并为其添加离开焦点事件离开焦点时，检测用户输入的邮箱地址是否符合规则如果不符合规则，阻止程序向下执行并给出提示信息向服务器端发送请求，检测邮箱地址是否被别人注册根据服务器端返回值决定客户端显示何种提示信息 /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/ 复制代码

代码示例：

app.js文件代码：

// 邮箱地址验证 app.get('/verifyEmailAdress', (req, res) => { // 接收客户端传递过来的邮箱地址 const email = req.query.email; // 判断邮箱地址注册过的情况 if (email == '[email protected]') { // 设置http状态码并对客户端做出响应 res.status(400).send({message: '邮箱地址已经注册过了, 请更换其他邮箱地址'}); } else { // 邮箱地址可用的情况 // 对客户端做出响应 res.send({message: '恭喜, 邮箱地址可用'}); } }); 复制代码

html文件代码：

验证邮箱地址是否已经注册 p:not(:empty) { padding: 15px; } .container { padding-top: 100px; } 邮箱地址 // 获取页面中的元素 var emailInp = document.getElementById('email'); var info = document.getElementById('info'); // 当文本框离开焦点以后 emailInp.onblur = function () { // 获取用户输入的邮箱地址 var email = this.value; // 验证邮箱地址的正则表达式 var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; // 如果用户输入的邮箱地址不符合规则 if (!reg.test(email)) { // 给出用户提示 info.innerHTML = '请输入符合规则的邮箱地址'; // 让提示信息显示为错误提示信息的样式 info.className = 'bg-danger'; // 验证不通过，阻止程序向下执行 return; } // 向服务器端发送请求 ajax({ type: 'get', url: 'http://localhost:3000/verifyEmailAdress', data: { email: email }, success: function (result) { console.log(result); // 更新html info.innerHTML = resulssage; info.className = 'bg-success'; }, error: function (result) { console.log(result) // 更新html info.innerHTML = resulssage; info.className = 'bg-danger'; } }); } 复制代码 2 - 搜索框内容自动提示 (使用了模板引擎)

获取搜索框并为其添加用户输入事件获取用户输入的关键字向服务器端发送请求并携带关键字作为请求参数将响应数据显示在搜索框底部

示例代码：

app.js文件代码：

// 输入框文字提示 app.get('/searchAutoPrompt', (req, res) => { // 搜索关键字 const key = req.query.key; // 提示文字列表 const list = [ '黑马程序员', '黑马程序员官网', '黑马程序员顺义校区', '黑马程序员学院报名系统', '传智播客', '传智博客前端与移动端开发', '传智播客大数据', '传智播客python', '传智播客java', '传智播客c++', '传智播客怎么样' ]; // 搜索结果 let result = list.filter(item => item.includes(key)); // 将查询结果返回给客户端 res.send(result); }); 复制代码

html文件代码：

搜索框输入文字自动提示 .container { padding-top: 150px; } .list-group { display: none; } {{each result}} {{$value}} {{/each}} // 获取搜索框 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; } // 开启定时器,让请求延迟发送,延迟了0.8s // 减少没必要的每次输入拼音都发送给服务端 timer = setTimeout(function () { // 向服务器端发送请求 // 向服务器端索取和用户输入关键字相关的内容 ajax({ type: 'get', url: 'http://localhost:3000/searchAutoPrompt', data: { key: key }, success: function (result) { // 使用模板引擎拼接字符串 // 从服务器接收的result是个数组 var html = template('tpl', {result: result}); // 将拼接好的字符串显示在页面中 listBox.innerHTML = html; // 显示ul容器 listBox.style.display = 'block'; } }) }, 800) } 复制代码 3 - 省市区三级联动

通过接口获取省份信息使用JavaScript获取到省市区下拉框元素将服务器端返回的省份信息显示在下拉框中为下拉框元素添加表单值改变事件（onchange）当用户选择省份时，根据省份id获取城市信息当用户选择城市时，根据城市id获取县城信息

示例代码：

html文件代码：

搜索框输入文字自动提示 .container { padding-top: 150px; } 请选择省份请选择城市请选择县城请选择省份 {{each province}} {{$value.name}} {{/each}} 请选择城市 {{each city}} {{$value.name}} {{/each}} 请选择县城 {{each area}} {{$value.name}} {{/each}} // 获取省市区下拉框元素 var province = document.getElementById('province'); var city = document.getElementById('city'); var area = document.getElementById('area'); // 获取省份信息 ajax({ type: 'get', url: 'http://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: 'http://localhost:3000/areas', data: { id: cid }, success: function(data) { var html = template('areaTpl', {area: data}); area.innerHTML = html; } }) } 复制代码三. FormData 1 - FormData 对象的作用

Ajax技术的缺点：

当我们使用Ajax技术传递参数的时候，还需要获取表单控件以及获取表单控件的值，然后将值按照指定的格式进行字符串拼接，然后再传递给服务端，特别繁琐。普通的Ajax是不能向服务器端传递二进制文件的，比如图片文件的传输。

使用FormData对象就可以解决这些问题，FormData对象的作用：

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件，比如图片文件视频文件。 FormData对象是html5中提供的，存在兼容性问题。 2 - FormData 对象的使用准备 HTML 表单复制代码将 HTML 表单转化为 formData 对象 var form = document.getElementById('form'); var formData = new FormData(form); 复制代码提交表单对象 xhr.send(formData); 复制代码

注意：

Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析。

示例代码：

app.js文件代码：

// 导入formidable第三方模块 const formidable = require('formidable'); app.post('/formData', (req, res) => { // 创建formidable表单解析对象 const form = new formidable.IncomingForm(); // 解析客户端传递过来的FormData对象 form.parse(req, (err, fields, files) => { // fields 存储普通请求参数 // files 存储上传的文件信息 res.send(fields); }); }); 复制代码

html文件代码：

Document // 获取按钮 var btn = document.getElementById('btn'); // 获取表单 var form = document.getElementById('form'); // 为按钮添加点击事件 btn.onclick = function () { // 将普通的html表单转换为表单对象 var formData = new FormData(form); // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', 'http://localhost:3000/formData'); // 发送ajax请求 xhr.send(formData); // 监听xhr对象下面的onload事件 xhr.onload = function () { // 对象http状态码进行判断 if (xhr.status == 200) { console.log(xhr.responseText); } } } 复制代码 3 - FormData 对象的实例方法

获取表单对象中属性的值

formData.get('key'); 复制代码

设置表单对象中属性的值

// 如果设置的表单属性存在,将会覆盖属性原有的值,如果设置的表单属性不存在,将会创建这个表单属性 formData.set('key', 'value'); 复制代码

删除表单对象中属性的值

// 删除的时候key和value一块都给删了 formData.delete('key'); 复制代码

向表单对象中追加属性值

formData.append('key', 'value'); // 当我们创建空的表单对象，就可以往里面append属性 var f = new FormData(); f.append('sex', '男'); console.log(f.get('sex')); 复制代码

**注意：**set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有属性的值，append会保留两个属性及其值，如下：

username: itcast username: itheima 复制代码

**注意：**如果不经过特殊设置的话，服务器端默认会接收最后一个username，所以服务器端最终接收的是username: itheima。

4 - FormData 二进制文件上传 1. 文件上传复制代码 var file = document.getElementById('file') // 当用户选择文件的时候 file.onchange = function () { // 创建空表单对象 var formData = new FormData(); // 将用户选择的二进制文件追加到表单对象中 files是一个集合 formData.append('attrName', this.files[0]); // 配置ajax对象，请求方式必须为post xhr.open('post', 'www.example.com'); xhr.send(formData); } 复制代码 2. 文件上传进度展示 // 当用户选择文件的时候 file.onchange = function () { // 文件上传过程中持续触发onprogress事件 xhr.upload.onprogress = function (ev) { // 当前上传文件大小/文件总大小再将结果转换为百分数 // 将结果赋值给进度条的宽度属性 bar.style.width = (ev.loaded / ev.total) * 100 + '%'; } } 复制代码 3. 文件上传图片即时预览

在我们将图片上传到服务器端以后，服务器端通常都会将图片地址做为响应数据传递到客户端，客户端可以从响应数据中获取图片地址，然后将图片再显示在页面中。

xhr.onload = function () { var result = JSON.parse(xhr.responseText); var img = document.createElement('img'); img.src = result.src; img.onload = function () { document.body.appendChild(this); } } 复制代码 4. 示例代码：

app.js文件代码：

// 实现文件上传的路由 app.post('/upload', (req, res) => { // 创建formidable表单解析对象 const form = new formidable.IncomingForm(); // 设置客户端上传文件的存储路径 form.uploadDir = path.join(__dirname, 'public', 'uploads'); // 保留上传文件的后缀名字 form.keepExtensions = true; // 解析客户端传递过来的FormData对象 form.parse(req, (err, fields, files) => { // fields 存储普通请求参数 // files 存储上传的文件信息 // 将客户端传递过来的文件地址响应到客户端 res.send({ // 使用split分割服务端存储文件的路径，结果是个数组，将数组index为1的元素返回给客户端 // 例如：{ path: /uploads/xxxxxxxxx.png } path: files.attrName.path.split('public')[1] }); }); }); 复制代码

html文件代码：

Document .container { padding-top: 60px; } .padding { padding: 5px 0 20px 0; } 请选择文件 0% // 获取文件选择控件 var file = document.getElementById('file'); // 获取进度条元素 var bar = document.getElementById('bar'); // 获取图片容器 var box = document.getElementById('box'); // 为文件选择控件添加onchanges事件 // 在用户选择文件时触发 file.onchange = function () { // 创建空的formData表单对象 var formData = new FormData(); // 将用户选择的文件追加到formData表单对象中 formData.append('attrName', this.files[0]); // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', 'http://localhost:3000/upload'); // 在文件上传的过程中持续触发 xhr.upload.onprogress = function (ev) { // ev.loaded 文件已经上传了多少 // ev.total 上传文件的总大小 var result = (ev.loaded / ev.total) * 100 + '%'; // 设置进度条的宽度 bar.style.width = result; // 将百分比显示在进度条中 bar.innerHTML = result; } // 发送ajax请求 xhr.send(formData); // 监听服务器端响应给客户端的数据 xhr.onload = function () { // 如果服务器端返回的http状态码为200 // 说明请求是成功的 if (xhr.status == 200) { // 将服务器端返回的数据转成json对象 { path: /uploads/xxxxxxxxx.png } var result = JSON.parse(xhr.responseText); // 动态创建img标签因为不想让用户看到图片加载过程 var img = document.createElement('img'); // 给图片标签设置src属性 img.src = result.path; // 当图片加载完成以后 img.onload = function () { // 将图片显示在页面中 box.appendChild(img); } } } } 复制代码

代码地址：github.com/iamkata/Aja…

四. 同源政策 1 - Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

2 - 什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。比如对于：www.example.com/dir/page.ht…

www.example.com/dir2/other.… example.com/dir/other.h… v2.www.example.com/dir/other.h… www.example.com:81/dir/other.h… www.example.com/dir/page.ht…

3 - 同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。其实这个请求是可以发送出去的，只不过浏览器拒绝接受服务器返回的结果，所以最终请求还是失败的。

4 - 使用 JSONP 解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

**原理：**script标签的src属性可以写任何地址，不受同源限制，比如以前我们的jquery地址，就是典型的向非同源服务器端请求的案例，JSONP解决方案就是利用script标签的这种特性，如下：

// 以前我们的jquery地址，就是典型的向非同源服务器端请求的案例

【本文地址】

公司简介

联系我们