本文共 5490 字，大约阅读时间需要 18 分钟。

一、模板引擎

1.1模板引擎概述

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

官方地址： https://aui.github.io/art-template/zh-cn/index.html

1.2使用步骤

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

2. 准备 art-template 模板

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

var html = template('tpl', {
   username: 'zhangsan', age: '20'});

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

document.getElementById('container').innerHTML = html;

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

也可以实现循环。

例子：

二、FormData

2.1 FormData 对象的作用

1. 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
2. 异步上传二进制文件

2.2 FormData 对象的使用–表单

1. 准备 HTML 表单

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

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

3. 提交表单对象

xhr.send(formData);

注意：

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

html表单部分：

app.js服务器部分

//引用模块const formidable = require('formidable');app.post('/formData', (req, res) => {
   	// 创建formidable表单解析对象	const form = new formidable.IncomingForm();	// 解析客户端传递过来的FormData对象	form.parse(req, (err, fields, files) => {
   		res.send(fields);	});});

输入111，111

效果图:

2.3 FormData 对象的实例方法–表单

1. 获取表单对象中属性的值

formData.get('key');

2. 设置表单对象中属性的值

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

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

formData.delete('key');

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

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

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

2.4 FormData 二进制文件上传

html部分：

	
   
		
    
			
     请选择文件			
     			
     
      123
     
	
    
			
    
   

app.js服务器部分

//引用模板const formidable = require('formidable');// 实现文件上传的路由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) => {
   		// 将客户端传递过来的文件地址响应到客户端		res.send("ok");	});});

效果：

• 上传进度展示
  文件上传过程中持续触发onprogress事件

//html部分
   
				
    
     0%
    
			
   
// 在文件上传的过程中持续触发			xhr.upload.onprogress = function (ev) {
   				// ev.loaded 文件已经上传了多少				// ev.total  上传文件的总大小				var result = (ev.loaded / ev.total) * 100 + '%';				// 设置进度条的宽度				bar.style.width = result;				// 将百分比显示在进度条中				bar.innerHTML = result;				}

三、$.Ajax()

$.Ajax()是jQuery对ajax封装的一种方法，使用前要引入jQuery。

作用：发送Ajax请求；发送jsonp请求。

3.1 发送Ajax请求

$.ajax({
   				// 请求方式				type: 'post',				// 请求地址				url: '/base',				data: {
   				 	name: 'zhangsan',				 	age: 100				},				// 在请求发送之前调用				beforeSend: function () {
   					alert('我是请求前的')				},				// 请求成功以后函数被调用				success: function (response) {
   					// response为服务器端返回的数据					// 方法内部会自动将json字符串转换为json对象					console.log(response);				},				// 请求失败以后函数被调用				error: function (xhr) {
   					console.log(xhr)				}			})

• 向服务器发送json格式

var params = {
   name: 'wangwu', age: 300}		$('#btn').on('click', function () {
   			$.ajax({
   				// 请求方式				type: 'post',				// 请求地址				url: '/user',				//转化				data: JSON.stringify(params),				// 指定参数的格式类型				contentType: 'application/json',				// 请求成功以后函数被调用				success: function (response) {
   					// response为服务器端返回的数据					// 方法内部会自动将json字符串转换为json对象					console.log(response);				}			})		});

3.2 发送jsonp请求

$.ajax({
       url: '/jsonp',    // 指定当前发送jsonp请求    dataType: 'jsonp',    // 修改callback参数名称 （选填）    jsonp: 'cb',    // 指定函数名称 （选填）    jsonCallback: 'fnName',    success: function (response) {
   } })

3.3 serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

四、$post()和get、

4.1 方法概述

作用：$.get方法用于发送get请求。

$.post方法用于发送post请求。

$.get('/base', 'name=zhangsan&age=30', function (response) {
   				console.log(response)			})						$.post('/base', function (response) {
   				console.log(response)	})

五、jQuery中Ajax全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发

ajaxStart()     // 当请求开始发送时触发ajaxSend()//ajax请求时ajaxSuccess()//ajax获取数据后ajaxComplete() //ajax请求完成时ajaxError()//ajax请求发生错误后ajaxStop()//ajax请求停止后

例子：

$(document).on('ajaxStart',function(){
   			console.log('start')		})				$(document).on('ajaxComplete',function(){
   			console.log('complete')		})

六、RESTful 风格的 API

6.1 RESTful API 概述

一套关于设计请求的规范。

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

RESTful API 的实现

在服务器端

// 获取用户列表信息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 基础

7.1 XML是什么

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

         
             
     
      001
              
     
      张三
              
         
             
     
      002
              
     
      王二丫
              
     
   

7.2 XML DOM

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

例子

在服务器端响应一个XML

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

客户端获得xml的数据方法

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;			}

转载地址：http://kaah.baihongyu.com/