跨域

同源策略

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同。
在同源策略下，只有同源的地址才可以相互通过AJAX的方式请求。

跨域

同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域。
www.example.com/detail.html 与以下地址对比。

在同源策略下，浏览器不允许Ajax跨域获取服务器数据。但现代web应用中，都会有跨域存在，所以我们必须要解决不同源问题，从而实现跨域请求。

解决跨域的两种方法

JSONP：前后端配合处理方法。是一种借助script标签发送跨域请求的技巧。
cors：后端处理方法。是后端设置允许指定域请求的方法，是比较方便的一种方法。

JSONP

JSON with Padding，是一种借助于script标签发送跨域请求的技巧。
原理就是在客户端借助script标签请求服务端的一个地址。地址返回一段带有某个全局函数调用的JavaScript脚本。在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数，这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据。
服务端处理举例：客户端处理举例：服务端返回结果：客户端输出： JSONP只能发送GET请求，而且用的是script标签，与AJAX提供的XMLHttpRequest没有任何关系。

jQuery中对JSONP的支持

jQuery基本使用$.ajax()
jQuery中使用JSONP就是将dataType设置为jsonp

<script src="js/jquery-1.12.4.min.js"></script>
<script>
  $(".btn").click(function () {
    // 发送跨域的 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)
      }
    })
  })
</script>

cors

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

* 表示允许任意源访问，不安全
http://foo.com 允许指定的源访问
服务端示例： cors这种只需要后端做相应设置的方法，对前端来讲，解决跨域问题更简单方便。

模拟百度搜索案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    input {
      border: 0;
      outline: none;
    }
    .box {
      width: 500px;
      height: 50px;
      margin:  20px auto;
    }
    .box .search-box {
      float: left;
      width: 400px;
      border: 2px solid #0af;
      box-sizing: border-box;
    }
    .box .search-box .txt {
      display: block;
      height: 46px;
      padding-left: 10px;
      line-height: 46px;
      font-size: 16px;
      color: #333;
    }
    .box .search-box ul li {
      padding: 0 10px;
      line-height: 36px;
    }
    .box .btn {
      float: left;
      width: 100px;
      height: 50px;
      background-color: #0af;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }
  </style>  
</head>
<body>
  <div class="box">
    <div class="search-box">
        <input type="text" class="txt">
        <ul class="suggest-list">
          
        </ul>
    </div>
    <input type="button" value="搜索" class="btn">    
  </div> 
   <!--引包  -->
   <script src="js/jquery-1.12.4.min.js"></script>
   <script>
    //  添加一个 txt 中的按键弹起事件，每输入一个文字都会触发事件
    var $txt = $(".txt");
    var $ul = $(".suggest-list");

    $txt.keyup(function () {
      // 获取搜索联想的数据
      var keyword = $(this).val();
      // 发送数据请求
      $.ajax({
        url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
        dataType: "jsonp",
        jsonp: "cb",
        data: {"wd": keyword},
        success: function (data) {
          // console.log(data);
          // 获取需要的数组
          var arr = data.g;
          // 将所有的数组中的数据，渲染到页面中的 ul 里
          var str = "";
          // 数组遍历，进行字符串拼接
          for (var i = 0 ; i < arr.length; i++){
            str += `<li>${arr[i].q}</li>`
          }
          // 将最终拼接的字符串添加到页面上
          $ul.html(str);
        } 
      })
    })
   </script>
</body>
</html>

模板引擎

之前我们从后端获取数据后，需要通过字符串拼接或模板字符串渲染到页面，这种方法效率不高，所以我们需要用到模板引擎。模板引擎的作用：

减少字符串拼接
在模板里面解析json，然后跟html内容拼接，性能会更好一般公司都会有自己封装的模板引擎，下面介绍TX的模板引擎：artTemplate

artTemplate模板引擎

art-template是一个简约、超快的模板引擎。
网址： github.com/aui/artTemp…
中文使用文档： aui.github.io/art-templat…
常用语法：

<% 与 %>符号包裹起来的语句则为模板的逻辑表达式
<%= content %>为输出表达式

artTemplate使用

使用步骤：

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

<!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>

模板引擎制作模拟百度搜索案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    input {
      border: 0;
      outline: none;
    }
    .box {
      width: 500px;
      height: 50px;
      margin:  20px auto;
    }
    .box .search-box {
      float: left;
      width: 400px;
      border: 2px solid #0af;
      box-sizing: border-box;
    }
    .box .search-box .txt {
      display: block;
      height: 46px;
      padding-left: 10px;
      line-height: 46px;
      font-size: 16px;
      color: #333;
    }
    .box .search-box ul li {
      padding: 0 10px;
      line-height: 36px;
    }
    .box .btn {
      float: left;
      width: 100px;
      height: 50px;
      background-color: #0af;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }
  </style>  
  <script src="js/template-native.js"></script>
  <script id="tem" type="text/html">
    <!-- 循环添加多个 li 标签 -->
    <!-- 个数是按照获取的数据确定的,数据中有一个 g 属性，就是我们需要的数组 -->
    <% for (var i = 0 ; i < g.length ; i++){ %>
      <li><%= g[i].q %></li>
    <% } %>
  </script>
</head>
<body>
  <div class="box">
    <div class="search-box">
        <input type="text" class="txt">
        <ul class="suggest-list">
          
        </ul>
    </div>
    <input type="button" value="搜索" class="btn">    
  </div> 
   <!--引包  -->
   <script src="js/jquery-1.12.4.min.js"></script>
   <script>
    //  添加一个 txt 中的按键弹起事件，每输入一个文字都会触发事件
    var $txt = $(".txt");
    var $ul = $(".suggest-list");

    $txt.keyup(function () {
      // 获取搜索联想的数据
      var keyword = $(this).val();
      // 发送数据请求
      $.ajax({
        url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
        dataType: "jsonp",
        jsonp: "cb",
        data: {"wd": keyword},
        success: function (data) {
          // console.log(data);
          // 直接调用模板，添加给ul内部
          $ul.html(template("tem", data));
        } 
      })
    })
   </script>
</body>
</html>

跨域和模板引擎应用

跨域