跨域和模版引擎的使用

跨域问题和同源策略

同源策略

是浏览器的一种安全机制，同源即域名、协议、端口完全相同
在同源策略下，只有同源的地址才能相互通过AJAX方式交流
同源指的是两个地址之间的关系，不同源的地址之间的请求称做跨域

http(协议)://www.baidu.com(域名):80(端口-默认80可不写)/index.html

浏览器不允许通过跨域获取数据，但是现代web应用中我们又需要获取不同源地址的资源，必须解决不同源问题，实现跨域请求数据

JSONP

JSON with Padding，借助script标签发送跨域请求的方法

基本原理：

在客户端通过script标签请求服务端的一个地址
script返回的结果带一段全局函数调用的js脚本
这个函数调用会调用我们本地js的一个函数
而函数的实参就是我们想要的数据

jsonp只能发送get请求，jsonp和XHR没有任何关系

JQ中的jsonp

使用$.ajax()方法，只需要把dataType类型设置为jsonp

<body>
  <!-- 创建按钮 -->
  <input type="button" value="获取">
  <script>
    // 按钮添加点击事件
    $('input').click(function () {
      // 以jsonp的方式获取数据
      $.ajax({
        // 地址：这是一个百度搜索的时候提示文本的接口
        url: 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web',
        // 方式使用get
        type: 'get',
        // 设置dataType为jsonp就可以以jsonp方式获取数据
        dataType: 'jsonp',
        //这里可以设置jsonp的回调函数的名字，如果不设置jq会自动生成一个名字
        jsonpCallback: 'abc',
        // 这里可以修改回调函数的参数名，默认callback，但如果接口强制要求了参数民，就需要我们手动设置和接口要求的一样
        jsonp: 'cd',
        // 要传入的数据
        data: {
          wd: 'ajax'
        },
        // 打印返回的数据
        success: function (data) {
          console.log(data)
        }
      })
    })
    // 大部分情况下不需要设置回调函数的名字和参数
  </script>
</body>

CORS跨域

Cross Origin Resource Share -- 跨域资源共享

无需在客户端做出任何变化，只需要在服务端响应的时候添加一个Access-Control-Allow-Origin的响应头即可，表示这个资源是否支持指定域请求

Access-Control-Allow-Origin的值

为*表示任何源都可以跨域访问这个文件，不安全
值为（一个域名+协议）例如：http://foo.com表示只允许指定的源访问

cors跨域现在较常使用

案例：百度搜索

模拟百度搜索时候的自动提示

