今天学习了ajax里面一个有用的知识点那就是模板引擎，这个在nodejs里面也常用，可以使用模板引擎提供的模板语法，将数据与HTML方便的拼接起来，以及简单的ajax函数封闭，一般我们在使用中，都会给一个接口文档，是封装好的包。
模板引擎
第一步 下载模板引擎
模板引擎官方地址
下载后是一个js文件。
第二步 引入入js文件
第三步 准备art-template 模板
这里是一个script标签 我们把type类型设为text/html 方便我们在里面输入HTML标签。记住给这个模板一个id名，后面要用到。
第四步 告诉模板引擎将那个模板和数据进行拼接
我们使用到了template这个函数方法，是模板引擎给与我们的，里面第一个参数就是我们上一步里面的模板的id名，第二个参数就是我们从服务器获取到的数据。
这个方法有一个返回值，我们用一个变量接收。
第五步 将拼接好的html字符串添加到页面中
这里我们获取到一个HTML里面的一个id值为container的div元素，将我们上一步获取到的模板引擎返回值添加到div元素中，这也正是我们的目的，将获取到的后台数据以我们想要的类型输入到页面中。
第六步 使用模板语法告诉模板引擎，数据和html字符串要如何拼接
如果没有这一步，你会发现你插入进去的模板没有如何东西，我们需要把数据显示在页面中前，先插入到模板中，这样才算是完整的步骤，我使用的这个模板引擎在模板中如何使用的语法我并没有说明，
具体给出链接查看学习：语法
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
<h1>{{username}} {{age}}</h1>
</script>
<script type="text/javascript">
// 3.告诉模板引擎将那个数据和哪个模板进行拼接
// 1) 模板id 2)数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', {username: 'zhangsan', age: 30});
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
简单的ajax函数封包
先来一个最简单的：
//封装函数
function ajax (active){
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open(active.type, active.url);
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function (){
active.success(xhr.responseText);
}
}
这其实就是一次简单的封闭我们要调用也很简单：
var btn = document.getElementById('btn');
btn.onclick = function(){
ajax({
type:'get',
url:'http://localhost:3000/first',
success:function(value){
alert(value);
}
})
}
我们发现这个太简陋了有很多的问题：
1.请求参数位置的问题
将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置
get 放在请求地址的后面
post 放在send方法中
2.请求参数格式的问题
application/x-www-form-urlencoded
参数名称=参数值&参数名称=参数值
name=zhangsan&age=20
application/json
{name: 'zhangsan', age: 20}
1.传递对象数据类型对于函数的调用者更加友好
2.在函数内部对象数据类型转换为字符串数据类型更加方便
*/
于是我们按照问题开始改进函数：
我们先增加一个date对象，里面是放我们请求参数用params变量接收，还要将这个对象格式转换成name=zhangsan&age=20的格式，然后用到了一个方法循环拼接加裁剪。然后我们进行判断，如果请求方式是get，那么就讲值放在url后面，如果是post就放在send（）里面。
进入post请求判断后我们还需要设置很多东西，首先我们要设置请求参数格式类型，但是我们不能把格式写固定，有可能传普通对象类型，还可能是json对象类型，然后我们就在设置了一个header对象。然后获取到类型并赋值给变量contentType。
注意：我们如果是传的json对象进去我们不能直接把对象传入send（）中，我们要先把他转换成字符串类型。所以我们又进行了一次判断。
然后我们就进入到onload事件中了，我们不知道请求是否会成功，所以我们要进去判断如果http状态码为200，我们就调用success函数，否则就调用error函数，当然我们需要先添加这个请求失败的函数error。
大多时候服务器端返回给我们的是json对象，当是我们拿到后是json对象字符串，我们需要转换为json对象，我们将这部直接封装在函数里，但是我们要考虑到确认返回的是json数据。
服务器在返回数据时，会在响应头中设置数据的返回类型，我们获取到这个类型，然后进行判断就可以做到是否是json数据
我们使用xhr.getResponseHeader();这个方法就可以获取到响应头中的数据，我们只需要传入 ‘Content-Type’ 就可以了。
在判断中我们使用了字符串里面的 includes（）这个方法，他可以判断当前字符串是否包含一字符，包含就返回true。
我们发现如果要调用函数要传递很多的参数，这样太麻烦，我们只需要传递必要的参数就可以了，没有传递的参数我们给一个默认值就可以了。
于是我们在函数里面内置一个对象，里面存储的都是默认的值，这个对象就是开头的 defaults 对象。然后将函数里面的其他值都默认使用这个对象里面的值，而我们只需要将用户传进来的对象来覆盖这个defaults对象就可以了。
这时我们就用到了 Object.assign（）方法，他的作业就是对象覆盖，第一个参数是要被覆盖的对象 我们传入defaults对象，第二个参数就是覆盖的对象 也就是 options对象。
到此整体思路大致介绍完毕，下面是具体的代码：
//调用函数
ajax({
type: 'post',
// 请求地址
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log('这里是success函数');
console.log(data)
}
})
//封装函数
function ajax (options) {
// 存储的是默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数
for (var attr in defaults.data) {
// 将参数转换为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// 判断请求方式
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
/*
{
name: 'zhangsan',
age: 20
}
name=zhangsan&age=20
*/
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post
if (defaults.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
var contentType = defaults.header['Content-Type']
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
}else {
// 发送请求
xhr.send();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
xhr.onload = function () {
// xhr.getResponseHeader()
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 如果响应类型中包含applicaition/json
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候
if (xhr.status == 200) {
// 请求成功 调用处理成功情况的函数
defaults.success(responseText, xhr);
}else {
// 请求失败 调用处理失败情况的函数
defaults.error(responseText, xhr);
}
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
