模板引擎

一、模板引擎概述

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

二、使用步骤

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

<script src="./js/template-web.js"></script>

2.准备 art-template 模板模板中的拼接语法和服务器端的一样

 <script id="tpl" type="text/html">
     <div class="box"></div>
 </script>

注意：<script id="tpl" type="text/html"></script>中id是一个项目中众多模板的唯一标识，因为编辑器默认将<script>中的代码当成JS代码来解析，type="text/html这个属性的意思就是告诉编辑器把<script>中的标签当作HTML代码来解析了。

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

var html = template('tpl', 服务器端获取的数据);

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

document.getElementById(需要放入模板而获取的元素).innerHTML = html;

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

<script id="tpl" type="text/html">
    <div class="box"> {{ username }} </div>
</script>

FormData

一、FormData 对象的作用

1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式，但它是HTML5中提供的，存在兼容问题。
2.异步上传二进制文件

二、FormData 对象的使用

1.准备 HTML 表单

<form id="form">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <input type="button"/>
</form>

不需要设置请求地址和请求方式也不需要表单提交按钮这些都可以在Ajax请求中设置，但是一定要name属性

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

var form = document.getElementById('form'); 
var formData = new FormData(form);

3.提交表单对象

xhr.send(formData);

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

4.完整实例

<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
	// 获取按钮
	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);
			}
		}
	}
</script>

三、FormData 对象的实例方法

1.获取表单对象中属性的值 'key'就是表单中name的值

formData.get('key');

2.设置表单对象中属性的值如果属性存在则会覆盖原有值，如果不存在，将会创建这个表单属性

formData.set('key', 'value');

3.删除表单对象中属性的值

formData.delete('key');

4.向表单对象中追加属性值

formData.append('key', 'value');

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

5.完整实例

<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
	// 获取按钮
	var btn = document.getElementById('btn');
	// 获取表单
	var form = document.getElementById('form');
	// 为按钮添加点击事件
	btn.onclick = function () {
		// 将普通的html表单转换为表单对象
		var formData = new FormData(form);
		console.log(formData.get('username'));
		// 如果设置的表单属性存在 将会覆盖属性原有的值
		formData.set('username', 'itcast');
		formData.append('username', 'itheima');
		// 如果设置的表单属性不存在 将会创建这个表单属性
		formData.set('age', 100);
		// 删除用户输入的密码
		formData.delete('password');
		// 创建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);
			}
		}
		// 创建空的表单对象
		var f = new FormData();
		f.append('sex', '男');
		console.log(f.get('sex'));
	}
	</script>

四、FormData 二进制文件上传/文件上传进度展示/文件上传图片即时预览

<div class="container">
	<div class="form-group">
		<label>请选择文件</label>
		<input type="file" id="file">
		<div class="padding" id="box">
			<!--<img src="" class="img-rounded img-responsive">-->
		</div>
		<div class="progress">
			<div class="progress-bar" style="width: 0%;" id="bar"
		</div>
	</div>
</div>
<script type="text/javascript">
	// 获取文件选择控件
	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) {
				// 将服务器端返回的数据显示在控制台中
				var result = JSON.parse(xhr.responseText);
				// 动态创建img标签 不让用户看到图片显示的过程
				var img = document.createElement('img');
				// 给图片标签设置src属性
				img.src = result.path;
				// 当图片加载完成以后
				img.onload = function () {
					// 将图片显示在页面中
					box.appendChild(img);
				}
			}
		}
		
	}
</script>

同源政策

一、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 请求。

1.将不同源的服务器端请求地址写在 script 标签的 src 属性中服务器端返回的必须是正确的JS代码

<script src="www.example.com"></script>

2.服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数

const data = 'fn({name: "张三", age: "20"})';
 res.send(data);

3.在客户端全局作用域下定义函数 fn 且必须定义在不同源服务器端请求前面

function fn (data) { }

4.在 fn 函数内部对服务器端返回的数据进行处理

function fn (data) { console.log(data); }

5.完整实例

<script>
	function fn2 (data) {
		console.log('客户端的fn函数被调用了')
		console.log(data);
	}
</script>
<!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 -->
<script src="http://localhost:3001/better?callback=fn2"></script>
</script>

五、JSONP 代码优化

1.客户端需要将函数名称传递到服务器端。
2.将 script 请求的发送变成动态请求。

<button id="btn">点我发送请求</button>
<script>
	function fn2 (data) {
		console.log('客户端的fn函数被调用了')
		console.log(data);
	}
