文章目录
响应数据格式
提问：如果希望服务端返回一个复杂数据，该如何处理？
关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 JavaScript 解析。
1. XML
一种数据描述手段
老掉牙的东西，简单演示一下啦，基本现在的项目不用了。
淘汰的原因：数据冗余太多
xml.php
<?php
header('Content-Type: application/xml');
?>
<?xml version="1.1" encoding="utf-8"?>
<person>
<name>羊羊羊羊羊</name>
<age>18</age>
<gender>男</gender>
</person>
ajax-xml.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX 请求 XML 格式的数据</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'xml.php')
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
// this.responseXML 专门用于获取服务端返回的 XML 数据，操作方式就是通过 DOM 的方式操作
// 但是需要服务端响应头中的 Content-Type 必须是 application/xml
console.log(this.responseXML.documentElement.children[0].innerHTML)
console.log(this.responseXML.documentElement.getElementsByTagName('name')[0])
}
</script>
</body>
</html>
2. JSON
也是一种数据描述手段，类似于 JavaScript 字面量方式
服务端采用 JSON 格式返回数据，客户端按照 JSON 格式解析数据。
不管是 JSON 也好，还是 XML，只是在 AJAX 请求过程中用到，并不代表它们之间有必然的联系，它们只是数据协议罢了
单纯的用普通js去处理json，如果数据量过大的话那么是非常麻烦的，所以一般我们都用模板引擎来快速处理数据。
处理响应数据渲染
模板引擎：
artTemplate：https://aui.github.io/art-template/
模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到HTML中
具体用法可以去artTemplate文档中查看，非常详细也非常方便
案例：artTemplate模板引擎渲染数据
test.php 里放大量json数据
srtTemplate.php
<!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/javascript 的话，内部的内容不会作为 JavaScript 执行
-->
<script id="tmpl" type="text/x-art-template">
{{each comments}}
<!-- each 内部 $value 拿到的是当前被遍历的那个元素 -->
<tr>
<td>{{$value.author}}</td>
<td>{{$value.content}}</td>
<td>{{$value.created}}</td>
</tr>
{{/each}}
</script>
<script src="template-web.js"></script>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'test.php')
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
var res = JSON.parse(this.responseText)
// 模板所需数据
var context = { comments: res.data }
// 借助模板引擎的API 渲染数据
var html = template('tmpl', context)
console.log(html)
document.getElementById('demo').innerHTML = html
// 1. 选择一个模板引擎
// https://github.com/tj/consolidate.js#supported-template-engines
// 2. 下载模板引擎JS文件
// 3. 引入到页面中
// 4. 准备一个模板
// 5. 准备一个数据
// 6. 通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML
// 7. 将渲染结果的HTML 设置到 默认元素的 innerHTML 中
// var tmpl = '{{if user}}<h2>{{user.name}}</h2>{{/if}}'
//
// 为什么不在JS变量中写模板？
// 1. 如果将模板写到JS中，维护不方便，不能换行，没有着色
// 为什么使用script标记
// 1. script不会显示在界面
}
</script>
</body>
</html>
兼容方案（了解）
XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
