什么是AJAX?它的运用场景有哪些?

news/2024/4/16 15:11:35/文章来源:https://blog.csdn.net/m0_61227789/article/details/136492026

文章目录

  • 前言
  • 一、什么是AJAX
  • 二、AJAX原理是什么
  • 三、为什么需要AJAX
  • 四、AJAX的使用
  • 五、AJAX的应用场景


前言

AJAX 即 Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源),互联网资源的传输变得前所未有的轻量级和纯粹,这激发了广大开发者的创造力,使各式各样功能强大的网络站点,和互联网应用如雨后春笋一般冒出,不断带给人惊喜。

在这里插入图片描述


一、什么是AJAX

Ajax是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。

Ajax的目的是提高用户体验,较少网络数据的传输量。同时,由于AJAX请求获取的是数据而不是HTML文档,因此它也节省了网络带宽,让互联网用户的网络冲浪体验变得更加顺畅。

1.AJAX = 异步 JavaScript 和 XML。
2.AJAX 是一种用于创建快速动态网页的技术。
3.通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。
4.可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

什么叫异步:

当前页面发送一个请求给服务器,当前页面不需要等待服务器响应才能操作网页。发送完请求之后,当前页面可以继续浏览、操作。

二、AJAX原理是什么

Ajax相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是JavaScript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

三、为什么需要AJAX

背景:

1.传统的Web网站,提交表单,需要重新加载整个页面。
2.如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差。
3.服务端返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的。
4.浏览器提交表单后,发送的数据量大,造成网络的性能问题。

当需要从服务器获取数据,并刷新页面的操作,如果不采用AJAX,则需要用提交整个表单的方式,当提交表单时,发送请求给服务器,页面需要等待服务器发送完response后,页面才能恢复操作。

我们如果使用传统方式提交表单,流程如下图:

在这里插入图片描述

如果我们使用AJAX提交表单:

在这里插入图片描述

四、AJAX的使用

  1. 创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)
let xhr = null;
if (window.`XMLHttpRequest`) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  xhr = new `XMLHttpRequest`();  
} else {// 兼容 IE6, IE5 xhr = new ActiveXObject("Microsoft.XMLHTTP");  
}
  1. 向服务器发送请求
xhr.open(method, url, async);  
send(string);//`POST`请求时才使用字符串参数,否则不用带参数。method:请求的类型;GET 或 POST
url:文件在服务器上的位置
asynctrue(异步)或 false(同步)
  1. 服务器响应处理(区分同步跟异步两种情况)
responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。同步处理:
xhr.open("`GET`","info.txt",false);  
xhr.send();  
document.`GET`ElementById("myDiv").innerHTML = xhr.responseText; //获取数据直接显示在页面上异步处理:
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200){    document.`GET`ElementById("myDiv").innerHTML = xhr.responseText;  }
}//相对来说比较复杂,要在请求状态改变事件中处理。

原生JavaScript AJAX请求有几个步骤?分别是什么?

