一. 客户端模板引擎
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 拼接起来。
官方地址： https://aui.github.io/art-template/zh-cn/index.html
2 - 客户端模板引擎使用步骤
-
下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
注意下载的是template-web.js文件，和Node中通过npm下载的不一样。
- 准备 art-template 模板，通过模板语法告诉模板引擎，数据和html字符串要如何拼接
// id是模板的唯一标识 type="text/html"这样编辑器可以将script标签内部的代码当成html来解析
- 告诉模板引擎将哪一个模板和哪个数据进行拼接
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文件代码：
验证邮箱地址是否已经注册
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文件代码：
搜索框输入文字自动提示
3 - 省市区三级联动
- 通过接口获取省份信息
- 使用JavaScript获取到省市区下拉框元素
- 将服务器端返回的省份信息显示在下拉框中
- 为下拉框元素添加表单值改变事件（onchange）
- 当用户选择省份时，根据省份id获取城市信息
- 当用户选择城市时，根据城市id获取县城信息
示例代码：
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
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
代码地址：https://github.com/iamkata/Ajax-extension
四. 同源政策
1 - Ajax请求限制
Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。
2 - 什么是同源
如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。比如对于：http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）
3 - 同源政策的目的
同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。其实这个请求是可以发送出去的，只不过浏览器拒绝接受服务器返回的结果，所以最终请求还是失败的。
4 - 使用 JSONP 解决同源限制问题
jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。
原理：script标签的src属性可以写任何地址，不受同源限制，比如以前我们的jquery地址，就是典型的向非同源服务器端请求的案例，JSONP解决方案就是利用script标签的这种特性，如下：
// 以前我们的jquery地址，就是典型的向非同源服务器端请求的案例
- 将不同源的服务器端请求地址写在 script 标签的 src 属性中
- 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
const data = 'fn({name: "张三", age: "20"})';
res.send(data);
- 在客户端全局作用域下定义函数 fn
function fn (data) { }
- 在 fn 函数内部对服务器端返回的数据进行处理
function fn (data) { console.log(data); }
具体流程就是：
客户端：① 在全局作用域下（script 标签中）定义函数 fn，并且对服务器端返回的数据进行处理。② 将不同源的服务器端请求地址写在 script 标签的 src 属性中，当客户端执行到这个 script 标签会向 src 地址请求数据。
服务端：服务器端返回函数的调用，并且将参数传递过去。由于客户端接收到的是函数的调用，并且是写在客户端 script 标签中，所以服务器端返回的函数调用会被当做js代码执行，所以会在客户端执行函数调用。
jsonp是什么意思：jsonp 是 json with padding 的缩写，padding是填充的意思，意思就是在服务器端将json数据填充到函数调用中的意思。
示例代码：
客户端代码：
服务端代码：
app.get('/test', (req, res) => {
// 服务器端返回函数的调用,并且将参数传递过去
const result = 'fn({name: "张三"})';
res.send(result);
});
5 - JSONP 代码优化
1. 客户端需要将函数名称传递到服务器端
客户端代码：
服务端代码：
app.get('/better', (req, res) => {
// 接收客户端传递过来的函数的名称
const fnName = req.query.callback;
// 将函数名称对应的函数调用代码返回给客户端
const data = JSON.stringify({name: "张三"});
const result = fnName + '('+ data +')';
setTimeout(() => {
res.send(result);
}, 1000)
});
2. 将 script 请求的发送变成动态请求
点击按钮就发送请求，客户端代码如下：
3. 客户端封装 jsonp 函数，方便请求发送
客户端代码：
// 为按钮添加点击事件
btn1.onclick = function () {
// jsonp方法调用,参数是个对象
jsonp({
// 请求地址
url: 'http://localhost:3001/better',
data: {
name: 'lisi',
age: 30
},
success: function (data) {
console.log(123)
console.log(data)
}
})
}
// 封装jsonp方法,参数是个对象
function jsonp (options) {
// 动态创建script标签
var script = document.createElement('script');
// 拼接字符串的变量
var params = '';
for (var attr in options.data) {
params += '&' + attr + '=' + options.data[attr];
}
// 函数名字变成随机名字 myJsonp0124741
var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
// 它已经不是一个全局函数了,我们要想办法将它变成全局函数
// 就是挂载到window下,这样服务器端在返回函数调用的时候就可以找到这个函数了
// .后面不能跟一个变量,所以跟一个[]
window[fnName] = options.success;
// 为script标签添加src属性
script.src = options.url + '?callback=' + fnName + params;
// 将script标签追加到页面中
document.body.appendChild(script);
// 为script标签添加onload事件
script.onload = function () {
document.body.removeChild(script);
}
}
4. 服务器端代码优化之 res.jsonp 方法
其实Express框架的res对象下面有一个封装好的jsonp方法，我们只需要把参数传递过去就好了，jsonp方法内部做的就是下面代码注释的内容。
app.get('/better', (req, res) => {
// 接收客户端传递过来的函数的名称
//const fnName = req.query.callback;
// 将函数名称对应的函数调用代码返回给客户端
//const data = JSON.stringify({name: "张三"});
//const result = fnName + '('+ data +')';
// setTimeout(() => {
// res.send(result);
// }, 1000)
res.jsonp({name: 'lisi', age: 20});
});
6 - 案例：使用jsonp获取腾讯天气信息
客户端代码如下：
使用jsonp获取腾讯天气信息
代码执行步骤：
- cd到s1目录，执行
npm install下载第三方模块 - 执行
node app.js运行服务器 - 在浏览器输入
http://localhost:3000/06.06.使用jsonp获取腾讯天气信息.html运行代码
结果如下：
7 - CORS 跨域资源共享
CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。
当客户端向服务器端发送请求时，如果浏览器检测到这个请求是跨域的，就会自动在请求头中加入origin字段，origin字段包含当前发送请求的协议、域名、端口号信息，服务器端会根据这个字段的值来决定是否同意该请求，但无论服务器端是否同意该请求，服务器端都会给客户端一个正常的http响应，浏览器如何才能知道服务器端是否同意这次请求呢？如果服务器同意该请求，会在响应头加入Access-Control-Allow-Origin字段，否则不会加入该字段，浏览器会根据响应头中是否有该字段来判断是否同意该请求。
这种技术只需要服务端做一些相应的配置，客户端代码不变即可。
origin: http://localhost:3000
Access-Control-Allow-Origin: 'http://localhost:3000' // 允许哪些客户端访问我，* 代表允许所有客户端访问这个服务端
Node 服务器端设置响应头示例代码：
// 拦截所有请求
app.use((req, res, next) => {
// 允许哪些客户端访问我
res.header('Access-Control-Allow-Origin', '*'); // * 代表允许所有的客户端访问我
res.header('Access-Control-Allow-Methods', 'GET, POST'); // 允许客户端使用哪些请求方法访问我
next();
})
8 - 访问非同源数据，服务器端解决方案
同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。服务端开发人员可以访问非同源网站中的数据，当客户端想获取非同源网站中的数据时，可以让自己的服务端先获取非同源网站中的数据，然后自己服务端再将数据响应给自己的客户端，这样就绕过了浏览器的同源政策限制。
那么，A服务端如何向B服务端请求数据呢？我们使用node下的request第三方模块即可。
A客户端向A服务端发送请求：
btn.onclick = function () {
ajax({
type: 'get',
url: 'http://localhost:3000/server',
success: function (data) {
console.log(data);
}
})
A服务端接收到请求，再向B服务端发送请求：
// 向其他服务器端请求数据的模块
const request = require('request');
app.get('/server', (req, res) => {
request('http://localhost:3001/cross', (err, response, body) => {
res.send(body);
})
});
B服务端返回响应信息：
app.get('/cross', (req, res) => {
res.send('ok')
});
9 - cookie复习
http协议的请求是无状态的，服务端只负责对客户端的请求做出响应，响应完之后这次请求就结束了，无论客户端来多少次，他们都是陌生人。
在早期不需要登录的网站中，这样的请求是没什么毛病的，但是现在的网站大多都需要登录，所以需要用cookie。当客户端第一次访问服务端的时候，服务端会给客户端一个cookie，这个cookie就相当于一个身份证，当客户端再一次访问服务端的时候，这个cookie会随着请求被自动发送到服务端，服务端拿到身份证就知道客户端是谁了。
10 - withCredentials属性
当不涉及到跨域请求的时候，cookie的传递是没问题的，但是当涉及到跨域请求的时候，cookie就不会随着请求被发送到服务端了，这也是出于安全性的考虑，防止用户信息被窃取。那么如果我们想要跨域并且携带cookie，怎么办呢？
在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
在客户端设置如下：
withCredentials：true // 指定在涉及到跨域请求时，是否携带cookie信息，默认值为false，需要设置为true
在服务端设置如下：
Access-Control-Allow-Credentials：true // 允许客户端发送请求时携带cookie
代码地址：https://github.com/iamkata/Ajax-tongyuanzhengce