Ajax基础 --学习记录(二)

模板引擎

模板引擎概述

作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。
官方地址： https://aui.github.io/art-tem...

使用步骤

1. 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

 <script src="./js/template-web.js"></script>

1. 准备 art-template 模板

 <script id="tpl" type="text/html">
     <div class="box"></div>
 </script>

1. 告诉模板引擎将哪一个模板和哪个数据进行拼接

 var html = template('tpl', {username: 'zhangsan', age: '20'});

1. 将拼接好的html字符串添加到页面中

 document.getElementById('container').innerHTML = html;

1. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接

 <script id="tpl" type="text/html">
     <div class="box"> {{ username }} </div>
 </script>

FormData

1. 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
2. 异步上传二进制文件

FormData 对象的使用

1. 准备 HTML 表单

 <form id="form">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <input type="button"/>
</form>

1. 将 HTML 表单转化为 formData 对象

var form = document.getElementById('form'); 
var formData = new FormData(form);

1. 提交表单对象

  xhr.send(formData);

注意：
Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。
服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析。

FormData 对象的实例方法

1. 获取表单对象中属性的值

 formData.get('key');

1. 设置表单对象中属性的值

 formData.set('key', 'value');

1. 删除表单对象中属性的值

 formData.delete('key');

1. 向表单对象中追加属性值

 formData.append('key', 'value');

注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

FormData 二进制文件上传

<input type="file" id="file"/>

 var file = document.getElementById('file')
// 当用户选择文件的时候
 file.onchange = function () {
     // 创建空表单对象
     var formData = new FormData();
     // 将用户选择的二进制文件追加到表单对象中
     formData.append('attrName', this.files[0]);
     // 配置ajax对象，请求方式必须为post
     xhr.open('post', 'www.example.com');
     xhr.send(formData);
 }

FormData 文件上传进度展示

 // 当用户选择文件的时候
 file.onchange = function () {
     // 文件上传过程中持续触发onprogress事件
     xhr.upload.onprogress = function (ev) {
         // 当前上传文件大小/文件总大小 再将结果转换为百分数
         // 将结果赋值给进度条的宽度属性 
         bar.style.width = (ev.loaded / ev.total) * 100 + '%';
     }
 }

FormData 文件上传图片即时预览

 xhr.onload = function () {
     var result = JSON.parse(xhr.responseText);
     var img = document.createElement('img');
     img.src = result.src;
     img.onload = function () {
         document.body.appendChild(this);
     }
 }

同源政策

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

使用 JSONP 解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

1. 将不同源的服务器端请求地址写在 script 标签的 src 属性中

 <script src="www.example.com"></script>

 <script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

1. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。

 const data = 'fn({name: "张三", age: "20"})';
 res.send(data);

1. 在客户端全局作用域下定义函数 fn

 function fn (data) { }

1. 在 fn 函数内部对服务器端返回的数据进行处理

 function fn (data) { console.log(data); }

JSONP 代码优化

1. 客户端需要将函数名称传递到服务器端。
2. 将 script 请求的发送变成动态请求。
3. 封装 jsonp 函数，方便请求发送。
4. 服务器端代码优化之 res.jsonp 方法。

<script type="text/javascript">
    // 获取按钮
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    // 为按钮添加点击事件
    btn1.onclick = function () {
        jsonp({
            // 请求地址
            url: 'http://localhost:3001/better',
            data: {
                name: 'lisi',
                age: 30
            },
            success: function (data) {
                console.log(123)
                console.log(data)
            }
        })
    }

    btn2.onclick = function () {
        jsonp({
            // 请求地址
            url: 'http://localhost:3001/better',
            success: function (data) {
                console.log(456789)
                console.log(data)
            }
        })
    }

    function jsonp (options) {
        // 动态创建script标签
        var script = document.createElement('script');
        // 拼接字符串的变量
        var params = '';

        for (var attr in options.data) {
            params += '&' + attr + '=' + options.data[attr];
        }
        
        // myJsonp0124741
        var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
        // 它已经不是一个全局函数了
        // 我们要想办法将它变成全局函数
        window[fnName] = options.success;
        // 为script标签添加src属性
        script.src = options.url + '?callback=' + fnName + params;
        // 将script标签追加到页面中
        document.body.appendChild(script);
        // 为script标签添加onload事件
        script.onload = function () {
            document.body.removeChild(script);
        }
    }

    
</script>

CORS 跨域资源共享

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

 origin: http://localhost:3000

 Access-Control-Allow-Origin: 'http://localhost:3000'
 Access-Control-Allow-Origin: '*'

Node 服务器端设置响应头示例代码：

 app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Methods', 'GET, POST');
     next();
 })

访问非同源数据 服务器端解决方案

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。

withCredentials属性(实现跨域登录)

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false

loginBtn.onclick = function () {
    // 将html表单转换为formData表单对象
    var formData = new FormData(loginForm);
    // 创建ajax对象
    var xhr = new XMLHttpRequest();
    // 对ajax对象进行配置
    xhr.open('post', 'http://localhost:3001/login');
    // 当发送跨域请求时，携带cookie信息
    xhr.withCredentials = true;
    // 发送请求并传递请求参数
    xhr.send(formData);
    // 监听服务器端给予的响应内容
    xhr.onload = function () {
        console.log(xhr.responseText);
    }
}

Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

// 拦截所有请求
app.use((req, res, next) => {
    // 1.允许哪些客户端访问我
    // * 代表允许所有的客户端访问我
    // 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
    // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post')
    // 允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

---

添加内容

模板通过 $imports 可以访问到模板外部的全局变量与导入的变量
官网介绍

//common.js文件
// 处理日期时间格式
function formateDate(date) {
  // 将日期时间字符串转换成日期对象
  date = new Date(date);
  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
}

<script src="../assets/js/common.js"></script>
<script src="./js/template-web.js"></script>
<script type="text/html" id="commentsTpl">
  {{each records}}
  <tr>
    <td>{{$imports.formateDate($value.createAt)}}</td>
  </tr>
  {{/each}}
</script>

---

需求：某个模块需要在不同页面中显示
方法：把模板变为公共的。把模板代码写在js文件中（把模板代码存储在变量中，然后调用template.render()方法）

$.ajax({
    type: 'get',
    url: '/posts/recommend',
    success: function (response) {
        // 为了将模板变成公共的，所以将模板写在了js文件中
        var recommendTpl = `
            {{each data}}
            <li>
              <a href="detail.html?id={{$value._id}}">
                <img src="{{$value.thumbnail}}" alt="">
                <span>{{$value.title}}</span>
              </a>
            </li>
            {{/each}}
        `;
        var html = template.render(recommendTpl, {data: response});
        // 显示在页面中
        //为要显示此模块的标签添加id属性即可
        $('#recommendBox').html(html);
    }
})