什么是Ajax,其底层原理是什么

在我们平时做项目时,基本选择使用像axios和fetch这样的工具库来处理数据交互。这些工具库提供了简洁而强大的API,使得开发人员能够轻松地进行HTTP请求和处理响应。然而,很少有人真正了解它们背后的底层原理,以及它们是如何实现数据交互的。
其实axios和fetch都是基于XMLHttpRequest(XHR)和浏览器内置的fetch API的封装。XHR是一个JavaScript对象,允许浏览器与服务器进行异步通信。它可以发送HTTP请求,并在接收到响应后触发回调函数进行处理。axios利用XHR对象提供了一种简单而直观的方式来发送各种类型的HTTP请求,并处理响应数据。
下面主要介绍一下Ajax和XMLHttpRequest对象。

Ajax

Ajax(Asynchronous JavaScript and XML)是一种在Web应用程序中进行异步通信的技术。它使用JavaScript和XML(现在通常使用JSON)来实现在不刷新整个页面的情况下与服务器进行数据交换的能力。

Ajax的工作原理如下:

  1. 客户端发起Ajax请求:通过JavaScript代码,在客户端发起一个异步请求到服务器。这可以通过XMLHttpRequest对象或现代的Fetch API来实现。

  2. 服务器处理请求:服务器接收到Ajax请求,并根据请求的内容进行处理,通常是处理特定的URL或API端点。

  3. 服务器响应:服务器将处理结果封装在HTTP响应中,并返回给客户端。响应通常是在JSON格式下返回数据,但也可以是XML或其他格式。

  4. 客户端处理响应:客户端接收到服务器的响应后,使用JavaScript代码对响应进行解析和处理。可以根据响应的数据更新网页的特定部分,动态修改内容或执行其他操作。

  5. 客户端更新页面:在客户端接收到响应后,根据需要更新网页的特定部分,而不需要重新加载整个页面。这使得网页可以实现部分刷新和动态交互,提供更好的用户体验。

Ajax的优点包括:

  • 异步通信:Ajax请求是异步的,不会阻塞页面的其他操作。这允许网页在后台发送请求并继续执行其他任务。
  • 部分刷新:通过更新页面的特定部分,可以避免重新加载整个页面,提高性能和用户体验。
  • 动态交互:通过与服务器进行实时数据交换,可以实现动态更新内容和交互式功能。
  • 减少带宽:由于只更新部分页面内容,Ajax请求可以减少数据传输量,节省带宽和加载时间。
    XMLHttpRequest是一种用于在JavaScript中进行HTTP请求的内置对象。它允许客户端与服务器进行异步通信,并在不刷新整个页面的情况下获取数据或更新部分页面内容。

使用XMLHttpRequest可以执行各种类型的HTTP请求,如GET、POST、PUT、DELETE等。以下是一个使用XMLHttpRequest发送GET请求的示例:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);  // 创建一个GET请求,指定URL和异步标志为true
xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {  // 请求状态为完成if (xhr.status === 200) {  // 成功接收到响应var responseData = JSON.parse(xhr.responseText);  // 解析响应数据// 处理响应数据,更新页面内容或执行其他操作console.log(responseData);} else {// 处理请求错误console.log('请求失败:' + xhr.status);}}
};
xhr.send();  // 发送请求

在上面的示例中,首先创建了一个XMLHttpRequest对象,并通过open()方法指定了GET请求的URL和异步标志。然后,设置了onreadystatechange事件处理程序,它会在请求的状态发生变化时被调用。当请求的状态变为XMLHttpRequest.DONE(值为4)时,表示请求完成,可以处理响应。

在onreadystatechange事件处理程序中,首先检查响应状态是否为200,表示成功接收到响应。然后,使用XMLHttpRequest对象的responseText属性获取响应的文本数据,并使用JSON.parse()解析响应数据(假设响应是JSON格式的)。最后,可以根据需要处理解析后的响应数据,例如更新页面内容。

最后,调用send()方法发送请求。该示例中的GET请求没有请求体,如果需要发送请求参数,可以在open()方法中添加URL参数或使用setRequestHeader()方法设置请求头字段。

XMLHttpRequest对象

XMLHttpRequest对象是浏览器提供的内置对象,用于在JavaScript中进行HTTP通信。它允许在不刷新整个页面的情况下与服务器进行数据交换,实现异步通信。

XMLHttpRequest对象的主要属性和方法如下:

