Ajax基础(二)

  一.FormData 对象的作用

  1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。

  2.异步上传二进制文件

 

<!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>
    <script type="text/javascript">
        // 获取按钮
        var btn = document.getElementById('btn');
        // 获取表单
        var form = document.getElementById('form');
        // 为按钮添加点击事件
        btn.onclick = function () {
            // 将普通的html表单转换为表单对象
            var formData = new FormData(form);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/formData');
            // 发送ajax请求
            xhr.send(formData);
            // 监听xhr对象下面的onload事件
            xhr.onload = function () {
                // 对象http状态码进行判断
                if (xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
   //服务器端代码
const formidable = require('formidable');
app.post('/formData', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    });
});

  注意:

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

  二.FormData 对象的实例方法

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

formData.get('key');

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

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

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

formData.delete('key');

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

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 + '%';
     }
 }

  五.同源政策

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

  2.什么是同源
如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
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：不同源（协议不同）

      3.使用 JSONP 解决同源限制问题

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

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

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

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

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

     3.   在客户端全局作用域下定义函数 fn,在 fn 函数内部对服务器端返回的数据进行处理

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

      4.JSONP 代码优化

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

function jsonp (options) {
    // 创建script标签
    var script = document.createElement('script');
    // 生成随机函数名
    var fnName = 'jsonp' + Math.random().toString().replace('.', '') + new Date().getTime();
    // 为全局作用域下添加一个属性 属性的名字就是我们随机生成的函数名
    // 让属性的值指向调用jsonp函数时传递的success
    window[fnName] = options.success;
    // 参数
    var params = '';
    // 循环用户传递的参数
    for (var attr in options.data) {
        params += '&' + attr + '=' + options.data[attr]
    }
    // 为script标签设置src属性
    script.src = options.url + '?callback=' + fnName + params;
    // 将html标签追加到页面中
    document.body.appendChild(script);
    // 当script标签加载完成之后
    script.onload = function () {
        // 将script标签从页面中删除
        document.body.removeChild(this);
    }
}

   5.CORS 跨域资源共享

//Node 服务器端设置两行响应头示例代码：
 //拦截所有请求
 app.use((req, res, next) => {
    // 1.允许哪些客户端访问我
    // * 代表允许所有的客户端访问我
    res.header('Access-Control-Allow-Origin', '*')
     // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post')
    next();
 });

   6.withCredentials属性

   复习cookie:

  客户端向服务器端发起请求,服务器端响应回客户,使用http协议(无状态),谁也不认识谁
   cookie是身份的识别,服务器端发给客户端的身份证,也就是cookie,建立两者之间持久的联系(储存)

在使用ajax技术发送跨域请求时,默认情况下不会再请求中携带cookie信息
withCredentials:指定在涉及到跨域请求时,是否携带cookie信息,默认时false 不携带,服务器端响应头还要设置

 

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

 

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

//客户端代码
<button id="btn">点我发送请求</button>
    <script src="/js/ajax.js"></script>
    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 为按钮添加点击事件
        btn.onclick = function () {
            ajax({
                type: 'get',
                url: 'http://localhost:3000/server',
                success: function (data) {
                    console.log(data);
                }
            })
        };
    </script>

//服务器端代码 
// 向其他服务器端请求数据的模块
const request = require('request');
app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
        res.send(body);
    })
});