JavaScript异步编程——02-Ajax入门和发送http请求

news2024/12/24 10:38:42

同步和异步回顾

同步和异步的简单理解

  • 同步：必须等待前面的任务完成，才能继续后面的任务。

  • 异步：不受当前任务的影响。

拿排队举例：

  • 同步：在银行排队时，只有等到你了，才能够去处理业务。

  • 异步：在排队的时候，可以玩手机。

异步更新网站

我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。

可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并不会整体刷新。

试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要重新刷新，体验就太糟糕了。

web 前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。

关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript 基础：异步编程和 Ajax/01-单线程和异步》

Ajax

Ajax 的概念

在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

Ajax 原理（发送 Ajax 请求的五个步骤）

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

我们先回忆一下，一个完整的 HTTP 请求需要的是：

  • 请求的网址、请求方法 get/post。

  • 提交请求的内容数据、请求主体等。

  • 接收响应回来的内容。

发送 Ajax 请求的五个步骤：

（1）创建异步对象，即 XMLHttpRequest 对象。

（2）使用 open 方法设置请求参数。open(method, url, async)。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。

（3）发送请求：send()。

（4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）服务端响应，获取返回的数据。

XMLHttpRequest 对象详解

我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。

发送请求

发送请求的方法：

 open(method, url, async);

参数解释：

  • method：请求的类型；GET 或 POST

  • url：文件在服务器上的位置

  • async：true（异步）或 false（同步）

另外还有个方法：（仅用于 POST 请求）

 send(string);

POST 请求时注意

如果想让 像 form 表单提交数据那样使用 POST 请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

 xmlhttp.open('POST', 'ajax_test.php', true);
 ​
 xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 ​
 xmlhttp.send('name=smyhvae&age=27');

onreadystatechange 事件

注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成，且响应已就绪

status：

  • 200: "OK"。

  • 404: 未找到页面。

在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为 200 时，表示响应已就绪。

服务器响应的内容

  • responseText：获得字符串形式的响应数据。

  • responseXML：获得 XML 形式的响应数据。

如果响应的是普通字符串，就使用 responseText；如果响应的是 XML，使用 responseXML。

手写 Ajax

手写第一个 Ajax 请求

get 请求：

 //【发送ajax请求需要五步】
 //（1）创建XMLHttpRequest对象
 var xmlhttp = new XMLHttpRequest();
 ​
 //（2）设置请求的参数。包括：请求的方法、请求的url。
 xmlhttp.open('get', '02-ajax.php');
 ​
 //（3）发送请求
 xmlhttp.send();
 ​
 //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
 //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
 xmlhttp.onreadystatechange = function () {
     // 为了保证 数据 完整返回，我们一般会判断 两个值
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         //（5）服务端相应：如果能够进入这个判断，说明数据请求成功了
         console.log('数据返回成功：' + JSON.stringify(xmlhttp.responseText));
 ​
         // 伪代码：按业务需要，将接口返回的内容显示在页面上
         // document.querySelector('h1').innerHTML = xmlhttp.responseText;
     }
 };

post 请求：

 //（1）异步对象
 var xmlhttp = new XMLHttpRequest();
 ​
 //（2）设置请求参数。包括：请求的方法、请求的url。
 xmlhttp.open('post', '02.post.php');
 ​
 // 如果想要使用post提交数据,必须添加此行
 xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 ​
 //（3）发送请求
 xmlhttp.send('name=fox&age=18');
 ​
 //（4）注册事件
 xmlhttp.onreadystatechange = function () {
     //（5）服务端相应
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         alert(xmlhttp.responseText);
     }
 };

封装 Ajax 请求（重要）

上面的代码，执行顺序很好理解，但在实战开发中，是不会这么写的。假如你的页面中，需要调十次接口，那岂不是要手写十遍 Ajax 请求？这样会导致大量的重复代码。

所以，我们需要把重复代码封装成一个公共函数，然后通过回调函数处理成功和失败的逻辑。

