• 第五章:Ajax高级


    第五章:Ajax高级

    5.1:XMLHttpRequest的基本使用

    • 什么是XMLHttpRequest

      XMLHttpRequest(简称xhr)是浏览器提供JavaScript对象,通过他,可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
      在这里插入图片描述

    • 使用xhr发起GET请求

      步骤:

      1. 创建xhr对象。
      2. 调用xhr.open()函数创建请求。
      3. 调用xhr.send()函数发起请求。
      4. 监听xhr.onreadystatechange事件。
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
      xhr.send();
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
              console.log(xhr.responseText);
          }
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
    • xhr对象的readyState属性

      XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个:

      状态描述
      0UNSENTXMLHttpRequest对象已被创建,但尚未调用open方法
      1OPENEDopen()已经被调用
      2HEADRS_RECEIVEDsend()方法已经被调用,响应头也已经被接收
      3LOADING数据接收中,此时response属性中已经包含部分数据
      4DONEAjax请求完成,这意味着数据传输已经彻底完成失败
    • 查询字符串

      定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。

      格式:将英文?放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中。

    • URL编码与解码

      1. 什么是URL编码

        URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符,则必须对中文进行编码(转义)。

        URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

        通俗理解:使用英文字母去表示非英文字符

      2. 如何对URL进行编码与解码

        • encodeURI():编码的函数
        • decodeURI():解码的函数
    • 使用xhr发起POST请求

      步骤:

      1. 创建xhr对象。
      2. 调用xhr.open()函数创建请求。
      3. 设置Content-Type属性(固定写法)。
      4. 调用xhr.send()函数发起请求。
      5. 监听xhr.onreadystatechange事件。
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社');
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
              console.log(xhr.responseText);
          }
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    5.2:数据交换格式

    • 什么是数据交换格式

      数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。

      前端领域,经常提及的两种数据交换格式分别是XMLJSON。其中XML用的非常少,所以,我们重点要学习的数据交换格式就是JSON。
      在这里插入图片描述

    • XML

      1. 什么是XML

        XML的英文全称是EXtensible Markup Language,即可扩展标记语言。因此,XML和HTML类似,也是一种表示语言。

      2. XML和HTML的区别

        XML和HTML虽然都是标记语言,但是,他们两种之间没有任何的关系。

        • HTML被设计用来描述网页上的内容,是网页内容的载体。
        • XML被设计用来传输和存储数据,是数据的载体。

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5NA9Kih-1660369597682)(图片\11.png)]

      3. XML的缺点

        • XML格式臃肿,和数据无关的代码多,体积大,传输效率低。
        • 在JavaScript中解析XML计较麻烦。
    • JSON

      1. 什么是JSON

        ​ 概念:JSON的英文全称是JavaScript Object Notation,即“javascript对象表示法”。简单来讲,JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质就是字符串

        ​ 作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小、更快、更易解析

      2. JSON的两种结构

        ​ JSON就是用字符串来表示JavaScript的对象和数组。所以,JSON中包含对象数组两种结构,通过这个两种结构的相互嵌套,可以表示各种复杂的数据结构。

        对象结构:对象结构在JSON中表示{}括起来的内容。数据结构为{ key : value, key : value, .... }的键值对结构。其中,key必须是使用英文的双引号包裹的字符串, value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

        数组结构:数组结构在JSON中表示为[]括起来的内容。数据结构为[ "java", "javascript", 30, true ... ]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

      3. JSON语法注意事项

        • 属性名必须使用双引号包裹。
        • 字符串类型的值必须使用双引号包裹。
        • JSON中不允许使用单引号表示字符串。
        • JSON中不能写注释。
        • JSON的最外层必须是对象或数组格式。
        • 不能使用undefined或函数作为JSON的值。

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

      4. JSON和JS对象的互转

        • 要实现从JSON字符串转换为JS对象,使用JSON.parse()方法。

          var jsonStr = '{"a": "Hello", "b": "world"}';
          var obj = JSON.parse(jsonStr);
          console.log(obj);
          
          • 1
          • 2
          • 3
        • 要实现从JS对象转换为JSON字符串,使用JSON.stringify()方法。

          var obj2 = { a: 'hello', b: 'world', c: false };
          var str = JSON.stringify(obj2);
          console.log(str);
          
          • 1
          • 2
          • 3
      5. 序列化和反序列化

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

    5.3:XMLHttpResquest Level2新特性

    • 认识XMLHttpRequest Level2

      1. 旧版XMLHttpRequest的缺点
        • 只支持文本数据的传输,无法用来读取和上传文件。
        • 传送和接收数据时,没有进度信息,只能提示有没有完成。
      2. 新版MLHttpRequest Level2的新功能
        • 可以设置HTTP请求的时限
        • 可以使用FormData对象管理表单数据
        • 可以上传文件
        • 可以获得数据传输的进度信息
    • 设置HTTP请求时限

      有时,Ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本的XMLHttpRequest对象,增加了timeout属性,可以设置HTTP请求的时限。

      xhr.timeout = 3000;
      
      • 1

      上面的语句,将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还要一个timeout事件,用来指定回调函数。

      xhr.ontimeout = function(event) {
          alert('请求超时!');
      }
      
      • 1
      • 2
      • 3
    • FormData对象管理表单数据

      Ajax操作往往用来提交表单数据。为了方便表单处理,HTML5新增了一个FormData对象,可以模拟表单操作:

      var fd = new FormData();
      fd.append('uname', 'zs');
      fd.append('upwd', '123456');
      
      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(JSON.parse(xhr.responseText));
          }
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
    • 上传文件

      新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件。

      实现步骤:

      1. 定义UI结构。

        <input type="file" id="file1">
        <button id="btnUpload">上传文件button>	<br>
        <img src="" alt="" id="img" width="800">
        
        • 1
        • 2
        • 3
      2. 验证是否选择了文件。

         var btnUpload = document.querySelector('#btnUpload');
        btnUpload.addEventListener('click', function () {
            var files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件');
            }
        })
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
      3. FromData中追加数据。

        var fd = new FormData();
        fd.append('avatar', files[0]);
        
        • 1
        • 2
      4. 使用xhr发起上传文件的请求。

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
        xhr.send(fd);
        
        • 1
        • 2
        • 3
      5. 监听onreadystatechange事件。

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                if (data.status === 200) {
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url;
                } else {
                    console.log('图片上传失败!' + data.message);
                }
            }
        }
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
    • 显示文件上传进度:监听上传进度的事件

      xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
              var procentComplete = Math.ceil((e.loaded / e.total) * 100);
              console.log(procentComplete);
              $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%');
          }
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    5.4:axios

    • 什么是axios

      Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest对象,axios简单易用。相比于jQueryaxios更加轻量化,只关注与网络数据请求。

    • axios发起GET请求

      axios发起get请求的语法:

      axios.get('url', { params: {/*参数*/} }).then(callback);
      
      • 1

      具体代码:

      var url = 'http://www.liulongbin.top:3006/api/get';
      var paramsObj = { name: 'zs', age: 20 };
      axios.get(url, { params: paramsObj }).then(function (res) {
      console.log(res.data);
      })
      
      • 1
      • 2
      • 3
      • 4
      • 5
    • axios发起POST请求

      axios发起POST请求的语法:

      axios.post('url', { /*参数*/ } ).then(callback);
      
      • 1

      具体代码

      var url = 'http://www.liulongbin.top:3006/api/post';
      var dataObj = { address: '北京', location: '顺义区' };
      axios.post(url, dataObj).then(function (res) {
          console.log(res.data);
      })
      
      • 1
      • 2
      • 3
      • 4
      • 5
    • 直接使用axios发起请求

      axios也提供了类似于jQuery中的$.ajax()的函数,语法如下:

      axios ({
          method: '请求类型',
          url: '请求的URL地址',
          data: { /* POST数据 */ },
          params: { /* GET参数 */ }
      }).then(callback);
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
  • 相关阅读:
    【Python】基本数据类型(三)字符串类型及格式化
    体感互动游戏研发虚拟场景3D漫游
    【计算机网络系列】数据链路层④:扩展的以太网及其高速以太网
    OSPF高级特性 —— 被动接口 + 按需链路 + donotage标记
    AI | 第1章 机器学习 Sklearn 入门笔记
    房地产中介信息管理系统平台源码开发解决方案
    新一代 L1 公链Aptos:安全、可扩展和可升级的Web3基础设施 |Tokenview
    Linux文件特殊权限与特殊属性
    RuntimeError: “slow_conv2d_cpu“ not implemented for ‘Half‘
    OBU与千寻魔方的定位性能分析
  • 原文地址:https://blog.csdn.net/wcy_0522/article/details/126318909