【Ajax】XMLHttpRequest和Level2

最新推荐文章于 2024-02-02 09:22:03 发布

早睡早起长头发

最新推荐文章于 2024-02-02 09:22:03 发布

阅读量1.7k

点赞数

分类专栏： Ajax 文章标签： ajax javascript jquery

本文链接：https://blog.youkuaiyun.com/weixin_51481135/article/details/128626100

版权

Ajax 专栏收录该内容

10 篇文章

订阅专栏

一、XMLHttpRequest

- 什么是XMLHttpRequest

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

二、了解xhr对象的readyState属性

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

值	状态	描述
0	SENT	XMLHttpRequest 对象已被创建，但尚未调用 open方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收。
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据。
4	DONE	Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

三、使用xhr发起GET请求

- 使用xhr发起不带参数的GET请求

步骤：

①创建 xhr 对象

②调用 xhr.open() 函数：指定请求方式与 URL地址，创建Ajax 请求

③调用 xhr.send() 函数：发起 Ajax 请求

④监听 xhr.onreadystatechange 事件：拿到服务器响应的数据

  <script>
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数:指定 请求方式 与 URL地址
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数:发起 Ajax 请求
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
      if (xhr.readyState === 4 && xhr.status === 200) { // 固定写法
        // 4.2 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }
  </script>

注意：代码中的xhr.status === 200和服务器响应回来的数据中的"status":200不是同一个status。

xhr.status === 200是HTTP请求状态的一部分；

"status":200是服务器响应回来的一个属性，是数据里面的一部分。

2. 使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

xhr.open('GET', ' http://www.liulongbin.top:3006/api/getbooks?id=1'

  <script>
    var xhr = new XMLHttpRequest()
    // 在调用 xhr.open 期间，为 URL 地址指定参数
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')  // 这种在 URL 地址后面拼接的参数，叫做查询字符串
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

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

四、查询字符串

1. 什么是查询字符串

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

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

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= 西游记

2. GET请求携带参数的本质

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

$.get('url', {name: 'zs', age: 20}, function() {})
// 等价于
$.get('url?name=zs&age=20', function() {})

$.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20}, success: function() {} })
// 等价于
$.ajax({ method: 'GET', url: 'url?name=zs&age=20', success: function() {} })

2.1 $.get()

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

2.2 $/ajax()

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

五、URL编码与解码

1. 什么是URL编码

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。

如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。

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

URL编码原则的通俗理解：使用英文字符去表示非英文字符。

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= 西游记
// 经过 URL 编码之后，URL地址变成了如下格式：
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= %E8%A5%BF %E6%B8%B8 %E8%AE%B0 // 三组%表示一个中文字字符

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

浏览器提供了 URL 编码与解码的 API，分别是：

encodeURI() // 编码的函数

decodeURI() // 解码的函数

  <script>
    // 编码
    var str = '早睡早起长头发'
    var str2 = encodeURI(str)
    console.log(str2)


    // 解码
    console.log('----------')
    var str3 = decodeURI('%E9%95%BF%E5%A4%B4%E5%8F%91')
    console.log(str3)
  </script>

3. URL编码的注意事项

由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。

更多关于 URL 编码的知识，请参考如下博客：

https://blog.youkuaiyun.com/Lxd_0111/article/details/78028889

六、使用xhr发起POST请求

步骤：

①创建 xhr 对象

②调用 xhr.open() 函数：指定请求方式与 URL地址，创建Ajax 请求

③设置 Content-Type 属性（固定写法）

④调用 xhr.send() 函数，同时指定要发送的数据：发起Ajax 请求

⑤监听 xhr.onreadystatechange 事件：获取服务器响应的数据

  <script>
    // 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数：指定 请求方式 与 URL地址，创建Ajax 请求
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3. 设置 Content-Type 属性（固定写法）
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数，同时指定要发送的数据：发起Ajax 请求
    xhr.send('bookname=史记&author=司马迁&publisher=上海图书出版社')
    // 5. 监听事件：获取服务器响应的数据
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

二、 XMLHttpRequest Level2的新特性

- 认识XMLHttpRequest Level2

1.1 旧版XMLHttpRequest的缺点

只支持文本数据的传输，无法用来读取和上传文件；

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

1.2 XMLHttpRequest Level2的新功能

可以设置 HTTP 请求的时限；

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

可以上传文件；

可以获得数据传输的进度信息。

2. 设置HTTP请求时限

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

xhr.timeout = 3000

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

xhr.ontimeout = function(event){
alert('请求超时！')
}

  <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>

3. FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象。

3.1 FormData 对象可以模拟表单操作

// 1. 新建 FormData 对象
var fd = new FormData()
// 2. 为 FormData 添加表单项
fd.append('uname', 'zs')
fd.append('upwd', '123456')
// 3. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与URL地址
xhr.open('POST', ' http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
xhr.send(fd)

  <script>
    // 1. 创建 FormData 实例
    var fd = new FormData()

    // 2. 调用 append 函数，向 fd 中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')

    // 3. 创建 XHR 对象
    var xhr = new XMLHttpRequest()

    // 4. 指定请求类型与URL地址
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    
    // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
    xhr.send(fd)

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
  </script>

3.2 FormData对象可以用来获取网页表单的值

// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault() // 族子表单的默认提交
// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
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() {}
})

  <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>

4. 上传文件

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

实现步骤：

①定义 UI 结构

②验证是否选择了文件

③向 FormData 中追加文件

④使用 xhr 发起上传文件的请求

⑤监听 onreadystatechange 事件

4.1 定义UI结构

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

<button id="btnUpload">上传文件</button>
<br />

<img src="" alt="" id="img" width="800" />

4.2 验证是否选择了文件

// 1. 获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮添加 click 事件监听
btnUpload.addEventListener('click', function() {
// 3. 获取到选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
// ...后续业务逻辑
})

4.3 向FormData中追加文件

// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])

4.4 使用 xhr 发起上传文件的请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST，上传文件必须用POST提交文件
xhr.open('POST', ' http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)

4.5 监听onreadystatechange事件

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) { // 上传文件成功
// 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
document.querySelector('#img').src = ' http://www.liulongbin.top:3006 ' + data.url
} else { // 上传文件失败
console.log(data.message)
}
}
}

  <!-- 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>

5. 显示文件上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。语法格式如下：

// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
}
}

5.1 导入需要的库

<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>

5.2 基于Bootstrap渲染进度条

<div class="progress" style="width: 500px; margin: 10px 0;">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
0%
</div>
</div>

5.3 监听上传进度的事件

xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
// 1. 计算出当前上传进度的百分比
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
$('#percent')
// 2. 设置进度条的宽度
.attr('style', 'width:' + percentComplete + '%')
// 3. 显示当前的上传进度百分比
.html(percentComplete + '%')
}
}

5.4 监听上传完成的事件

xhr.upload.onload = function() {
$('#percent')
// 移除上传中的类样式
.removeClass()
// 添加上传完成的类样式
.addClass('progress-bar progress-bar-success')
}

  <!-- 1. 导入需要的库 -->
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>

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

  <!-- 2. 基于Bootstrap渲染进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">  // active能实现进度条运动效果
      0%
    </div>
  </div>

  <br />
  <img src="" alt="" id="img" width="800" />

  <script>
    var btnUpload = document.querySelector('#btnUpload')
    btnUpload.addEventListener('click', function () {
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      fd.append('avatar', files[0])
      var xhr = new XMLHttpRequest()


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

      // 4. 监听上传完成的事件
      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>