封装 Ajax 请求的代码如下：(get 请求为例)

 // 封装 Ajax为公共函数：传入回调函数 success 和 fail
 function myAjax(url, success, fail) {
     // 1、创建XMLHttpRequest对象
     var xmlhttp;
     if (window.XMLHttpRequest) {
         xmlhttp = new XMLHttpRequest();
     } else {
         // 兼容IE5、IE6浏览器。不写也没关系
         xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
     }
     // 2、发送请求
     xmlhttp.open('GET', url, true);
     xmlhttp.send();
     // 3、服务端响应
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
             var obj = JSON.parse(xmlhttp.responseText);
             console.log('数据返回成功：' + obj);
             success && success(xmlhttp.responseText);
         } else {
             // 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。
             fail && fail(new Error('接口请求失败'));
         }
     };
 }
 ​
 // 单次调用 ajax
 myAjax('a.json', (res) => {
     console.log(res);
 });
 ​
 // 多次调用 ajax。接口请求顺序：a --> b --> c
 myAjax('a.json', (res) => {
     console.log(res);
     myAjax('b.json', (res) => {
         console.log(res);
         myAjax('c.json', (res) => {
             console.log(res);
         });
     });
 });

学会了封装 get 请求之后，封装 post请求也是类似的写法。

Ajax 请求：get 请求举例

（1）index.html：

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <title>Document</title>
     </head>
     <body>
         <h1>Ajax 发送 get 请求</h1>
         <input type="button" value="发送get_ajax请求" id="btnAjax" />
 ​
         <script type="text/javascript">
             // 绑定点击事件
             document.querySelector('#btnAjax').onclick = function () {
                 // 这里直接使用上面封装的 myAjax() 方法即可
                 myAjax('02-ajax.php', (res) => {
                     console.log(res);
                     console.log('数据返回成功');
                     // 显示在页面上
                     document.querySelector('h1').innerHTML = res;
                     // alert(xhr.responseText);
                 });
             };
         </script>
     </body>
 </html>

（2）02-ajax.php：

 <?php
     echo 'smyhvae';
  ?>

效果如下：

Ajax 多个接口的嵌套请求

我们在做异步任务的时候，经常会涉及到多个接口的嵌套请求。比如说，接口 1 请求完成后，需要根据接口 1 的数据请求接口 2；接口 2 请求完成后，需要根据接口 3 的数据请求接口 3，以此类推。

需求描述：

  • 请求接口 1，根据用户名获取用户 id

  • 请求接口 2，根据用户 id 获取用户的年龄、性别等信息。

代码实现思路：

 myAjax('http://localhost:8888/php/user.php?name=千古', (userInfo) => {
     // 根据第一个接口返回的 userInfo.id，继续请求第二个接口
     myAjax(`http://localhost:8888/php/info.php?id=${userInfo['id']}`, (res) => {
         console.log(response);
     });
 });

我们在实战开发中，经常会涉及到接口请求之间的依赖：需要上一个接口请求返回的数据，来发送本次请求。这种场景经常遇到，需要记住。

但这种层层嵌套的代码，会导致回调地域的问题，也不利于维护。我们在后续的 ES6 章节中，会讲解 Promise，它是一种更优雅的异步任务解决方案。

jQuery 中的 Ajax

JQuery 作为最受欢迎的 js 框架之一，常见的 Ajax 已经帮助我们封装好了，只需要调用即可。更为详细的 api 文档可以查阅：w3cSchool_JQueryAjax

格式举例：

 
$.ajax({
     url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址
     data: 'name=fox&age=18', // 请求参数
     type: 'GET', //请求的方式
     success: function (argument) {
         // 接口请求成功时调用
         console.log('接口请求成功');
     },
     beforeSend: function (argument) {}, // 在发送请求之前调用,可以做一些验证之类的处理
     error: function (argument) {
         // 接口请求失败时调用
         console.log('接口请求失败');
     },
 });

代码举例：

（1）index.html

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <title>jquery-ajax</title>
     </head>
     <body>
         <input type="button" value="点击" id="btn" />
         <div id="showInfo"></div>
         <script type="text/javascript" src="jquery-1.11.2.js"></script>
         <script type="text/javascript">
             $(function () {
                 $('#btn').click(function () {
                     $.ajax({
                         url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址
                         dataType: 'text',
                         data: 'name=fox&age=18', // 请求参数
                         type: 'get',
                         success: function (data) {
                             console.log('接口请求成功');
                             alert(data);
                             // $("#showInfo").html(data);
                         },
                         error: function (err) {
                             console.log('接口请求失败：' + err);
                         },
                     });
                 });
             });
         </script>
     </body>
 </html>

（2）data.php：

 <?php
 ​
 $text = 'hello world';
 ​
 echo $text;
 ​
  ?>
 ​

