JavaScript-Ajax跨域和模板引擎

跨域

同源策略

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同。在同源策略下，只有同源的地址才可以相互通过 AJAX 的方式请求。同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求。

同源对比：http://www.example.com/detail.html 与以下地址对比

对比地址	是否同源	原因
`http://api.example.com/detail.html`	不同源	域名不同
`https://www.example.com/detail.html`	不同源	协议不同
`http://www.example.com:8080/detail.html`	不同源	端口不同
`http://api.example.com:8080/detail.html`	不同源	域名、端口不同
`https://api.example.com/detail.html`	不同源	协议、域名不同
`https://www.example.com:8080/detail.html`	不同源	端口、协议不同
`http://www.example.com/other.html`	同源	只是目录不同

在同源策略下，浏览器不允许 Ajax 跨域获取服务器数据，但现代化的 Web 应用中肯定会有不同源的现象，因此必然要解决不同源问题，从而实现跨域请求。

JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
原理就是在客户端借助 script 标签请求服务端的一个地址，该地址返回一段带有某个全局函数调用的 JavaScript 脚本，在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数，这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据。

服务端

客户端

响应结果

控制台结果

JSONP 只能发送 GET 请求，用的是 script 标签，与 AJAX 提供的 XMLHttpRequest 没有任何关系。

jQuery 中的 jsonp

jQuery基本使用 $.ajax(）如果要使用 JSONP 就是将 dataType 设置为 jsonp。

    // 以下为拉勾教育课件代码
    // 发送跨域的 ajax 请求
    $.ajax({
      // 百度搜索框搜索联想端口
      url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
      type: "GET",
      dataType: "jsonp",
      jsonp: "cb",    //这条属性可以设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
      jsonpCallback: "abc", //jQ 自动分配的回调函数的名称进行重命名
      data: {"wd": "ajax"},
      success: function (data) {
        console.log(data)
      }
    })

CORS 跨域

Cross Origin Resource Share，跨域资源共享。这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。
Access-Control-Allow-Origin 的值： * 表示允许任意源访问，不安全；http://foo.com 表示允许指定的源访问。

模板引擎

模板引擎用于减少字符串拼接，在模板里面解析 json，然后跟 html 内容拼接，性能会更好。

artTemplate

art-template 是一个简约、超快的模板引擎。
网址：https://github.com/aui/artTemplate
中文使用文档：https://aui.github.io/art-template/zh-cn/docs/
常用语法：
<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式
<%= content %>为输出表达式

使用步骤

引入模板文件
创建模板
将数据跟模板进行绑定
在模板里面编写代码解析数据
绑定数据和模板之后得到内容
将数据内容写到页面上面

使用举例：【以下为拉勾教育课件内代码】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-1.12.4.min.js"></script>
  <!-- 1、引入模板的文件 -->
  <script src="js/template-native.js"></script>
  <!-- 2、创建模板 -->
  <script type="text/html" id="tem">
    <!-- 3、添加模板中的结构 -->
    <% for (var i = 0 ; i < 5 ; i++) { %>
      <div>这是一个模板中的 div<%= i %></div>
      <div>这是一个模板中的 div<%= name %></div>
    <% } %>    
    <!-- 4、在模板中编写 js 代码解析数据 -->
  </script>
</head>
<body>
  <div class="box">

  </div>
  <script>
    // 5、将模板内的内容添加到 box 里面
    // template() 方法可以调用模板内容
    // 参数1： 调用的模板的id
    // 参数2：一个对象型的数据，数据会传给模板，对象中的每个属性的属性名在模板中可以直接当变量名使用
    $(".box").html(template("tem", {name: "tom"}));
  </script>
</body>
</html>

JavaScript-Ajax跨域和模板引擎