Ajax第三天

一、XMLHttpRequest的基本使用

1、定义

浏览器为我们提供的一个内置对象(构造函数), 通过它我们可以向服务器发送请求, 并接受响应

$.ajax() 请求方法底层就是 jQuery 封装这个对象的一系列方法来实现的

2、使用xhr发起GET请求

• 步骤：

  • 创建 xhr 对象

  • 调用 xhr.open() 函数

  • 调用 xhr.send() 函数

  • 监听 xhr.onreadystatechange 事件

// 1. 构建 xhr 实例对象
    var xhr = new XMLHttpRequest();
    // 2. 初始化请求 open(请求方式，url地址)
    xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
    // 3. 发送请求  send()
    xhr.send();
    // 4. 监听请求状态, 获取响应的数据
    xhr.onreadystatechange = function() {
 // 判断请求是否完成，HTTP请求状态码是否成功
        if (xhr.readyState == 4 && xhr.status == 200) {
    // 获取响应数据  
     console.log(xhr.responseText);
        }
    };
    // onload表示请求已经完成，和上面if判断作用相同
    xhr.onload = function() {
        // 获取响应数据
        console.log(xhr.responseText);
    }

注意：if判断代码中xhr.status不是返回数据中的status

3、了解xhr对象的readyState属性

• xhr 请求的所有状态码
  • 0 (未初始化) ==> 请求还未初始化
  • 1 (正在加载) ==> 已建立服务器链接
  • 2 (加载成功) ==> 请求已接受
  • 3 (交互) ==> 正在处理请求
  • 4 (完成) ==> 请求已完成, 响应数据已传输

4、查询参数

• 定义：在 url 末尾添加的以 ? 开头的参数，叫做查询参数

  比如： http://www.youxi.cn?hero=tank&money=99&skin=pink

• 参数特征

  格式符合键值对的格式，多个键值对之间使用 & 符号进行连接

• 作用

1. 多个页面之间传递数据(从首页跳转到首页，显示登录名（location.search）);

2. 给服务器发送 get 请求的数据

5、get请求带参数的写法

把 参数 按键值对字符串的形式拼接到 url 后面

var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://www.liulongbin.top:3006/api/get?name=ZhangSan&&age=12&&sex=man');
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            };
        };

6、URL编码

浏览器中的 URL 中只允许出现字母, 符号和数字, 不允许出现汉字, 如果出现需要对其进行编码

1. 编码的规则：

使用字母，数字和特殊符号对其他字符(如汉字)进行编码

2. 浏览器内置的 URL 编码和解码方法

   encodeURI(参数) 对参数进行 URI 编码

   decodeURI(参数) 对参数进行 URI 解码

var str = '2月6号放假'
      var str2 = encodeURI(str);
      console.log(str2);
      var str3 = decodeURI('%E6%94%BE%E5%81%87');
      console.log(str3);//反编译为 放假

7、post请求原生写法

var xhr = new XMLHttpRequest();
      xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
      // 设置post请求参数的编码方式
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      // 设置post请求时，要传递键值对字符串
      xhr.send('bookname=熟虾&author=之颂&publisher=125');
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {               					 console.log(xhr.responseText);
          }
      }

二、数据交换格式

1、数据交换格式

 客户端和服务端之间进行数据传输时, 需要使用公共的数据格式.。

JSON 是前后端开发中最常用的一种轻量级数据交换格式,除此之外还有 XML 这种带有语义化的数据格式。

• XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。
• XML和HTML的区别：
  • HTML 被设计用来描述网页上的内容，是网页内容的载体
  • XML 被设计用来传输和存储数据，是数据的载体
  • 客户端向服务器发送数据利用的是XML，服务器向客户端发送数据利用的是HTML
• XML的缺点
  • XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
  • 在 Javascript 中解析 XML 比较麻烦

2、JSON（JavaScript Object Notation ）

JSON 可以理解为 js 中对象的字符串表示法, 本质上还是一个字符串。

1. 概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。

2. 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但

   是 JSON 比 XML 更小、更快、更易解析。

3、JSON 数据格式的注意

1. 普通对象最外层使用 { } 包裹, 数组的最外层使用 [ ] 包裹

2. 属性名和字符串必须是双引号括起来的字符串, 最后一个属性后不能有逗号（必须严格遵守）

3. 属性值或数组元素可以是 number, string, boolean, array, null, object 6种

   ​ 但不能是 undefined 和 function

4. 不能在 json 中填写注释

JSON 的作用：在计算机与网络之间存储和传输数据。

JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

4、JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

5、JSON和JS对象的互转

1. 要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

var obj=JSON.parse('{"a":"Hello","b":"World"}');
//结果是：{a:'Hello',b:'World'}

2. 要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json=JSON.stringify({a:'Hello',b:'World'});
//结果是：'{"a":"Hello","b":"World"}'

3. 总结： JSON.stringify() JSON.parse()

   1. todolist 本地存储， 只能存储字符串格式的数据， JSON.stringify()

   2. JS高级 深拷贝： JSON.parse(JSON.stringify(obj)) //生成的是一个新对象

   3. 把服务器返回的json字符串解析成js对象格式 JSON.parse()

6、序列化和反序列化

把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

三、XMLHttpRequest Level2的新特性

1、老版本 XMLHttpRequest 问题

1. 只支持文本数据的传送，无法用来读取和上传二进制文件

2. 传送和接收数据时，没有进度信息，只能提示有没有完成

2、新版本 XMLHttpRequest 特性

1. 可以设置 HTTP 请求的超时时限

2. 可以使用 FormData 对象管理表单数据

3. 可以上传文件