希望各位可以点个赞点个关注，这对up真的很重要，谢谢大家啦！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1649916.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

代码审计之某高校通用系统getRequsetURI函数的三次鉴权绕过

代码审计之某高校通用系统getRequsetURI函数的三次鉴权绕过

前言&#xff1a; 写个随笔&#xff0c;写个代码审计的漏洞案例&#xff0c;该系统为大量高校使用的一个系统。 三次绕过。 正文&#xff1a; 如图所见&#xff0c;系统厂商采用的是利用过滤器的写法进行鉴权 第一次的校验代码&#xff1a; 即requestURI转为小写后&#x…
阅读更多...
【运维】如何安装ubuntu-24.04？ 如何分区？

【运维】如何安装ubuntu-24.04？ 如何分区？

如何安装ubuntu-24.04&#xff1f;如何分区 经过一系列折腾&#xff0c;我总结了这几点&#xff1a; &#xff08;1&#xff09;在BIOS启动设置里&#xff0c;如果是GPT的硬盘格式&#xff0c;那么对应的就是UEFI的启动方式&#xff1b;如果是MBR的硬盘格式&#xff0c;那么对…
阅读更多...
优雅的实现接口统一调用!

优雅的实现接口统一调用!

有些时候我们在进行接口调用的时候&#xff0c;比如说一个 push 推送接口&#xff0c;有可能会涉及到不同渠道的推送。 比如做结算后端服务的&#xff0c;会与金蝶财务系统进行交互&#xff0c;那么我结算后端会涉及到多个结算单类型&#xff0c;如果每一个种类型的结算单都去…
阅读更多...
VBA技术资料MF151：单元格注释标识数字化

VBA技术资料MF151：单元格注释标识数字化

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…
阅读更多...
SpringBoot 打包所有依赖

SpringBoot 打包所有依赖

SpringBoot 项目打包的时候可以通过插件 spring-boot-maven-plugin 来 repackage 项目&#xff0c;使得打的包中包含所有依赖&#xff0c;可以直接运行。例如&#xff1a; <plugins><plugin><groupId>org.springframework.boot</groupId><artifact…
阅读更多...
信创 | 信创产业数字化转型与升级：路径规划与实践！

信创 | 信创产业数字化转型与升级：路径规划与实践！

信创产业的数字化转型与升级路径&#xff0c;主要围绕着构建国产化信息技术软硬件底层架构体系和全周期生态体系&#xff0c;解决核心技术关键环节“卡脖子”的问题&#xff0c;以推动中国经济数字化转型的平稳健康发展。 一、信创产业的发展趋势包括&#xff1a; 加强国产信息…
阅读更多...
红海云OA存在任意文件上传漏洞【附poc】

红海云OA存在任意文件上传漏洞【附poc】

漏洞复现 1、fofa poc见文末 body"RedseaPlatform" 打开burp进行抓包发送到repeater&#xff0c;如下图所示&#xff1a; 打入poc&#xff08;文末获取&#xff09;&#xff0c;成功上传。 「你即将失去如下所有学习变强机会」 学习效率低&#xff0c;学不到实战内…
阅读更多...
新火种AI|挑战谷歌，OpenAI要推出搜索引擎？

新火种AI|挑战谷歌，OpenAI要推出搜索引擎？

作者&#xff1a;一号 编辑&#xff1a;美美 在AI革新的浪潮下&#xff0c;谷歌搜索迎来了越来越多的“挑战者”。 最近&#xff0c;据多家外媒的消息&#xff0c;有知情人士透露&#xff0c;OpenAI正计划上线一款基于ChatGPT的大型产品&#xff0c;将提供一个新的搜索引擎&…
阅读更多...
Unet简单结构概述

Unet简单结构概述