属性:

  • readyState: 表示请求的当前状态。有五个可能的值:
    • 0: 请求未初始化(XMLHttpRequest对象已创建,但尚未调用open方法)
    • 1: 服务器连接已建立(调用了open方法)
    • 2: 请求已接收(调用了send方法,且服务器已接收到请求)
    • 3: 请求处理中(服务器正在处理请求)
    • 4: 请求已完成,且响应就绪(服务器处理完毕并返回响应)
  • status: 表示响应的HTTP状态码。
  • statusText: 表示响应的HTTP状态文本。
  • responseText: 包含响应的文本数据。
  • responseType: 设置响应的数据类型(如"text"、“json”、"arraybuffer"等)。
  • responseURL: 包含响应的URL。
  • timeout: 设置请求的超时时间,单位为毫秒。

方法:

  • open(method, url, async): 初始化一个请求。method表示请求方法,url表示请求的URL,async表示是否异步,默认为true。
  • send(data): 发送请求。data表示要发送的数据,对于GET请求通常为null,对于POST请求通常为请求体中的数据。
  • setRequestHeader(header, value): 设置请求头字段。
  • getAllResponseHeaders(): 获取所有响应头字段。
  • getResponseHeader(header): 获取指定的响应头字段的值。
  • abort(): 终止请求。

XMLHttpRequest对象的使用步骤如下:

  1. 创建XMLHttpRequest对象:
var xhr = new XMLHttpRequest();
  1. 初始化请求:
xhr.open(method, url, async);
  1. 设置请求头字段(如果需要):
xhr.setRequestHeader(header, value);
  1. 设置响应类型(如果需要):
xhr.responseType = type;
  1. 设置请求超时时间(如果需要):
xhr.timeout = time;
  1. 注册事件处理程序:
xhr.onload = function() {// 响应处理逻辑
};xhr.onerror = function() {// 错误处理逻辑
};xhr.ontimeout = function() {// 超时处理逻辑
};// 可以注册其他事件处理程序,如onprogress等
  1. 发送请求:
xhr.send(data);
  1. 在事件处理程序中处理响应或错误。

需要注意的是,XMLHttpRequest对象在处理跨域请求时会受到同源策略的限制。如果需要跨域请求,可以使用CORS(Cross-Origin Resource Sharing)或代理服务器来进行处理。

尽管XMLHttpRequest对象是用于Ajax的传统方式,但现代Web开发更倾向于使用Fetch API、Axios等现代化的工具和库,它们提供了更简洁、灵活和易用的API,能够更方便地处理Ajax请求和响应。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter——最详细(NavigationBar)使用教程

NavigationBar简介 Material 3 导航栏组件! 导航栏提供了一种持久且便捷的方式来在应用程序的主要目的地之间进行切换。 使用场景: 底部菜单栏模块 属性作用onDestinationSelected选择索引回调监听器selectedIndex目前选定目的地的索引destinations存放菜单按钮back…

小程序:调用手机的相册

1、需求 点击按钮,调用手机相册选择图片上传 2、解决方案 Button 上加 openType"chooseAvatar";onChooseAvatar 写方法,必须用button 按钮,更改下样式看不出来就行。 3、代码 //解决方案 // 1、Button 上加 openTy…

3.安装和配置 IntelliJ IDEA

安装和配置 IntelliJ IDEA 本文将详细介绍如何安装和配置 IntelliJ IDEA,这是一款流行的Java集成开发环境(IDE),提供强大的开发工具和功能,帮助您高效地编写和调试Java应用程序。 步骤 1:下载 IntelliJ I…

七大排序算法——冒泡排序,通俗易懂的思路讲解与图解(完整Java代码)

文章目录 一、排序的概念排序的概念排序的稳定性七大排序算法 二、冒泡排序核心思想代码实现 三、性能分析四、七大排序算法 一、排序的概念 排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或…

C++之工厂模式

目录 一、为什么要使用工厂模式 优点 缺点 二、简单工厂(Simple Factory) 好处: 不足: 三、工厂方法: 好处: 不足: 四、抽象工厂(Abstract Factory) 一、为什…

最长公共子序列

题目 给定两个长度分别为 N 和 M 的字符串 A 和 B,求既是 A 的子序列又是 B 的子序列的字符串长度最长是多少。 输入格式 第一行包含两个整数 N 和 M。 第二行包含一个长度为 N 的字符串,表示字符串 A。 第三行包含一个长度为 M 的字符串&#xff0…

【HCIA】10.VLAN间通信

VLAN间通信的解决方法 使用路由器的物理接口 路由器三层接口作为网关,转发本网段前往其它网段的流量。路由器三层接口无法处理携带VLAN Tag的数据帧,因此交换机上联路由器的接口需配置为Access。路由器的一个物理接口作为一个VLAN的网关,因此…

Django_re_path_使用正则匹配url

