响应数据格式
提问：如果希望服务端返回一个复杂数据，该如何处理？
关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 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
json基础介绍，文章链接：
https://yangyongli.blog.csdn.net/article/details/112911294
也是一种数据描述手段，类似于 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')
