1.复制粘贴13文件夹，改名为14，在其static目录下新建文件ajax.js，ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），无需重新加载整个网页，只对网页的局部进行更新。
2.在ajax.js中写入下列代码，ajax的核心是XMLHttpRequest 对象，XMLHttpRequest 已经成为w3c的标准，通过http协议从服务器获取数据。options.type是http请求方式，常见的有get、post、put、delete请求
function ajax(options) {
var xhr = new XMLHttpRequest()
var str = ""
for (var key in options.data) {
str += "&" + key + "=" + options.data[key]
}
str = str.slice(1)
if (options.type == "get") {
var url = options.url + "?" + str
xhr.open("get", url)
xhr.send()
} else if (options.type == "post") {
xhr.open("post", options.url)
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
xhr.send(str)
}else if(options.type=='put'){
xhr.open('put', options.url)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send(str)
}else if(options.type=='delete'){
xhr.open('delete', options.url)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send(str)
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var d = xhr.responseText
options.success && options.success(d)
} else if (xhr.status != 200) {
options.error && options.error(xhr.status)
}
}
}
3.在home.html中引入ajax.js，在其head标签中添加<script src="ajax.js"></script>（外部文件引入js代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<script src="ajax.js"></script>
<title></title>
</head>
<body>
<h3>首页home</h3>
<script>
</script>
</body>
</html>
4.在home.html的body中添加table标签，
<table border="1">
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr id="template">
<td>{{id}}</td>
<td>{{username}}</td>
<td>{{password}}</td>
</tr>
</table>
5.在其script标签中写入代码，调用自定义ajax方法，其对象参数的success的回调函数中调用自定义的template（模板）方法；JSON.parse(str)是将字符转换成对象
ajax({
type: 'get',
url: 'http://127.0.0.1:8080/users',
data:{},
success: function (results) {
template('#template',JSON.parse(results))
},
error: function (err) {
console.log(err)
}
})
function template(id, data) {
var template = document.querySelector(id),
fragment = ''
for (i = 0; i < data.length; i++) {
fragment += template.outerHTML
.replace(/\{\{id\}\}/, data[i].id)
.replace(/\{\{username\}\}/, data[i].username)
.replace(/\{\{password\}\}/, data[i].password)
}
template.outerHTML = fragment
}
6.完整的修改后home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<script src="ajax.js"></script>
<title></title>
</head>
<body>
<h3>首页home</h3>
<table border="1">
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr id="template">
<td>{{id}}</td>
<td>{{username}}</td>
<td>{{password}}</td>
</tr>
</table>
<script>
ajax({
type: 'get',
url: 'http://127.0.0.1:8080/users',
data: {},
success: function (results) {
template('#template',JSON.parse(results))
},
error: function (err) {
console.log(err)
}
})
function template(id, data) {
var template = document.querySelector(id),
fragment = ''
for (i = 0; i < data.length; i++) {
fragment += template.outerHTML
.replace(/\{\{id\}\}/, data[i].id)
.replace(/\{\{username\}\}/, data[i].username)
.replace(/\{\{password\}\}/, data[i].password)
}
template.outerHTML = fragment
}
</script>
</body>
</html>
7.终端中node server，浏览器打开的效果