与path定义的路由相比,re_path 定义的路由可以使用正则表达式匹配url。 需要注意的是: 如果未定义匹配结果的变量名,匹配的结果默认传入视图的第2个形参。如果定义了匹配结果的变量名,匹配的结果会传给视图的同名字段&#xff0…

【GitOps系列】从零上手GitOps

文章目录 GitOps 介绍如何将业务代码构建为容器镜像?如何将容器镜像部署到K8s?K8s如何实现自动扩容和自愈?1.传统的扩容和自愈2.k8s自愈机制3.k8s弹性扩容 如何借助GitOps实现应用秒级自动发布和回滚?1.传统 K8s 应用发布流程2.从…

【Arduino小车实践】陀螺仪的使用

一、MPU6050简介 MPU6050是一款陀螺仪模块,可以测量X、Y、Z三轴的角速度和加速度,还带有温度传感器和数字运动处理器(DMP)。 二、学习步骤 1. I2C协议 MPU6050是通过I2C协议进行驱动的,配置寄存器和获取数据都需要通过I2C协议去实现开发板与…

三、用 ChatGPT 写 PPT

目录 一、实验介绍 二、背景 三、如何让 ChatGPT 写 PPT 3.1 ChatGPT 能直接生成 PPT 文件吗?

CentOS环境下的Nginx安装

Nginx 安装 下载 nginx 下载地址:http://nginx.org/en/download.html 将下载好的压缩包拷贝到根目录下 通过xshell如果出现 bash: rz: 未找到命令 ,需要先运行下面的命令 yum -y install lrzsz安装 解压到当前目录 tar -zxvf nginx-1.22.1.tar.gz安…

Hive SQL 迁移 Flink SQL 在快手的实践

摘要:本文整理自快手数据架构工程师张芒,阿里云工程师刘大龙,在 Flink Forward Asia 2022 生产实践专场的分享。本篇内容主要分为四个部分: Flink 流批一体引擎 Flink Batch 生产实践 核心优化解读 未来规划 点击查看原文视频…

走进人工智能| Computer Vision 数字化时代的视觉启示录

前言: 计算机视觉是通过模仿人类视觉系统的工作原理,使计算机能够感知、理解和解释图像和视频的能力。 文章目录 序言背景适用领域技术支持应用领域程序员如何学总结 序言 计算机视觉是人工智能领域的一个重要分支,它涉及使计算机能够“看”…

靶场的安装

sqli-lab 1.将安装包解压放到WWW目录下 2.修改 db-creds.inc文件里面的数据库的用户名密码为自己的用户名密码 路径:D:\phpStudy_64\phpstudy_pro\WWW\sqli-labs-master\sql-connections\db-creds.inc 3. 更改php版本位5.9版本,不然会报错 4.安装数…

【Sa-Token】SpringBoot 整合 Sa-Token 快速实现 API 接口签名安全校验

在涉及跨系统接口调用时,我们容易碰到以下安全问题: 请求身份被伪造请求参数被篡改请求被抓包,然后重放攻击 sa-token api-sign 模块将帮你轻松解决以上难题。(此插件是内嵌到 sa-token-core 核心包中的模块,开发者无…

MFC学习之2048小游戏程序源码

2048游戏的开发原理相对简单,它基于一个4x4的方格,通过控制数字方块的移动来合成相同的数字方块,并生成新的数字方块。 具体实现过程如下: 确定需求:首先需要明确游戏的功能需求,如产生随机数字方块、控制…

MYSQL执行一条SELECT语句的具体流程

昨天CSDN突然抽风 我一个ctrlz把整篇文章给撤掉了还不能复原 直接心态崩了不想写了 不过这部分果然还是很重要,还是写出来吧 流程图 这里面总共有两层结构Server层 储存引擎 Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现,主要包…

WebSocket理解

WebSocket理解 WebSocket定义与HTTP关系相同点:不同点:联系总体过程 HTTP问题长轮询Ajax轮询 WebSocket特点 WebSocket 定义 本质上是TCP的协议 持久化的协议 实现了浏览器和服务器的全双工通信,能更好的节省服务器资源和带宽 与HTTP关系 相同点: 基于…

接口测试 react+unittest+flask 接口自动化测试平台

目录 1 前言 2 框架 2-1 框架简介 2-2 框架介绍 2-3 框架结构 3 平台 3-1 平台组件图 1 新建用例 2 生成测试任务 3 执行并查看测试报告 3-2 用例管理 3-2-1 用例设计 3-3 任务管理 3-3-1 创建任务 3-3-2 执行任务 3-3-3 测试报告 3-3-4 邮件通知 1 前言 构建…