</script>
<script type="text/javascript">
	// 获取按钮
	var btn = document.getElementById('btn');
	// 为按钮添加点击事件
	btn.onclick = function () {
		// 创建script标签
		var script = document.createElement('script');
		// 设置src属性
		script.src = 'http://localhost:3001/better?callback=fn2';
		// 将script标签追加到页面中
		document.body.appendChild(script);
		// 为script标签添加onload事件
		script.onload = function () {
			// 将body中的script标签删除掉
			document.body.removeChild(script);
		}
	}
</script>

3.封装 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[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);
		}
	}

调用--调用前需要先引入

<button id="btn1">点我发送请求</button>
<button id="btn2">点我发送请求</button>
<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)
			}
		})
	}
</script>

4.服务器端代码优化之 res.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});
});

六、CORS 跨域资源共享（非同源资源共享）--非同源服务器端方案

CORS : 全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

Node 服务器端设置响应头示例代码：

app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Methods', 'GET, POST');
     next();
 })

七、访问非同源数据服务器端解决方案

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。

1.在自己网站的客户端设置好访问自己网站服务器端的Ajax
2.在自己网站服务器文件中中先引入向其他服务器请求数据的第三方模块

const request = require('request');

3.在服务器中设置向其他网站服务器发出请求的路由

app.get('/server', (req, res) => {
    //cross就是需要访问的另外一个服务器的位置
	request('http://localhost:3001/cross', (err, response, body) => {
	//body包含的就是另外一个服务器的返回结果
		res.send(body);
	})
});

八、withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

在客户端

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false 在有跨域请求的需求时设置为true

// 将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();
});

RESTful 风格的 API

一、传统请求地址回顾

GET http://www.example.com/getUsers         // 获取用户列表
GET http://www.example.com/getUser?id=1     // 比如获取某一个用户的信息
POST http://www.example.com/modifyUser      // 修改用户信息
GET http://www.example.com/deleteUser?id=1  // 删除用户信息

传统的请求地址问题在于语义不明且混乱，不同的人设计出来的请求地址也不同。

二、RESTful API 概述

一套关于设计请求的规范。传统的HTML表单提交是不支持PUT和DELETE，但是Ajax支持。

GET：    获取数据  
POST：   添加数据  
PUT：    更新数据  
DELETE： 删除数据

请求地址中需要操作的数据名字和数据库中集合的名字应该保持一致

users => /users
articles => /articles

三、RESTful API 的实现

GET：   http://www.example.com/users   获取用户列表数据
POST：  http://www.example.com/users   创建(添加)用户数据
GET：   http://www.example.com/users/1 获取用户ID为1的用户信息
PUT：   http://www.example.com/users/1 修改用户ID为1的用户信息
DELETE：http://www.example.com/users/1 删除用户ID为1的用户信息

客户端：

<script type="text/javascript">
	// 获取用户列表信息
	$.ajax({
		type: 'get',
		url: '/users',
		success: function (response) {
			console.log(response)
		}
	})
	// 获取id为1的用户信息
	$.ajax({
		type: 'get',
		url: '/users/1',
		success: function (response) {
			console.log(response)
		}
	})
	// 获取id为1的用户信息
	$.ajax({
		type: 'delete',
		url: '/users/10',
		success: function (response) {
			console.log(response)
		}
	})
	// 获取id为1的用户信息
	$.ajax({
		type: 'put',
		url: '/users/10',
		success: function (response) {
			console.log(response)
		}
	})
</script>

服务器端：

// 获取用户列表信息
app.get('/users', (req, res) => {
	res.send('当前是获取用户列表信息的路由');
});

// 获取某一个用户具体信息的路由
app.get('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在获取id为${id}用户信息`);
});

// 删除某一个用户
app.delete('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在删除id为${id}用户信息`);
});

// 修改某一个用户的信息
app.put('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在修改id为${id}用户信息`);
});

XML 基础

一、XML是什么

XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。

<students> 
     <student>
         <sid>001</sid>
         <name>张三</name>
         </student>
     <student>
         <sid>002</sid>
         <name>王二丫</name>
         </student>
 </students>

二、XML DOM

XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。

服务器端：

app.get('/xml', (req, res) => {
	res.header('content-type', 'text/xml');
	res.send('<message><title>消息标题</title><content>消息内容</content></message>')
});

客户端：

<button id="btn">发送请求</button>
<div id="container"></div>
<script type="text/javascript">
	var btn = document.getElementById('btn');
	var container = document.getElementById('container');
	btn.onclick = function () {
		var xhr = new XMLHttpRequest();
		xhr.open('get', '/xml');
		xhr.send();
		xhr.onload = function () {
			// xhr.responseXML 获取服务器端返回的xml数据
			var xmlDocument = xhr.responseXML;
			var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
			container.innerHTML = title;
		}
	}
</script>

Ajax编程扩展-学习笔记