共计 5099 个字符，预计需要花费 13 分钟才能阅读完成。
模板引擎
模板引擎概述
作用：应用模板引擎提供的模板语法，能够将数据和 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();});
正文完