总体结构代码 class UNet(nn.Module):def __init__(self, n_channels, n_classes, bilinearFalse):super(UNet, self).__init__()self.n_channels n_channelsself.n_classes n_classesself.bilinear bilinearself.inc (DoubleConv(n_channels, 64))self.down1 (Down(64, …
阅读更多...
【计算机科学速成课】笔记三——操作系统

【计算机科学速成课】笔记三——操作系统

文章目录 18.操作系统问题引出——批处理设备驱动程序多任务处理虚拟内存内存保护Unix 18.操作系统 问题引出—— Computers in the 1940s and early 50s ran one program at a time. 1940,1950 年代的电脑&#xff0c;每次只能运行一个程序 A programmer would write one at…
阅读更多...
硬件设计细节１-缓冲驱动器使用注意事项

硬件设计细节１-缓冲驱动器使用注意事项

目录 一、缓冲驱动器二、实例分析1.硬件结构2.问题描述3.原因分析4.原因定位 三、结论 一、缓冲驱动器 缓冲驱动器通常用于隔离、电平转换等应用场景。在使用时&#xff0c;需要关注的点较多&#xff0c;如电平范围、频率范围、延时、控制方式、方向以及输入输出状态。通常&am…
阅读更多...
MapReduce的Shuffle过程

MapReduce的Shuffle过程

Shuffle是指从 Map 产生输出开始,包括系统执行排序以及传送Map输出到Reduce作为输入的过程. Shuffle 阶段可以分为 Map 端的 Shuffle 阶段和 Reduce 端的 Shuffle 阶段. Shuffle 阶段的工作过程,如图所示: Map 端的 Shuffle 阶段 1&#xff09;每个输入分片会让一个 Map 任务…
阅读更多...
深度学习之基于Matlab卷积神经网络验证码识别系统

深度学习之基于Matlab卷积神经网络验证码识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着互联网的发展&#xff0c;验证码作为一种常用的安全验证手段&#xff0c;被广泛应用于各种网站和…
阅读更多...
free5gc+ueransim配置

free5gc+ueransim配置

ueransim已完成配置&#xff0c;可以观察到在make后&#xff0c;ueransim的build下生成以下几个文件 nr-gnb-------------5G gnb&#xff08;RAN&#xff09;的主要可执行文件 nr ue---------------5G ue的主要可执行文件 nr-cli---------------5G gNB和UE的cli工具 nr-binder-…
阅读更多...
SQL查询语句（二）逻辑运算关键字

SQL查询语句（二）逻辑运算关键字

上一篇文章中我们提到了条件查询除了一些简单的数学符号之外&#xff0c;还有一些用于条件判断的关键字&#xff0c;如逻辑判断 关键字AND,OR,NOT和范围查找关键字BETWEEN,IN等&#xff1b;下面我们来介绍一些这些关键字的用法以及他们所表达的含义。 目录 逻辑运算关键字 AND…
阅读更多...
Elasticsearch：使用 MongoDB connector 同步数据到 Elasticsearch

Elasticsearch：使用 MongoDB connector 同步数据到 Elasticsearch

MongoDB 是一个基于分布式文件存储的数据库。由 C 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。Elasticsearch 是一个高效强…
阅读更多...
嵌入式开发常见概念简介

嵌入式开发常见概念简介

目录 0. 《STM32单片机自学教程》专栏总纲 API Handle(句柄) 0. 《STM32单片机自学教程》专栏总纲 本文作为专栏《STM32单片机自学教程》专栏其中的一部分&#xff0c;返回专栏总纲&#xff0c;阅读所有文章,点击Link: STM32单片机自学教程-[目录总纲]_stm32 学习-CSD…
阅读更多...
linux下载压缩包

linux下载压缩包

比如我要下载的压缩包地址为&#xff1a; http://calvin.inf.ed.ac.uk/wp-content/uploads/data/cocostuffdataset/cocostuff-10k-v1.1.zip 1.创建文件夹并切换到这个目录下 2.用wget获取压缩包 压缩包下好了 3.解压 如果是 tar.gz包解压 tar -zxvf 也可以解压到具体的目录…
阅读更多...
Redis（持久化）

Redis（持久化）

文章目录 1.RDB1.介绍2.RDB执行流程3.持久化配置1.Redis持久化的文件是dbfilename指定的文件2.配置基本介绍1.进入redis配置文件2.搜索dbfilename&#xff0c;此时的dump.rdb就是redis持久化的文件3.搜索dir&#xff0c;每次持久化文件&#xff0c;都会在启动redis的当前目录下…
阅读更多...
Java集合 总结篇（全）

Java集合 总结篇（全）

Java集合 集合底层框架总结 List 代表的有序&#xff0c;可重复的集合。 ArrayList -- 数组 -- 把他想象成C中的Vector就可以&#xff0c;当数组空间不够的时候&#xff0c;会自动扩容。 -- 线程不安全 LinkedList -- 双向链表 -- 可以将他理解成一个链表&#xff0c;不支持…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023