当前位置： 首页 > news >正文

Ajax？阿贾克斯？

news 2025/12/16 12:08:16

一、Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的创新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript在浏览器上执行。
XMLHttpRequest 只是实现 Ajax 的一种方式。

二、同步与异步

同步：发送⼀个请求，需要等待响应返回，然后才能够发送下⼀个请求，如果该请求没有响应，不能发送下⼀个请求，客户端会处于⼀直等待过程中。

异步：发送⼀个请求，不需要等待响应返回，随时可以再发送下⼀个请求，即不需要等待。

三、实现Ajax

1. 原生JS实现

实现步骤：
1、定义⼀个XMLHttpRequest核⼼对象xhr;
2、通过xhr.open⽅法给当前对象提供访问⽅式、URL等。
3、发送当前的请求⾄指定的URL
4、接收返回值并处理

案例：前台⻚⾯通过⼀个按钮向后台发送⼀个Ajax请求，后台做完处理后向前台⻚⾯响应⼀段⽂本信息显示在⻚⾯上

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head> 
<title>Title</title> 
<script type="text/javascript">function testJsAjax(){//1. 创建核⼼对象var xmlhttp = new XMLHttpRequest();//2.通过核⼼对象⽅法给当前的对象提供访问⽅式和URL路径xmlhttp.open("GET","http://localhost/getmsg",true);//3.发送当前的请求⾄指定的URLxmlhttp.send();//4.接收返回值并处理xmlhttp.onreadystatechange=function(){//xmlhttp.readyState==4代表XMLHttpRequest对象读取服务器的响应结束//xmlhttp.status==200响应成功if (xmlhttp.readyState==4 && xmlhttp.status==200){var msg = xmlhttp.responseText;document.getElementById("msg").innerHTML=msg;}}}
</script>
</head> <body> <div id="msg"></div> <input type="button" name="btn" value="JS原⽣⽅式实现异步" οnclick="testJsAjax()">
</body>
</html>

2.JQuery实现

JS版的Ajax仅做为了解，我们重点学习jQuery版的Ajax，jQuery是⼀个优秀的js框架，⾃然对JS原⽣的Ajax进⾏了封装，封装后的Ajax的操作⽅法更简洁，功能更强⼤，这也是程序员最普遍使⽤，语法结构简单，代码可读性好。

与Ajax操作相关的jQuery⽅法经常使⽤的有三种：
在这里插入图片描述

2.1 ajax请求

$.ajax({url:"",data:{},type:"post/get",async:true,dataType:"text",success:function(obj){},error:function(){}
})

在这里插入图片描述

注意事项：

  1. 每个属性后都要跟随⼀个英⽂逗号，最后⼀个不⽤。
  2. 每⼀个属性都是键值对的形式存在，中间⽤英⽂冒号:隔开
  3. data:{} 是⼀个特殊的写法，值是⼀个{}，⾥⾯使⽤键值对存储
    例如：data:{“键1”:值1, “键2”:值2, “键3”:值3}
  4. 以上属性没有先后顺序要求

2.2 get请求

$.get(URL,data,function(data,status,xhr),dataType)
参数含义
URL必需。规定您需要请求的 URL。
data可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。规定当请求成功时运行的回调函数。
额外的参数：
  data 包含来自请求的结果数据"
  status 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
  xhr 包含 XMLHttpRequest 对象
dataType可选。规定预期的服务器响应的数据类型。
  默认地，jQuery 会智能判断。
  可能的类型：
  “xml” - 一个 XML 文档
  “html” - HTML 作为纯文本
  “text” - 纯文本字符串
  “script” - 以 JavaScript 运行响应，并以纯文本返回
  “json” - 以 JSON 运行响应，并以 JavaScript 对象返回
  “jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

注意事项：

  1. 这种写法功能和$.ajax是⼀样的，但是严格要求属性顺序。

实例：
请求 “/try/ajax/test.php”，但是忽略返回结果：

$.get("/try/ajax/test.php");

请求 “/try/ajax/test.php” 并连同请求发送一些额外的数据（忽略返回结果）：

$.get("/try/ajax/test.php", { name:"Donald", town:"Ducktown" });

请求 “/try/ajax/test.php” 并传递数据数组到服务器（忽略返回结果）：

$.get("/try/ajax/test.php", { 'colors[]' : ["Red","Green","Blue"] });

请求 “/try/ajax/test.php” 并提醒请求的结果：

$.get("/try/ajax/test.php", function(data){
alert("Data: " + data);
});

2.3 post请求

$(selector).post(URL,data,function(data,status,xhr),dataType)

实例：使用 AJAX 的 POST 请求来改变div元素的文本

$.post("demo_ajax_gethint.html",{suggest:txt},function(result){$("span").html(result);
});

参考资料：

  1. CSDN博主「PIKapikaaaa」https://blog.csdn.net/PIKapikaaaa/article/details/124914380
  2. 菜鸟教程 AJAX 教程 https://www.runoob.com/ajax/ajax-tutorial.html

相关文章：

Ajax？阿贾克斯？

一、Ajax简介 AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的创新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部分网…...

编程日记 2023/2/17 22:38:11

项目质量要怎么保持？ 如何借助系统软件进行管理

对于任何项目型的企业总是很关心项目成本的话题&#xff0c;但不知从什么时候开始&#xff0c;高质量等于高成本成了各个企业的一种潜意识。 如果交付的项目产品不符合质量标准&#xff0c;即使企业使用最好的项目管理工具或者每个里程碑都达到并在预算范围内完成项目&#xf…...

编程日记 2023/2/17 22:37:06

没有接口文档的怎样进行接口测试

前言&#xff1a; 在进行接口测试之前&#xff0c;一般开发会提供接口文档&#xff0c;给出一些接口参数和必要熟悉&#xff0c;便于我们编写接口脚本。但如果没有提供接口开发文档的请求下&#xff0c;我们该如何编写接口测试脚本呢&#xff1f;在编写测试脚本前要做哪些必要…...

编程日记 2023/2/17 22:36:01

Unity—游戏设计模式+GC

每日一句&#xff1a;"少年一贯快马扬帆 道阻且长不转弯 要盛大要绚烂要哗然 要用理想的泰坦尼克去撞现实的冰川 要当烧赤壁的风而非借箭的草船 要为一片海就肯翻万山。" 目录 状态模式&#xff1a; 外观模式 组合模式&#xff0c; 单例模式 命令模式 观察者模…...

编程日记 2023/2/17 22:33:50

【刷题笔记】--二分查找binarysearch

当给一个有序的数组&#xff0c;在其中查找某个数&#xff0c;可以考虑用二分查找。 题目1&#xff1a; 二分查找的思路&#xff1a; 设置left和right指针分别指向要查找的区间。mid指针指向这个区间的中间。比较mid指针所指的数与target。 如果mid所指的数小于target&…...

编程日记 2023/2/17 22:32:45

Python版本的常见模板（二） 数论（一）

文章目录前言质数相关质数判断求约数求取区间质数埃氏筛法线性筛法分解质因数欧拉欧拉函数求取单个数线性筛法求取欧拉定理求逆元快速幂/幂取模欧几里得算法求最小公约数拓展欧几里得算法求解同余方程前言 本文主要是提供Python版本的常见的一些与数论相关的模板&#xff0c;例…...

编程日记 2023/2/17 22:31:38

SQL快速上手（知识点总结+训练资料）

文章目录一 SQL训练资料二 SQL知识点总结1.SQL语句的执行顺序2.窗口函数3.字符串处理函数模糊查询三 SQL题目的总结一 SQL训练资料 牛客SQL题目 猴子数据分析题目 关注的公众号 猴子数据分析 二 SQL知识点总结 1.SQL语句的执行顺序 每一个子句产生的中间结果供接下来的子句…...

编程日记 2023/2/17 22:30:34

无需经验的steam搬砖，每天操作1小时，轻松创业赚钱！

我作为一个95后社畜&#xff0c;就喜欢倒腾各种赚钱的事情&#xff0c;8年老韭菜告诉你&#xff0c;副业创收一点都不难&#xff0c;难就难在是否找对项目&#xff0c;俗话说方向不对&#xff0c;努力白费&#xff01; 什么做苦力、技能、直播卖货&#xff0c;电商等等对比我这…...

编程日记 2023/2/17 22:29:28

如何创建你的公司的FAQ页面？

很多企业考虑为公司搭建一个“常见问题”页面&#xff0c;作为帮助客户回答关于产品和服务的常见问题的一种方式。 FAQ页面和登录/销售页面不同&#xff0c;没有展现出直接的投资回报&#xff0c;但是为团队节省了其他成本&#xff0c;据了解&#xff0c;高达67%的客户相比于跟…...

编程日记 2023/2/17 22:28:24

CK-GW06-E03与欧姆龙PLC配置指南

CK-GW06-E03与欧姆龙PLC配置指南CK-GW06-E03是一款支持标准工业EtherCAT协议的网关控制器,方便用户集成到PLC等控制系统中。本控制器提供了网络 POE 供电和直流电源供电两种方式&#xff0c;确保用户在使用无POE供电功能的交换机时可采用外接电源供电&#xff1b;系统还集成了六…...

编程日记 2023/2/17 22:27:16

使用docker-compose部署RocketMQ5.0

简介&#xff1a;使用docker-compose部署rocketmq5.0。文中会介绍docker-compose版本以及需要注意的项第一步&#xff1a;进入hub.docker.com搜索rocketmq我们选择第一个&#xff0c;因为第一个是7个月前更新的&#xff0c;&#xff08;我看有很多博客使用的依旧是最下面的那种…...

编程日记 2023/2/17 22:26:08

嵌入式ARM设计编程(四) ARM启动过程控制

文章和代码已归档至【Github仓库&#xff1a;hardware-tutorial】&#xff0c;需要的朋友们自取。或者公众号【AIShareLab】回复 嵌入式 也可获取。 一、实验目的 &#xff08;1&#xff09; 掌握建立基本完整的ARM 工程&#xff0c;包含启动代码&#xff0c;C语言程序等&…...

编程日记 2023/2/17 22:25:04

企业维基都说好，今天我们来看看 wiki 软件的缺点有哪些？

企业维基企业wiki和内部知识库可能看起来是一回事——但它们实际上是非常不同的软件类型。也许您可能不知道你在寻找的是知识基础软件&#xff0c;还是wiki软件。 无论哪种方式&#xff0c;缺乏知识都是生产力的巨大瓶颈。事实上&#xff0c;未能分享知识是财富500强企业每年亏…...

编程日记 2023/2/17 22:22:56

08- 汽车产品聚类分析综合项目 (机器学习聚类算法) (项目八)

找出性价比较高的车 LabelEncoder: python:sklearn标签编码(LabelEncoder) sklearn.preprocessing.LabelEncoder的使用&#xff1a;在训练模型之前&#xff0c;通常都要对数据进行一定得处理。将类别编号是一种常用的处理方法&#xff0c;比如把类别“电脑”&#xff0c;“手机…...

编程日记 2023/2/17 22:21:52

揭开苹果供应链，如何将其命运与中国深度捆绑

前 言 诺基亚在2007年时拥有9亿用户&#xff0c;在手机市场上占据主导地位&#xff0c;福布斯在当时以“谁能赶上手机之王&#xff1f;”为标题刊登了一篇关于该公司的报道&#xff0c;与此同时&#xff0c;苹果公司推出了iPhone系列产品。16年后&#xff0c;苹果公司以充足的…...

编程日记 2023/2/17 22:20:45

Mybatis 之useGeneratedKeys注意点

一.例子 Order.javapublic class Order {private Long id;private String serial; }orderMapper.xml<?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd…...

编程日记 2023/2/17 22:19:37

数据结构---时间复杂度

专栏&#xff1a;数据结构 个人主页&#xff1a;HaiFan. 专栏简介&#xff1a;开学数据结构&#xff0c;接下来会慢慢坑新数据结构的内容&#xff01;&#xff01;&#xff01;&#xff01; 时间复杂度前言1.算法效率1.1如何衡量一个算法的好坏1.2算法的复杂度2.时间复杂度2.1大…...

编程日记 2023/2/17 22:18:31

如何保证集合是线程安全的 ConcurrentHashMap如何实现高效地线程安全？

第10讲 | 如何保证集合是线程安全的? ConcurrentHashMap如何实现高效地线程安全&#xff1f; 我在之前两讲介绍了 Java 集合框架的典型容器类&#xff0c;它们绝大部分都不是线程安全的&#xff0c;仅有的线程安全实现&#xff0c;比如 Vector、Stack&#xff0c;在性能方面也…...

编程日记 2023/2/17 22:17:26

C++对象模型和this指针

成员变量和成员函数分开存储&#xff1a;基本概念&#xff1a;在C中&#xff0c;类内的成员变量和成员函数分开存储只有非静态成员变量才属于类的对象上每个空对象都会有一个独一无二的内存地址&#xff0c;所以&#xff0c;空对象占用内存空间的大小为1代码实现&#xff1a;#i…...

编程日记 2023/2/17 22:16:19

kubernetes教程 --Pod调度

Pod调度 在默认情况下&#xff0c;一个Pod在哪个Node节点上运行&#xff0c;是由Scheduler组件采用相应的算法计算出来的&#xff0c;这个过程是不受人工控制的。但是在实际使用中&#xff0c;这并不满足的需求&#xff0c;因为很多情况下&#xff0c;我们想控制某些Pod到达某…...

编程日记 2023/2/17 22:15:13

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/12/16 5:54:19

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/12/9 11:33:36

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/12/13 16:45:53

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/12/9 3:52:17

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/12/10 1:25:39

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/12/11 6:19:08

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/12/15 19:07:10

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/12/12 14:13:51