1、ajax应用回顾:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX基础回顾</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'test.php')
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
console.log(this)
}
</script>
</body>
</html>
2、ajax的相应类型:
response和responseText得到的结果是一样的。但是二者有什么区别呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX基础回顾</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'test.php')
xhr.send()
// 我们通过代码告诉请求代理对象,服务端响应给我们的是 JSON
xhr.responseType = 'json'
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
console.log(this.response)
// this.response 获取到的结果会根据 this.responseType 的变化而变化
// this.responseText 永远获取的是字符串形式的响应体(它也不能用于二进制数据)
//这个兼容性不好的时候用这个 :
//var res = JSON.parse(this.responseText)
// console.log(res )
}
</script>
</body>
</html>
3、模板引擎使用
模板引擎:artTemplate:https://aui.github.io/art-template/
模板引擎实际上就是一个 API,模板引擎有很多种,使用方式大同小异,目的为了可以更容易的将数据渲染到
HTML中。
步骤: 1. 选择一个模板引擎 https://github.com/tj/consolidate.js#supported-template-engines
2. 下载模板引擎(JS文件)
3. 引入到页面中
4. 准备一个模板
5. 准备一个数据
6. 通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML
7. 将渲染结果的HTML 设置到 默认元素的 innerHTML 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX 动态表格渲染</title>
</head>
<body>
<table id="demo"></table>
<!--
script 标签的特点是
1. innerHTML 永远不会显示在界面上
2. 如果 type 不等于 text/javascri