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

同步和异步回顾

同步和异步的简单理解

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

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

拿排队举例：

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

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

异步更新网站

我们在访问一个普通的网站时，当浏览器加载完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 和 failfunction 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('接口请求失败'));}};}​// 单次调用 ajaxmyAjax('a.json', (res) => {console.log(res);});​// 多次调用 ajax。接口请求顺序：a --> b --> cmyAjax('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：

 <?phpecho '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://xiahunao.cn/news/3016317.html

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

相关文章

【C++泛型编程】（二）标准模板库 STL

【C++泛型编程】（二）标准模板库 STL

文章目录 标准模板库 STL容器算法迭代器仿函数/函数对象适配器分配器示例 标准模板库 STL C 的标准模板库&#xff08;Standard Template Library&#xff0c;STL&#xff09;旨在通过模板化的设计&#xff0c;提供一种通用的编程模式&#xff0c;使程序员能方便地实现和扩展各…
阅读更多...
数据仓库项目---Day01

数据仓库项目---Day01

文章目录 框架的安装包数据仓库概念项目需求及架构设计项目需求分析项目框架技术选型系统数据流程设计框架版本选型集群资源规划设计 数据生成模块数据埋点主流埋点方式埋点数据上报时机 服务器和JDK准备搭建三台Linux虚拟机(VMWare)编写集群分发脚本xsyncSSH无密登录配置JDK准…
阅读更多...
实现同一份数据的各种镜像

实现同一份数据的各种镜像

一个数据集通过某个轴&#xff08;通常是垂直或水平轴&#xff09;的镜像对称。这可以通过简单的数学运算来实现。 如果想要通过一块数据生成四份&#xff0c;可以通过以下步骤&#xff1a; 下面是一个简单的示例&#xff0c;展示了如何通过垂直轴&#xff08;左右对称&#…
阅读更多...
找不到模块“vue-router”。你的意思是要将 moduleResolution 选项设置为 node,还是要将别名添加到 paths 选项中?

找不到模块“vue-router”。你的意思是要将 moduleResolution 选项设置为 node,还是要将别名添加到 paths 选项中?

在tsconfig.app.json中添加&#xff0c;记得一定是 tsconfig.app.json 中&#xff0c;如添加到 tsconfig.node.json 还是会报错的 哈哈哈哈&#xff0c;不瞒你们&#xff0c;我就添加错了&#xff0c;哈哈哈。所以这也算写一个demo提醒自己 "compilerOptions": {&qu…
阅读更多...
深入理解指针1

深入理解指针1

目录 如对您有帮助&#xff0c;还望三连支持&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 1.内存和地址 计算机中常⻅的单位&#xff08;补充&#xff09;&#xff1a; 如何理解编址 2.指针变量和地址 2.1取地址操作符&#xff08;&&#xff09; 2.2指针变…
阅读更多...
多个开源的js补环境框架测试

多个开源的js补环境框架测试

原文链接&#xff1a;https://mp.weixin.qq.com/s/uEMFGpE5bqmTvzSgX2twvA 前言 在做js逆向时肯定会遇到补环境的情况&#xff0c;看到github开源了好几个补环境用的框架&#xff0c;这篇文章做个测试&#xff0c;看看哪个比较好用。 https://github.com/pysunday/sdenvhttp…
阅读更多...
Spring Boot3.x集成Disruptor4.0

Spring Boot3.x集成Disruptor4.0

Disruptor介绍 Disruptor是一个高性能内存队列&#xff0c;研发的初衷是解决内存队列的延迟问题(在性能测试中发现竟然与I/O操作处于同样的数量级)。基于Disruptor开发的系统单线程能支撑每秒600万订单&#xff0c;2010年在QCon演讲后&#xff0c;获得了业界关注。2011年&…
阅读更多...
前端学习|第五章

前端学习|第五章

HTML5&CSS3 新特性 前言HTML5 新特性一、语义化标签二、多媒体标签三、新增 input 类型四、新增表单属性 CSS3 新特性一、新增选择器二、盒子模型三、图片模糊处理四、calc 函数五、过渡 - transition六、2D 转换 - transform七、动画 - animation八、3D 转换 - translate3…
阅读更多...
数据库被Elbie勒索病毒加密可以恢复吗？

数据库被Elbie勒索病毒加密可以恢复吗？

一、Elbie勒索病毒简介 Elbie勒索病毒是一种严重的网络安全威胁&#xff0c;它通过加密用户文件并索要高额赎金来获取解密密钥。该病毒通常通过电子邮件附件、恶意网站、社交媒体平台以及利用用户网站服务器上的漏洞进行传播。一旦感染&#xff0c;用户的文件将被加密&#xff…
阅读更多...
我独自升级崛起下载方法分享 下载教程

我独自升级崛起下载方法分享 下载教程

