Ajax中XMLHttpRequest

最新推荐文章于 2024-05-11 19:28:41 发布

九阈

最新推荐文章于 2024-05-11 19:28:41 发布

阅读量992

点赞数

分类专栏： # Ajax 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_46048542/article/details/126083653

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是XMLHttpRequest

XML HttpRequest (简称xhr)是浏览器提供的Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。

使用xhr发起GET请求

请添加图片描述
使用xhr发起GET数据请求

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }
  </script>
</body>

</html>

了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个。
请添加图片描述
使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可:

这种在URL地址后面拼接的参数,叫做查询字符串。

  <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

xhr查询字符串的概念以及请求参数的本质

什么是查询字符串
定义:查询字符串(URL 参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。
格式:将英文的?放在URL的末尾,然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。
请添加图片描述
GET请求携带参数的本质
无论使用$.ajax(,还是使用$.get0,又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上,都是直接将参数以查询字符串的形式，追加到URL地址的后面,发送到服务器的。

  <script>
    // $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1, bookname: '西游记' }, function (res) {
    //   console.log(res)
    // })

    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      data: {
        id: 1,
        bookname: '西游记'
      },
      success: function (res) {
        console.log(res)
      }
    })
  </script>

xhr-URL编码

什么是URL编码
URL地址中,允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符，则必须对中文字符进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。
请添加图片描述
如何对URL进行编码与解码
浏览器提供了URL编码与解码的API,分别是:
●encodeURI() 编码的函数
●decodeURI() 解码的函数

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    var str = '红楼梦'
    var str2 = encodeURI(str)
    console.log(str2)

    console.log('----------')
    var str3 = decodeURI('%E7%BA%A2%E6%A5%BC%E6%A2%A6')
    console.log(str3)
  </script>
</body>

</html>

请添加图片描述

基于xhr发起POST请求

请添加图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

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

</html>

数据交换格式

什么是数据交换格式
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少,所以，我们重点要学习的数据交换格式就是JSON。
什么是XML
XML的英文全称是EXtensible Markup Language,即可扩展标记语言。因此, XML和HTML类似,也是一种标记语言。
请添加图片描述
XML和HTML的区别
XML和HTML虽然都是标记语言,但是，它们两者之间没有任何的关系。
●HTML被设计用来描述网页上的内容,是网页内容的载体
●XML被设计用来传输和存储数据，是数据的载体
什么是JSON
概念: JSON的英文全称是JavaScript Object Notation,即"JavaScript 对象表示法”。简单来讲，JSON就是Javascript对象和数组的字符串表示法,它使用文本表示一个 JS对象或数组的信息，因此,JSON的本质是字符串。
作用: JSON 是-一种轻量级的文本数据交换格式，在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小、更快、更易解析。
现状: JSON是在2001年开始被推广和使用的数据格式，到现今为止，JSON已经成为了主流的数据交换格式。

JSON的结构和语法注意事项

请添加图片描述

JSON语法意事项
①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON中不允许使用单引号表示字符串
④JSON中不能写注释
⑤JSON的最外层必须是对象或数组格式
⑥不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据。
JSON的本质:用字符串来表示Javascript对象数据或数组数据

JSON和JS对象的相互转化

JSON和JS对象的关系
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。例如:
请添加图片描述
JSON和JS对象的互转
要实现从JSON字符串转换为JS对象，使用JSON.parse()方法:

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

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // var jsonStr = '{"a": "Hello", "b": "world"}'
    // var obj = JSON.parse(jsonStr)
    // console.log(obj)

    var obj2 = { a: 'hello', b: 'world', c: false }
    var str = JSON.stringify(obj2)
    console.log(str)
    console.log(typeof str)
  </script>
</body>

</html>

请添加图片描述

了解新版xhr的特性以及设置请求时限

旧版XMLHttpRequest的缺点
①只支持文本数据的传输，无法用来读取和上传文件
②传送和接收数据时，没有进度信息，只能提示有没有完成
XMLHttpRequest Level2的新功能
①可以设置HTTP请求的时限
②可以使用FormData对象管理表单数据
③可以上传文件
④可以获得数据传输的进度信息
设置HTTP请求时限
有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性,可以设置HTTP请求的时限:
请添加图片描述

  <script>
    var xhr = new XMLHttpRequest()
    // 设置 超时时间
    xhr.timeout = 30
    // 设置超时以后的处理函数
    xhr.ontimeout = function () {
      console.log('请求超时了！')
    }

    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)
      }
    }
  </script>

FormData

FormData对象管理表单数据
Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个FormData对象，可以模拟表单操作:
请添加图片描述
演示FormData对象的基本使用

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 创建 FormData 实例
    var fd = new FormData()
    // 2. 调用 append 函数，向 fd 中追加数据
    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))
      }
    }
  </script>
</body>

</html>

FormData对象管理表单数据
FormData对象也可以用来获取网页表单的值，示例代码如下:
请添加图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>

  <script>
    // 1. 通过 DOM 操作，获取到 form 表单元素
    var form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据
      var fd = new FormData(form)

      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))
        }
      }
    })
  </script>

</body>

</html>

上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。实现步骤:
①定义UI结构
请添加图片描述
②验证是否选择了文件

③向FormData中追加文件
请添加图片描述
④使用xhr发起上传文件的请求

⑤监听onreadystatechange事件

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      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)
          }
        }
      }
    })
  </script>
</body>

</html>

计算文件上传的进度

显示文件上传进度
新版本的XML HttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的.上传进度。语法格式如下:
请添加图片描述
监听上传进度的事件

监听上传完成的事件

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>

  <!-- bootstrap 中的进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
    </div>
  </div>

  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()

      // 监听文件上传的进度
      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 + '%')
        }
      }

      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      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)
          }
        }
      }
    })
  </script>
</body>

</html>

jQuery实现上传文件以及loading效果

请添加图片描述

使用jQuery实现文件上传

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>

  <br />
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

  <script>
    $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

      $('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>

</body>

</html>

axios

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/axios.js"></script>
</head>

<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>

  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      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)
      })
    })

    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
  </script>
</body>

</html>

九阈

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax中XMLHttpRequest

XML HttpRequest (简称xhr)是浏览器提供的Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
复制链接

扫一扫

专栏目录