在百度试一下，打开控制台network，查看文件response看到回调函数名为jQuery110202399796524493838_1611211395892(参数），说明是一个jsonp格式发送的
打开headers找到函数名cb=jQuery110202399796524493838_1611211395892&_=1611211395894，所以参数名为cd
实际接收参数的参数是wd：&wd=12（我搜索的就是12）
接口地址为https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>楼梯导航效果</title>
  <script src="./js/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 500px;
      margin: 100px auto;
    }

    .box .l {
      float: left;
      width: 396px;
      border: 2px solid #4e6ef3;
      overflow: hidden;
    }

    .box .l input {
      width: 396px;
      height: 36px;
      border: 0;
      outline: none;
    }

    .box .r {
      float: right;
      width: 100px;
      height: 40px;
      border: 0;
      background-color: #4e6ef3;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="l">
      <input type="text">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <input class="r" type="button" value="百度一下">
  </div>
  <script>
    // 获取元素
    const $lis = $('.box .l ul li'),
      $input = $('.box .l input')
    // 给输入框添加键盘抬起事件
    $input.keyup(function () {
      // 跨域请求
      $.ajax({
        url: 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web',
        // jsonp方式
        dataType: 'jsonp',
        // 设置参数值为cb
        jsonp: 'cb',
        // 设置参数
        data: {
          wd: $(this).val()
        },
        // 使用返回的数据到ul上
        success: function (data) {
          if (data.g === undefined) {
            return
          }
          $lis.each(function (i) {
            $(this).text(data.g[i].q)
          })
        }
      })
    })
  </script>
</body>

</html>

模版引擎

减少字符串拼接
在模版里面解析json，然后跟html内容进行拼接，性能更好

artTemplate模版引擎（腾讯）

简约、超快的模版引擎

地址：https://github.com/aui/artTemplate

中文文档：https://aui.github.io/art-template/zh-cn/docs/

常用语法：

<% js代码 %>符号包裹起来的语句则为模版逻辑表达式
<%= 表达式 %>为输出表达式

使用

引入模版js文件
创建模版
数据模版绑定
编写解析数据
绑定数据和模版之后得到内容
数据书写到页面上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用模版引擎</title>
  <!-- 引入jquery -->
  <script src="./js/jquery.min.js"></script>
  <!-- 引入模版引擎altTelplate -->
  <script src="./js/template-web.js"></script>
  <!-- 新建模版引擎，id属性是后面使用模版时候的第一个参数，type使用text/html -->
  <script id="tem" type="text/html">
    <!-- 使用模版js代码前后需要加 <% %>包裹起来 -->
  <!-- 如果想使用变量等表达式使用<%=  %>包裹 -->
  <% for(let i = 0; i < 5; i++){ %>
  <li> 我是模版内部创建的<%= i %></li>
  <%}%>
    <!-- 使用template的第二个参数，直接使用里面的属性名即可使用属性值 -->
  <li>我是数组中的数据<%= name%></li>
  </script>
</head>

<body>
  <div class="box">
    <ul class="list"></ul>
  </div>
  <script>
    // 创建一个数组
    const arr = [{
      name: 1
    }, {
      name: 2
    }, {
      name: 3
    }, {
      name: 4
    }, {
      name: 5
    }, {
      name: 6
    }, ]
    //循环遍历数组，把每一个数组中的对象都带入template方法
    for (const i of arr) {
      // template方法支持两个参数，第一个是要使用的模版的id值，第二个参数是要使用的对象类型的数据，模版可以直接使用对象中的属性名从而获取属性值
      // 循环给ul添加li
      $('.box .list').append(template('tem', i))
    }
  </script>
</body>

</html>

使用模版引擎改造百度案例

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>百度</title>
  <!-- 引入模版引擎 -->
  <script src="./js/template-web.js"></script>
  <!-- // 引入jq -->
  <script src="./js/jquery.min.js"></script>
  <!-- 创建模版 -->
  <script id="tem" type="text/html">
    <!-- 循环遍历g属性 -->
    <% for(let i = 0; i < g.length; i++){ %>
  <!-- 创建li，里的值为每一个g内容的q属性 -->
  <li><%= g[i].q %></li>
  <% } %>
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 500px;
      margin: 100px auto;
    }

    .box .l {
      float: left;
      width: 396px;
      border: 2px solid #4e6ef3;
      overflow: hidden;
    }

    .box .l input {
      width: 396px;
      height: 36px;
      border: 0;
      outline: none;
    }

    .box .r {
      float: right;
      width: 100px;
      height: 40px;
      border: 0;
      background-color: #4e6ef3;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="l">
      <input type="text">
      <ul>
        <!-- 模版引擎生成的结构添加到这里 -->
      </ul>
    </div>
    <input class="r" type="button" value="百度一下">
  </div>
  <script>
    // 获取元素
    const $ul = $('.box .l ul'),
      $input = $('.box .l input')
    // 给输入框添加键盘抬起事件
    $input.keyup(function () {
      // 跨域请求
      $.ajax({
        url: 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web',
        // jsonp方式
        dataType: 'jsonp',
        // 设置参数值为cb
        jsonp: 'cb',
        // 设置参数
        data: {
          wd: $(this).val()
        },
        // 使用返回的数据到ul上
        success: function (data) {
          // 判断数据是否存在
          if (data.g === undefined) {
            return
          }
          // 调用模版引擎，把生成的结果添加到ul上
          $ul.html(template('tem', data))
        }
      })
    })
  </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>
  <!-- 引入css样式文件 -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入模版引擎文件 -->
  <script src="./js/template-native.js"></script>
  <!-- 引用jq文件 -->
  <script src="js/jquery-1.12.4.min.js"></script>
  <!-- 创建模版 -->
  <script id="tem" type="text/html">
    <!-- 循环遍历输入进来的数据，传进来的data对象里面有一个comments属性的数组，遍历数组下面的所有数据 -->
    <% for(let i = 0; i < comments.length; i++){ %>
  <!-- 书写结构，并调用数据中的值 -->
  <!-- 在li上面新建一个自定义属性，标记自己在数据库中的位置，后面删除需要这个属性 -->
  <li uid="<%= comments[i].id%>">
    <p class="floor"><%= comments[i].id%>楼<a href="javascript:;" class="delete">删除</a></p>
    <p class="author">层主：<%= comments[i].username%><span class="name"></span></p>
    <p class="content"><%= comments[i].content%></p>
  </li>
  <% } %>
  </script>
</head>

<body>
  <!-- 结构 -->
  <div class="main">
    <div class="post">
      <h2>新年快乐</h2>
      <p class="author">楼主：行痴</p>
      <p class="txt">新的一年，祝大家新年快乐，身体健康，升职加薪！</p>
    </div>
    <div class="reply">
      <h4>发表回复</h4>
      <p>用户名：<input type="text" class="reply"></p>
      <textarea class="editor"></textarea>
      <input type="button" value="发表" class="btn">
    </div>
    <div class="cmts">
      <ul class="list">
        <!-- 留言添加到这 -->
      </ul>
    </div>
  </div>
  <script>
    // 获取元素
    const $list = $('.main .cmts .list'),
      $user = $('.reply input:text'),
      $textarea = $('.reply textarea'),
      $btn = $('.reply .btn')
    // 初始化，使用get获取数据，调用模版引擎修改留言板列表
    $.get('http://localhost:3000/db', function (data) {
      $list.html(template('tem', data))
      // 调用函数给每个删除按钮添加删除功能
      del()
    })
    // 发表按钮点击事件
    $btn.click(function () {
      // 先判断是否为空，如果为空提示用户
      if ($user.val() === '' || $textarea.val() === '') {
        alert('输入不正确')
        return
      }
      // 如果不为空执行下面的代码
      // 使用pose方法向数据库添加数据
      $.post('http://localhost:3000/comments', {
        username: $user.val(),
        content: $textarea.val()
      }, function (data) {
        // 返回的数据代入模版，但是模版需要是一个对象并且对象需要有一个comments属性的数组，所有手动模拟对象
        $list.append(template('tem', {
          comments: [data]
        }))
        // 新添加的删除按钮没有删除功能，我们在这里给全部删除按钮调用函数重新添加删除功能
        del()
      })
    })
    // 删除按钮啊添加删除功能函数
    function del() {
      // 给每一个按钮添加点击事件
      $('.delete').click(function () {
        // 从数据库里面删除数据，找到删除按钮的祖先li标签，根据li标签的自定义属性值删除元素
        $.ajax({
          url: `http://localhost:3000/comments/${$(this).parents('li').attr('uid')}`,
          type: 'delete'
        })
        // 找到删除按钮的祖先的li标签，删除它
        $(this).parents('li').remove()
      })
    }
  </script>
</body>

</html>

{
  "comments": [
    {
      "id": 4,
      "username": "江江",
      "content": "给楼主打call~ +10000"
    },
    {
      "username": "西毒",
      "content": "楼主一般",
      "id": 6
    },
    {
      "username": "东邪",
      "content": "哈哈哈哈",
      "id": 7
    }
  ]
}

跨域和模版引擎的使用

跨域和模版引擎的使用

跨域问题和同源策略

JSONP

JQ中的jsonp

CORS跨域

案例：百度搜索

模版引擎

artTemplate模版引擎（腾讯）

使用

使用模版引擎改造百度案例

案例：留言板

常见问题FAQ

掘金(大大大石头) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

跨域和模版引擎的使用

跨域问题和同源策略

JSONP

JQ中的jsonp

CORS跨域

案例：百度搜索

模版引擎

artTemplate模版引擎（腾讯）

使用

使用模版引擎改造百度案例

案例：留言板

常见问题FAQ

掘金(大大大石头) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式