《我独自升级&#xff1a;崛起》这款精彩绝伦的动作角色扮演游戏&#xff0c;灵感来源于大热网络漫画&#xff0c;让玩家亲自踏上主角程肖宇的征途&#xff0c;从觉醒初阶到实力飞跃&#xff0c;每一步成长都扣人心弦。值得注意的是&#xff0c;尽管全球正式发布日期定在了五月…
阅读更多...
RT-DETR-20240507周更说明|更新Inner-IoU、Focal-IoU、Focaler-IoU等数十种IoU计算方式

RT-DETR-20240507周更说明|更新Inner-IoU、Focal-IoU、Focaler-IoU等数十种IoU计算方式

RT-DETR改进专栏|包含主干、模块、注意力、损失函数等改进 专栏介绍 本专栏包含模块、卷积、检测头、损失等深度学习前沿改进,目前已有改进点70&#xff01;每周更新。 20240507更新说明&#xff1a; ⭐⭐ 更新CIoU、DIoU、MDPIoU、GIoU、EIoU、SIoU、ShapeIou、PowerfulIoU、…
阅读更多...
分析错误ValueError: could not determine the shape of object type ‘Series‘

分析错误ValueError: could not determine the shape of object type ‘Series‘

这个错误提示 ValueError: could not determine the shape of object type Series 通常发生在尝试将 pandas 的 Series 直接转换为 PyTorch 的 tensor 时&#xff0c;尤其是当 Series 的数据类型不明确或者包含非数值类型的数据时。为了修正这个问题&#xff0c;确保在转换之前…
阅读更多...
酷得智能电子方案 早教学习机

酷得智能电子方案 早教学习机

早教学习机是用户友好的&#xff0c;易于操作&#xff0c;同时要确保内容的科学性和适宜性&#xff0c;以促进儿童的健康成长和智力发展。 通常包括以下几个方面&#xff1a; 1.年龄分级内容&#xff1a;软件会根据儿童的不同年龄段提供相应的教育内容&#xff0c;从新生儿到…
阅读更多...
FastDFS-单机扩容

FastDFS-单机扩容

描述 周一上班收到用户反馈系统异常&#xff0c;紧急排查日志发现报错&#xff1a;FdfsServerException:错误:28&#xff0c;错误信息:没有足够的存储空间。 解决 根据异常信息判断是文件服务器可用内存不够了&#xff0c;首先登录文件服务器&#xff0c;使用df -h命令查看一…
阅读更多...
AIGC-3D数字人技术：高效助推各行业数字化水平升级

AIGC-3D数字人技术：高效助推各行业数字化水平升级

从“互联网”到“人工智能”&#xff0c;数字员工作为一种全新的交互形式&#xff0c;对企业有着重要的作用&#xff0c;企业、品牌通过数字人的AI语音交互、AI播报等核心功能&#xff0c;可以有效推动企业提升数字水平。 作为3D、AI虚拟数字人技术服务商及方案提供商&#xff…
阅读更多...
Cargo - 构建 rust项目、管理依赖包

Cargo - 构建 rust项目、管理依赖包

文章目录 关于 Cargo构建项目创建工程编译运行buildclean 管理依赖添加依赖updatecheck计时 manual rust 安装可参考&#xff1a;https://blog.csdn.net/lovechris00/article/details/124808034 关于 Cargo Cargo 官方文档 &#xff1a; https://doc.rust-lang.org/cargo/crat…
阅读更多...
我写了一套几乎无敌的参数校验组件！基于 SpEL 的参数校验组件「SpEL Validator」

我写了一套几乎无敌的参数校验组件！基于 SpEL 的参数校验组件「SpEL Validator」

前言 大家好&#xff0c;我是阿杆&#xff0c;不是阿轩。 参数校验这个东西&#xff0c;很多情况下都是比较简单的&#xff0c;用 NotNull、Size 等注解就可以解决绝大多数场景&#xff0c;但也有一些场景是这些基本注解解决不了的&#xff0c;只能用一些其他的方式处理&…
阅读更多...
OpenCV 入门（三）—— 车牌筛选

OpenCV 入门（三）—— 车牌筛选

OpenCV 入门系列&#xff1a; OpenCV 入门&#xff08;一&#xff09;—— OpenCV 基础 OpenCV 入门&#xff08;二&#xff09;—— 车牌定位 OpenCV 入门&#xff08;三&#xff09;—— 车牌筛选 OpenCV 入门&#xff08;四&#xff09;—— 车牌号识别 OpenCV 入门&#xf…
阅读更多...
批量将GOID转成GO term名并添加BP，MF，CC分类信息

批量将GOID转成GO term名并添加BP，MF，CC分类信息

基因本体论&#xff08;Gene Ontology&#xff0c;GO&#xff0c;https://www.geneontology.org&#xff09;是一个广泛应用于生物信息学领域的知识库&#xff0c;它提供了一套标准化的词汇和分类体系&#xff0c;用于描述基因功能、细胞组分和生物过程。GO旨在统一科研人员对基…
阅读更多...
LeetCode刷题记（五）：121~150题

LeetCode刷题记（五）：121~150题

121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…
阅读更多...
最新文章

Copyright @ 2022~2023