黑马程序员AJAX学习目标3

最新推荐文章于 2023-01-22 08:45:00 发布
最新推荐文章于 2023-01-22 08:45:00 发布
阅读量197 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52616632/article/details/124617579
版权

学习目标3

1.XMLHttpRequest的基本使用

2.数据交换格式

3.封装自己的Ajax函数

4.XMLHttpRequest Level2的新特性

5.jQuery高级用法

6.axios

1.XMLHttpRequest的基本使用

1.1 什么XMLHttpRequest

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

1.2 使用xhr发起GET请求

步骤：
（1）创建 xhr 对象
（2）调用 xhr.open() 函数
（3）调用 xhr.send() 函数
（4）监听 xhr.onreadystatechange 事件

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

1.3 了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：
在这里插入图片描述

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

在这里插入图片描述

1.5 查询字符串

1. 什么是查询字符串

在这里插入图片描述

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

在这里插入图片描述

1.6 URL编码与解码

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

1.7 使用xhr发起POST请求

步骤：
（1）创建 xhr 对象
（2）调用 xhr.open() 函数
（3）设置 Content-Type 属性（固定写法）
（4）调用 xhr.send() 函数，同时指定要发送的数据
（5）监听 xhr.onreadystatechange 事件

// 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. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

数据交换格式

2.1 什么是数据交换格式

在这里插入图片描述

2.2 XML

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3 JSON

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 封装自己的Ajax函数

3.1 要实现的效果

<!-- 1. 导入自定义的ajax函数库 -->
<script src="./itheima.js"></script>

<script>
    // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
    itheima({
        method: '请求类型',
        url: '请求地址',
        data: { /* 请求参数对象 */ },
        success: function(res) { // 成功的回调函数
            console.log(res)     // 打印数据
        }
    })
</script>

3.2 定义options参数选项

itheima() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：
· method 请求的类型
· url 请求的 URL 地址
· data 请求携带的数据
· success 请求成功之后的回调函数

3.3 处理data参数

需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：

/**
 * 处理 data 参数
 * @param {data} 需要发送到服务器的数据
 * @returns {string} 返回拼接好的查询字符串 name=zs&age=10
 */
function resolveData(data) {
  var arr = []
  for (var k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

3.4 定义itheima函数

在 itheima() 函数中，需要创建 xhr 对象，并监听 onreadystatechange 事件

function itheima(options) {
  var xhr = new XMLHttpRequest()
  // 拼接查询字符串
  var qs = resolveData(options.data)

  // 监听请求状态改变的事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

3.5 判断请求的类型

不同的请求类型，对应 xhr 对象的不同操作，因此需要对请求类型进行 if … else … 的判断：

  if (options.method.toUpperCase() === 'GET') {
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

4. XMLHttpRequest Level2的新特性

4.1 认识XMLHttpRequest Level2

在这里插入图片描述
在这里插入图片描述

4.2 设置HTTP请求时限

在这里插入图片描述

4.3 FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 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)

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() {}
})

4.4 上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。
实现步骤：
（1）定义 UI 结构
（2）验证是否选择了文件
（3）向 FormData 中追加文件
（4）使用 xhr 发起上传文件的请求
（5）监听 onreadystatechange 事件

1. 定义UI结构
   <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800" />
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('请选择要上传的文件！')
     }
     // ...后续业务逻辑
 })
3. 向FormData中追加文件
 // 1. 创建 FormData 对象
 var fd = new FormData()
 // 2. 向 FormData 中追加文件
 fd.append('avatar', files[0])
4. 使用 xhr 发起上传文件的请求
   
 // 1. 创建 xhr 对象
 var xhr = new XMLHttpRequest()
 // 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
 // 3. 发起请求
 xhr.send(fd)
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)
    }
  }
}

4.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)
    }
 }
1. 导入需要的库
  
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
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>
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 + '%')
    }
 }
4. 监听上传完成的事件
 xhr.upload.onload = function() {
     $('#percent')
         // 移除上传中的类样式
         .removeClass()
         // 添加上传完成的类样式
         .addClass('progress-bar progress-bar-success')
 }

5. jQuery高级用法

5.1 jQuery实现文件上传

1. 定义UI结构
   <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>

    <!-- 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 上传文件按钮 -->
    <button id="btnUpload">上传</button>
