无论是Ajax还是跨域，目的都是为了获取服务器的数据，获取数据之后将前端界面进行渲染。
怎么渲染？
前端界面都是由标签构成的，所以前端界面的渲染主要做的就是生产html标签。
但是通过字符串拼接，有的时候会很复杂，也难以维护。
我们可以通过模板引擎来很方便的生成HTML标签
模板引擎的本质：将数据和模板结合起来生成HTML片段。所以模板引擎需要两个组成部分：模板和数据，通过数据，将模板指定的标签动态生成，方便维护。
常见的模板引擎有很多，效率最高的：artTemplate。在github上可以下载源代码。
模板引擎应用-数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<script type="text/javascript" src="./template.js"></script>
<script type="text/html" id="test">
<ul>
//在each这里循环数组data从而达到输出的目的
{{each arr as value i}}
<li>{{value}}</li>
{{/each}}
</ul>
</script>
<script>
window.οnlοad=function(){
var data=['文艺','博客','摄影','电影','民谣','旅行','吉他'];
var temp={};
temp.arr=data;
//模板和数据结合起来，生成html片段
var html=template("test",temp);
//将数组放到<div>标签内
document.querySelector("#content").innerHTML=html;
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html> 模板引擎-标签转义
<p>不转义：{{#value}}</p><!--value前加#，就可以识别标签了-->
<p>默认转义：{{value}}</p>