//创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//发送信息至服务器时内容编码类型
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//接受服务器响应数据
xhr.onreadystatechange = function () {if (xhr.readyState == 4 && (xhr.status == 200) { // let data = xhr.responseText;  }
};
//规定请求的类型、URL 以及是否异步处理请求。
xhr.open('GET',url,true);
//发送请求
xhr.send(null);

五、AJAX的应用场景

以下是一些常见的Ajax应用场景:

  • 动态加载内容:使用Ajax可以在不刷新整个页面的情况下,通过异步请求从服务器获取数据并动态更新页面的部分内容,从而实现更流畅的用户体验。

  • 表单验证:通过使用Ajax技术可以在不刷新页面的情况下,实时验证表单数据的合法性并提供反馈信息。

  • 搜索建议:当用户在搜索框中输入内容时,使用Ajax技术可以在输入框下方实时显示相关的搜索建议,帮助用户更快速地找到自己需要的信息。

  • 购物车更新:在电商网站中,用户添加商品到购物车时,使用Ajax可以在不刷新整个页面的情况下,实时更新购物车中的商品数量以及总价等信息。

  • 实时聊天在聊天应用程序中,使用Ajax可以实现与服务器的实时通信,让用户在不刷新页面的情况下,实时接收到其他用户的消息。

总的来说,Ajax的应用场景十分广泛,特别是在Web应用程序中,可以提高用户的交互体验和操作效率。

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

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

相关文章

186基于matlab的信号盲源分离算法

基于matlab的信号盲源分离算法,包括变步长盲源分离(EASI),RLS(自然梯度和普通梯度),并将三种方法分离结果进行对比。程序已调通,可直接运行。 186 信号盲源分离算法 变步长盲源分离 (xiaohongshu.com)

如何在Ubuntu系统部署DbGate数据库管理工具并结合cpolar内网穿透远程访问

文章目录 1. 安装Docker2. 使用Docker拉取DbGate镜像3. 创建并启动DbGate容器4. 本地连接测试5. 公网远程访问本地DbGate容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 本文主要介绍如何在Linux Ubuntu系统中使用Docker部署DbGate数据库管理工…

【鸿蒙 HarmonyOS 4.0】应用状态:LocalStorage/AppStorage/PersistentStorage

一、介绍 如果要实现应用级的,或者多个页面的状态数据共享,就需要用到应用级别的状态管理的概念。 LocalStorage:页面级UI状态存储,通常用于UIAbility内、页面间的状态共享。AppStorage:特殊的单例LocalStorage对象&…

Spring Boot中Excel数据导入导出的高效实现

🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…

Rust 开发的高性能 Python 包管理工具,可替换 pip、pip-tools 和 virtualenv

最近,我在 Python 潮流周刊 中分享了一个超级火爆的项目,这还不到一个月,它在 Github 上已经拿下了 8K star 的亮眼成绩,可见其受欢迎程度极高!国内还未见有更多消息,我趁着周末把一篇官方博客翻译出来了&a…

如何转行成为产品经理?

转行NPDP也是很合适的一条发展路径,之后从事新产品开发相关工作~ 一、什么是NPDP? NPDP 是产品经理国际资格认证,美国产品开发与管理协会(PDMA)发起的,是目前国际公认的唯一的新产品开发专业认证&#xff…

grafana table合并查询

注:本文基于Grafana v9.2.8编写 1 问题 默认情况下table展示的是一个查询返回的多个field,但是我想要的数据在不同的metric上,比如我需要显示某个pod的读写IO,但是读和写这两个指标存在于两个不同的metirc,需要分别查…

flink重温笔记(十二): flink 高级特性和新特性(1)——End-to-End Exactly-Once(端到端精确一致性语义)

Flink学习笔记 前言:今天是学习 flink 的第 12 天啦!学习了 flink 高级特性和新特性之 End-to-End Exactly-Once(端到端精确一致性语义),主要是解决大数据领域数据从数据源到数据落点的一致性,不会容易造成…

新手小白剪辑视频知识点:视频分辨率和位深度,有什么区别?

新手小白需要了解的视频剪辑知识点,什么是视频分辨率尺寸(文件大小)和位深度? 分辨率尺寸/文件大小 常见的视频分辨率是高清和 4K。高清素材的屏幕像素(宽度 x 高度)测量值通常为 1920 x 1080,而 4K 素材是其四倍&am…

php方便直接修改数据库的字段(挺方便的)

1.界面效果 2.代码 <?phpecho <form action"" method"post"><label for"table">表名:</label><input type"text" id"table" name"table"><br><div id"fieldsContaine…

Java项目:基于SSM框架实现的二手车交易平台【源码+开题报告+任务书+毕业论文+答辩ppt】

一、项目简介 本项目是一套基于SSM框架实现的二手车交易平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能齐…

Python之Web开发中级教程----搭建Git环境

Python之Web开发中级教程----搭建Git环境一 Git 是目前世界上最先进的分布式版本控制系统 作用&#xff1a;代码管理。方便多人协同开发&#xff1b;方便版本控制。 安装git 单人本地仓库 建立本地仓库目录 配置个人管理信息 git config –global user.email 32356105163.com…

华为北向网管NCE开发教程(1)闭坑选接口协议

华为北向网管NCE开发教程&#xff08;1&#xff09;闭坑选接口协议 华为北向网管NCE开发教程&#xff08;2&#xff09;REST接口开发 华为北向网管NCE开发教程&#xff08;3&#xff09;CORBA协议开发 本文一是记录自己开发华为北向网管遇到的坑&#xff0c;二是给需要的人&…

【php】【mysql】 原生初级简易新闻发布系统成品代码动态网站开发网页WEB浏览器端B/S结构

【php】【mysql】 原生初级简易新闻发布系统成品代码动态网站开发网页WEB浏览器端B/S结构 一级目录二级目录三级目录 获取源码方式项目说明&#xff1a;项目运行环境文件包含运行截图程序代码结构图新闻首页图新闻详情图新闻列表管理图个人信息管理图登录界面新闻详情新闻发布 …

@EnableWebMvc介绍和使用详细demo

EnableWebMvc是什么 EnableWebMvc 是 Spring MVC 中的一个注解&#xff0c;它用于启用 Spring MVC 框架的基本功能&#xff0c;以便你可以使用 Spring MVC 提供的特性来处理 Web 请求。 通常情况下&#xff0c;在基于 Spring Boot 的应用中&#xff0c;并不需要显式地使用 Ena…

漏洞挖掘 | 公益SRC上榜技巧

目录 1、寻找漏洞 2、挖掘漏洞 3、提交报告 4、上榜吉时 5、快速上分 6、小技巧&#xff1a;冲榜拿分制胜点-拉开人与人之间的差距 1、寻找漏洞 寻找漏洞的2种办法&#xff1a; 1)谷歌语法 注意&#xff1a;用谷歌语法找站的时候&#xff0c;要加点中文&#xff0c;不然搜…

从数据处理到3D PDF生成:交互式3D PDF生成引擎HOOPS Publish的工作原理

在当今数字化时代&#xff0c;3D技术在各个行业中扮演着重要角色&#xff0c;从制造业到医疗保健&#xff0c;再到建筑设计。为了更好地共享、演示和交互展示3D模型数据&#xff0c;HOOPS Publish作为一款强大的3D引擎&#xff0c;专门用于生成交互式的3D PDF文件。本文将深入探…

【一】【设计模式】类关系UML图

1. 继承&#xff08;Generalization&#xff09; 继承是对象间的一种层次关系&#xff0c;允许子类继承并扩展父类的功能。 UML线&#xff1a;带有空心箭头的直线&#xff0c;箭头指向基类&#xff08;父类&#xff09;。 class Parent {public void parentMethod() {System.…

技术选型思考:分库分表和分布式DB(TiDB/OceanBase) 的权衡与抉择

在当今数据爆炸的时代&#xff0c;数据库作为存储和管理数据的核心组件&#xff0c;其性能和扩展性成为了企业关注的重点。随着业务的发展和数据量的不断增长&#xff0c;传统的单库单表架构逐渐暴露出性能瓶颈和扩展性限制。为了应对这些挑战&#xff0c;企业常常需要在分库分…

图机器学习(3)-面向节点的人工特征工程

0 问题引入 地铁导航图 计算机是看不懂这些图&#xff0c;计算机只能看懂向量、矩阵。 传统图机器学习只讨论连接特征。 构造一个新的特征 x 1 x 2 x_1x_2 x1​x2​&#xff0c;有利于分开这种数据。 人需要去翻译这些计算机不懂的特征&#xff0c;变成计算机可以懂…