2. 验证是否选择了文件
 $('#btnUpload').on('click', function() {
     // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
     var files = $('#file1')[0].files
     // 2. 判断是否选择了文件
     if (files.length <= 0) {
         return alert('请选择图片后再上传！‘)
     }
 })
3. 向FormData中追加文件
 // 向 FormData 中追加文件
 var fd = new FormData()
 fd.append('avatar', files[0])
4. 使用jQuery发起上传文件的请求
 $.ajax({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/upload/avatar',
     data: fd,
     // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
     contentType: false,
     // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
     processData: false,
     success: function(res) {
         console.log(res)
     }
 })

5.2 jQuery实现loading效果

1. ajaxStart(callback)

在这里插入图片描述

2. ajaxStop(callback)

在这里插入图片描述

6. axios

6.1 什么是axios

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

6.2 axios发起GET请求

在这里插入图片描述

6.3 axios发起POST请求

在这里插入图片描述

6.4 直接使用axios发起请求

在这里插入图片描述

6.4 直接使用axios发起请求

在这里插入图片描述
在这里插入图片描述

weixin_52616632
关注
专栏目录
《web开发： Ajax XMLHttpRequest Level2新特性》
yexiangCSDN的专栏
01-29 237
一、XMLHttpRequest Level2新特性 1. 旧版XMLHttpRequest的缺点 只支持文本数据的传输，无法用来读取和上传文件 传送和接收数据时，没有进度信息，只能提示有没有完成 2. XMLHttpRequest Level2的新功能 可以设置 HTTP 请求的时限 可以使用 FormData 对象管理表单数据 可以上传文件 可以获得数据传输的进度信息 3.设置HTTP请求时限 有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。...
黑马程序员SSM-SpringMVC学习笔记（自用）
weixin_68837457的博客
07-24 6100
黑马程序员SSM2022课程 SpringMvc学习过程笔记 （自用） SpringMVC是一种基于java实现MVC模型的轻量级web框架使用简单，开发快捷
XMLHttpRequest Level2的新特性
果冻
12-27 684
目录 1、设置HTTP请求时限 2、FormData对象管理表单数据 3、上传文件 （1）定义UI结构 （2）验证是否选择了文件 （3）向FormData中追加文件 （4）使用 xhr 发起上传文件的请求 （5）监听onreadystatechange事件 4、显示文件上传进度 （1）导入需要的库 （2）基于Bootstrap渲染进度条 （3）监听上传进度的事件 （4）监听上传完成的事件 旧版XMLHttpRequest的缺点 只支持文本数据的传输，无法用来读取和上传...
XMLHttpRequest Level2 的新特性
春雨惊春.
07-26 379
文章目录一、旧版本 XMLHttpRequest 的缺点二、XMLHttpRequest Level2 的新功能1. 设置 HTTP 请求时限2. 利用 FormData 对象管理表单数据3. 上传文件4. 获取文件的上传进度 一、旧版本 XMLHttpRequest 的缺点 只支持文本数据的传输，无法用来读取和上传文件 传送和接收数据时，没有进度信息，只能提示有没有完成 二、XMLHttpRequest Level2 的新功能 可以设置 HTTP 请求的时限 可以使用 FormData 对象管理表
XMLHttpRequest——Level2
世界和我们都不该止步于此
03-25 1406
我们先来了解一下相对于旧版本更新了那些特性或功能，再对功能特性进行学习： 我们的老版本只支持文本数据的传送，无法用来读取和上传文件 ；传送和接受数据时，没有进度信息，只能提示有没有完成 ；受到同源限制的影响，只能向同一域名的服务器请求数据，针对同源限制，没有解决方案 相比于老版本，我们的新版本可以设置HTTP请求的时限 ；可以使用FormData对象管理表单数据； 可以上传文件 ；可以请求不同域名下的数据（跨域请求） 可以获取服务器端的二进制数据 可以获得数据传输的进度信息 本章不涉及跨域请求，跨
安卓黑马程序员课表
10-01
### 安卓黑马程序员课程知识点概览 #### 1. XML编程 ...以上为“安卓黑马程序员课表”中涉及的主要知识点概览，通过系统的学习与实践，学员能够建立起坚实的IT技术基础，并具备实际项目开发的能力。
黑马程序员ssm总结[大全版本,有对应pdf+源码](spring-＞springmvc--＞springboot--＞maven高级-＞cloud微服务)
m0_67402125的博客
07-30 798
既可以解决多个应用间配置共享的问题，
黑马node以及ajax还有vue等等企业开发必备技能学习资料.zip
10-13
【描述】提到的“2019年最新传智播客黑马程序员视频”，表明这些学习资料来自于知名的IT教育机构传智播客，其旗下的黑马程序员为学员提供了最新的课程内容。作为内部人员分享的资源，它们可能涵盖了这些技术的最新...
python培训班-Python培训机构_高品质Python线下开发培训班推荐-黑马程序员
q6q6q的专栏
10-28 1408
Python编程基础基础班1课时:15天技术点:97项测验:2次学习方式:线下面授学习目标1.掌握Python开发环境基本配置|2.掌握运算符、表达式、流程控制语句、数组等的使用|3.掌握字符串的基本操作|4.初步建立面向对象的编程思维|5.熟悉异常捕获的基本流程及使用方式|6.掌握类和对象的基本使用方式|7.掌握学生管理系统编写主讲内容1Python基础语法基础语法是编程语言的第一课，打好基础才...
XML HttpRequest Level2
m0_62962469的博客
04-20 686
1.旧版XML HttpRequest的缺点 只支持文本数据的传输，无法用来读取和上传文件。 传送和接收数据时，不能显示进度信息，只能提示有没有完成。 2.XML HttpRequest Level2新特性 可以设置HTTP请求的时限 可以使用FormData对象管理表单数据。 可以上传文件 可以获得数据传输的进度信息。 如何设置Http请求的时限： 有时，ajax操作很耗时，而且无法预知要花多少时间。新版本的XML HttpRequest 属性增加了timeout属性，可以设置HTT
XMLHttpRequest level2
weixin_34281537的博客
11-15 86
HTML5 更新了很多API，XMLHttpRequest 就是其中一个。level 2 的XMLHttpRequest 更加强大了。 新建对象 var xhr = new XMLHttpRequst()和之前一样 属性 先看老几样属性onreadystatechange 同步ajax不可用此事件回调，abort() 也不会触发此事件，...
XMLHttpRequest level2介绍
非著名coder的窝
05-18 644
1、xmlHttpRequest level1:xmlHttpRequest是一个浏览器脚本语言，用来给server发送http或者https请求来加载，出于安全考虑，这个只能用于同域访问(还有其他的缺点，比如说不能读取或者上传二进制文件，传送和发送数据时没有进度信息)。Xmlhttprequest概念的形成是源于微软的outlook web access，后来使用这样的概念形成了msxml库，这就
XMLHttpRequest Level 2 特性介绍
许盛的博客
10-07 802
文件上传，进度显示啥的，都可以看看：http://www.w3dev.cn/article/20130322/XMLHttpRequest-Level-2-new-feature-introduction.aspx
前端AJAX学习笔记——XMLHttpRequest Level2
zerocean_的博客
03-20 186
旧版XMLHttpRequest缺点： 只支持文本数据传输，无法读取上传文件 请求和响应时，只提示有没有完成，没有显示进度 XMLHttpRequest Level2新特性： 可以设置HTTP请求时限 可以使用FormData对象管理表单数据 可以上传文件 可以获取数据传输的进度 1.设置HTTP请求时限 可以设置请求等待时限，请求超过了这个时限就会自动停止，还可以设置配套的timeout事件指定回调函数。 xhr.timeout = 3000; //请求最多等待3秒 xhr.on
XMLHttpRequest Level 2 轻松Ajax上传
weixin_33859231的博客
04-02 116
2019独角兽企业重金招聘Python工程师标准>>> ...
黑马程序员---ajax请求
一夜奈何梁山
08-14 693
一：ajax请求的常规写法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax请求</title> <script src="js/jquery-2
黑马程序员-初探ajax技术
u014241593的专栏
03-20 725
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 AJA
【Ajax】XMLHttpRequest和Level2
早睡早起长头发的博客
01-22 1702
查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。将英文的?放在URL 的末尾，然后再加上参数＝值，想加上多个参数的话，使用符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。// 不带参数的 URL 地址// 带一个参数的 URL 地址id=1// 带两个参数的 URL 地址西游记URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
黑马程序员javaweb
最新发布
06-12
黑马程序员是一家教育机构，提供多种编程语言和IT技术的培训课程，...在黑马程序员的JavaWeb课程学习过程中，学生可以实现多个实际项目，包括电子商务网站、新闻发布系统、社交网络等，提高自己的实战经验和编程能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值