4. 可以获取数据请求的进度信息

3、为 ajax 请求设置超时限制

• 设置超时时间（默认为毫秒）

  xhr.timeout = 超时时间

• xhr 实例的超时事件

  xhr.ontimeout = fn

	var xhr = new XMLHttpRequest();
       xhr.timeout = 10;
    xhr.addEventListener('timeout',function() {		return alert('请求超时')});
           xhr.open('get', 'http://www.liulongbin.top:3006/api/get');
           xhr.send();
           xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
         console.log(xhr.responseText);
           }
       }

四、FormData对象管理表单数据

1、什么是FormData？

浏览器提供的一个内置对象(构造函数), 可以轻松管理表单数据的键值对 (key/value)

2、FormData 相关方法

1. 添加一条数据 append()

2. 查询一条数据 get()

3. 设置一条数据 set()

4. 遍历数据 forEach()

3、在 Ajax 中的使用

可以直接使用 send 方法发送 formData 格式的数据

// 1. 新建一个 FormData 对象
        var fd = new FormData();

        // 2. 添加一条数据: append()
        fd.append('bookname', '儒林外史');
        fd.append('author', '费瓦罗纳');
        fd.append('publisher', '圣埃蒂安');
        console.log(fd.get('author'));

        // 3. 设置一条数据: set()
        fd.set('publisher', '埃尔法');
        fd.forEach(item => {
            console.log(item);
        });
        var xhr = new XMLHttpRequest();
        xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
        xhr.send(fd);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }

4、formData快速获取表单数据

使用 new FormData(原生form元素) 可以一次性获取表单中所有的数据

$('form').submit(function(e) {
         e.preventDefault();
         var fd = new FormData(this);
         var xhr = new XMLHttpRequest();
         xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
         xhr.send(fd);
         xhr.onload = function() {
             return console.log(JSON.parse(xhr.responseText));
         }
     });

五、formData上传文件

1、案例：formData上传文件并显示文件上传进度(原生方法)

$('#upload-btn').click(function() {
           // (原生文本选择框.files)
           var files = $('#file')[0].files;
           // 判断文件列表长度
           if (files.length <= 0) {
               return alert('请选择文件上传');
           };
           var fd = new FormData();
           // 向fd中添加一个数据
           fd.append('avatar', files[0]);

           var xhr = new XMLHttpRequest();

           // 绑定上传进度事件
           xhr.upload.onprogress = function(e) {
               // console.log(e.lengthComputable);
               // 判断当前文件是否可计算
               if (e.lengthComputable) {
                   console.log(parseInt(e.loaded / e.total * 100));
                   // 获取文件上传进度e.total表示总数据量， e.loaded表示已经上传的数据量
                   var percentage = parseInt(e.loaded / e.total * 100) + '%';
                   // 给进度条设置width样式属性和内容
                   $('#bar').css('width', percentage).text(percentage);
               };
           };
           // 为xhr绑定文件获取成功事件
           xhr.upload.onload = function() {
               $('#bar').removeClass().addClass('progress-bar progress-bar-success')
           }

           xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
           xhr.send(fd);
           xhr.onload = function() {
               var res = JSON.parse(xhr.responseText)
               console.log(res);
               // 将地址给img标签
               $('img').prop('src', 'http://www.liulongbin.top:3006' + res.url);
           }
       })

2、jq版本文件上传

• ajaxStart(callback)

  Ajax 请求开始时，执行 ajaxStart 函数。

  • 注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。

• ajaxStop(callback)

  Ajax 请求结束时，执行 ajaxStop 函数。

$(document).ajaxStart(function() {
               $('#loading').show()
           });
           $('#upload-btn').click(function() {
               // (原生文本选择框.files)
               var files = $('#file')[0].files;
               // 判断文件列表长度
               if (files.length <= 0) {
                   return alert('请选择文件上传');
               };
               var fd = new FormData();
               // 向fd中添加一个数据
               fd.append('avatar', files[0]);

               $.ajax({
                   url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                   method: 'post',
                   data: fd,
                   // 使用formdata 默认参数编码 multipart/form-data
                   contentType: false,
                   // 不需要对请求体中内容进行额外处理
                   processData: false,
                   // 发送ajax请求前调用
                   beforeSend: function() {
                       // console.log(123);
                       $('#loading').show()
                   },
                   success: function(res) {
                       console.log(res);
                       $('#loading').prop('src', 'http://www.liulongbin.top:3006' + res.url);
                   }
               })
           })

六、什么是axios

1、定义：

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

2、axios发起GET请求

axios.get()

axios.get('http://www.liulongbin.top:3006/api/get', {
            params: {
                id: 10,
                age: 20
            }
        }).then(function(res) {
            console.log(res.data);
        }).catch(function(err) {
            console.log(err);
        })

3、axios发起POST请求

axios.post()

axios.post('http://www.liulongbin.top:3006/api/post', {
            name: '张三',
            age: 10,
            height: 170
        }).then(function(res) {
            console.log(res);
        }).catch(function(err) {
            console.log(err);
        })

4、直接使用axios发起请求

//发起get请求
axios({
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            method: 'get',
            params: {
                id: 1,
                bookname: '西游记'
            }
        }).then(function(res) {
            console.log(res.data);
        }).catch(function(err) {
            console.log(err);
        })
//发起post请求
        axios({
            url: 'http://www.liulongbin.top:3006/api/addbook',
            method: 'post',
            data: {
                bookname: '儒林外史',
                author: '年份酒偶发',
                publisher: '阿萨德刚'
            }
        }).then(function(res) {
            console.log(res.data);
        }).catch(function(err) {
            console.log(err);
        })