模板引擎
模板引擎概述
作用：应用模板引擎提供的模板语法，能够将数据和 HTML 拼接起来。
官网地址： https://aui.github.io/art-tem...
应用步骤
- 下载 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>FormData
- 模仿HTML表单，相当于将HTML表单映射成表单对象，主动将表单对象中的数据拼接成申请参数的格局。
- 异步上传二进制文件
FormData 对象的应用
- 筹备 HTML 表单
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button"/></form>- 将 HTML 表单转化为 formData 对象
var form = document.getElementById('form'); var formData = new FormData(form);- 提交表单对象
xhr.send(formData);留神：
Formdata 对象不能用于 get 申请，因为对象须要被传递到 send 办法中，而 get 申请形式的申请参数只能放在申请地址的前面。
服务器端 bodyParser 模块不能解析 formData 对象表单数据，咱们须要应用 formidable 模块进行解析。
FormData 对象的实例办法
- 获取表单对象中属性的值
formData.get('key');- 设置表单对象中属性的值
formData.set('key', 'value');- 删除表单对象中属性的值
formData.delete('key');- 向表单对象中追加属性值
formData.append('key', 'value');留神：set 办法与 append 办法的区别是，在属性名已存在的状况下，set 会笼罩已有键名的值，append会保留两个值。
FormData 二进制文件上传
<input type="file" id="file"/> var file = document.getElementById('file')// 当用户抉择文件的时候 file.onchange = function () { // 创立空表单对象 var formData = new FormData(); // 将用户抉择的二进制文件追加到表单对象中 formData.append('attrName', this.files[0]); // 配置ajax对象，申请形式必须为post xhr.open('post', 'www.example.com'); xhr.send(formData); }FormData 文件上传进度展现
// 当用户抉择文件的时候 file.onchange = function () { // 文件上传过程中继续触发onprogress事件 xhr.upload.onprogress = function (ev) { // 以后上传文件大小/文件总大小 再将后果转换为百分数 // 将后果赋值给进度条的宽度属性 bar.style.width = (ev.loaded / ev.total) * 100 + '%'; } }FormData 文件上传图片即时预览
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); } }同源政策
Ajax申请限度
Ajax 只能向本人的服务器发送申请。比方当初有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 申请，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 申请，然而 A 网站是不能向 B 网站发送 Ajax申请的，同理，B 网站也不能向 A 网站发送 Ajax申请。
什么是同源
如果两个页面领有雷同的协定、域名和端口，那么这两个页面就属于同一个源，其中只有有一个不雷同，就是不同源。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：不同源（协定不同）同源政策的目标
同源政策是为了保障用户信息的平安，避免歹意的网站窃取数据。最后的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能拜访的。
随着互联网的倒退，同源政策也越来越严格，在不同源的状况下，其中有一项规定就是无奈向非同源地址发送Ajax 申请，如果申请，浏览器就会报错。
应用 JSONP 解决同源限度问题
jsonp 是 json with padding 的缩写，它不属于 Ajax 申请，但它能够模仿 Ajax 申请。
- 将不同源的服务器端申请地址写在 script 标签的 src 属性中
<script src="www.example.com"></script> <script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>- 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据须要作为函数调用的参数。
const data = 'fn({name: "张三", age: "20"})'; res.send(data);- 在客户端全局作用域下定义函数 fn
function fn (data) { }- 在 fn 函数外部对服务器端返回的数据进行解决
function fn (data) { console.log(data); }JSONP 代码优化
- 客户端须要将函数名称传递到服务器端。
- 将 script 申请的发送变成动静申请。
- 封装 jsonp 函数，不便申请发送。
- 服务器端代码优化之 res.jsonp 办法。
<script type="text/javascript"> // 获取按钮 var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); // 为按钮增加点击事件 btn1.onclick = function () { jsonp({ // 申请地址 url: 'http://localhost:3001/better', data: { name: 'lisi', age: 30 }, success: function (data) { console.log(123) console.log(data) } }) } btn2.onclick = function () { jsonp({ // 申请地址 url: 'http://localhost:3001/better', success: function (data) { console.log(456789) console.log(data) } }) } 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[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); } } </script>CORS 跨域资源共享
CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它容许浏览器向跨域服务器发送 Ajax 申请，克服了 Ajax 只能同源应用的限度。
origin: http://localhost:3000 Access-Control-Allow-Origin: 'http://localhost:3000' Access-Control-Allow-Origin: '*'Node 服务器端设置响应头示例代码：
app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST'); next(); })拜访非同源数据 服务器端解决方案
同源政策是浏览器给予Ajax技术的限度，服务器端是不存在同源政策限度。
withCredentials属性(实现跨域登录)
在应用Ajax技术发送跨域申请时，默认状况下不会在申请中携带cookie信息。
withCredentials：指定在波及到跨域申请时，是否携带cookie信息，默认值为false
loginBtn.onclick = function () { // 将html表单转换为formData表单对象 var formData = new FormData(loginForm); // 创立ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', 'http://localhost:3001/login'); // 当发送跨域申请时，携带cookie信息 xhr.withCredentials = true; // 发送申请并传递申请参数 xhr.send(formData); // 监听服务器端给予的响应内容 xhr.onload = function () { console.log(xhr.responseText); }}Access-Control-Allow-Credentials：true 容许客户端发送申请时携带cookie
// 拦挡所有申请app.use((req, res, next) => { // 1.容许哪些客户端拜访我 // * 代表容许所有的客户端拜访我 // 留神：如果跨域申请中波及到cookie信息传递，值不能够为*号 比方是具体的域名信息 res.header('Access-Control-Allow-Origin', 'http://localhost:3000') // 2.容许客户端应用哪些申请办法拜访我 res.header('Access-Control-Allow-Methods', 'get,post') // 容许客户端发送跨域申请时携带cookie信息 res.header('Access-Control-Allow-Credentials', true); next();});