从浅到深，带你彻底搞懂AJAX异步请求

什么是 AJAX

---

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

实例用法

---

AJAX异步请求细分的话可以分为四种：

1. load()方法

2. $.get()方法

3. $.post()方法

4. $.ajax()方法

其实这四种方法，原理和实现都相差无几。具体实现请往下看吧。

1、AJAX load() 方法

load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

使用语法

$(selector).load(URL, data, callback);

【注意】

URL 必填项，请求加载的URL地址。

data 选填项，参数，请求时需要携带的参数，格式键 / 值对集合。

callback 选填项，load()方法执行完后回调方法。

使用案例（需要引入Jquery）

页面给出了一个按钮和一个div标签，点击按钮load数据内容显示到div中。代码如下：

AJAX load方法

JS代码：

【注】 load方法中第一个参数loadText是请求地址，第二{data: “请求携带的参数”}是携带的参数，第三个为请求完成后回调方法。请求地址必填，其他两个可以根据项目需求是否添加。

回调方法中三个参数分别为：

1. responseTxt - 请求返回的内容

2. statusTXT - 请求返回的状态

3. xhr - XMLHttpRequest 对象

loadText请求后台代码：

@RequestMapping(value = “/loadText”)

public String loadText(String data) {

System.out.println(“前台传递的参数” + data);

return “loadText”;

}

返回的为loadText页面，代码如下(只需要body中的内容也可以)：

这是load过去的页面

初始页面效果（初始页面就一个按钮）：

点击按钮后效果（点击按钮后，请求的到的内容将显示在div中）：

浏览器控制台输出（请求结束后，回调方法的参数）

编辑器控制台输出（后台方法接收到的参数输出）

2、$.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

GET 基本上用于从服务器获得（取回）数据。GET 方法可能返回缓存数据。

使用语法

$.get(URL, callback);

【注意】

URL 必填项，请求加载的URL地址。

callback 选填项，$.get()方法执行完后回调方法。

使用实例

这里偷个懒 O(∩_∩)O哈哈~，页面代码还是用上面的load方法的，把点击按钮的方法改成$.get()方法了。代码如下：

【注】 $.get()方法只能获取到请求后台返回的数据，不能直接显示在页面上，如果需要显示在页面上还是使用load方法吧（不嫌麻烦可以在回调函数中用JS处理）。其中loadText为请求地址，必填项，第二回调方法，选填。

回调方法中的参数：

1. data为请求返回的数据

2. status为请求状态

请求的后台代码和上面load方法的一样，点击按钮后，浏览器控制台输出如下：

3、$.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

使用语法

$.post(URL, data, callback);

【注意】

URL 必填项，请求加载的URL地址。

data 选填项，参数，请求时需要携带的参数，格式键 / 值对集合。

callback 选填项，$.post()方法执行完后回调方法。

使用实例

这里页面只改了点击按钮的方法，发送请求方法改成$.post()方法了。代码如下：

不难发现， $.post()方法在参数上和load()方法一样，但回调方法的参数又和 $.get()方法一样，这里就不用在解释了吧！直接来看一下效果吧（左边为浏览器控制台输出，右边为编辑器控制台输出）。

4、ajax() 方法

ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。上面的 $.post()和 $.get()方法底层都是ajax()方法。大多数情况直接使用 $.post()和 $.get()方法简单一些，如果需要操作不常用的选项，使用ajax()方法更灵活，属性设置多一些。

【注】 这里说一下 $.get()和 $.post()方法除了参数外的区别， $.get()方法请求携带的参数一般只能拼接在请求地址后面，安全性不是很高。 $.post()方法请求携带的参数不会显示在地址后面，所以安全性要高一点，一般推荐使用 post方法。

ajax()的简单使用案例

这里页面只改了点击按钮的方法，发送请求方法改成$.ajax()方法了。代码如下：

其中请求地址还是上面的请求地址，使用对应的后台方法也就一样了。其中属性这里只设置了部分，下方有ajax方法的全部属性，可以根据项目需求自行添加。下面是控制台输出的效果（左边为浏览器控制台输出，右边为编辑器控制台输出）。

5、页面全部代码

因为写的案例，偷了个懒O(∩_∩)O哈哈~，每次都只改了按钮点击事件的方法，这里我把页面的全部代码贴出来，大家容易看一些。

AJAX load方法

6、ajax的常用属性

1、url

类型：String

默认值: 当前页地址。发送请求的地址。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
8年进入阿里一直到现在。**

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-rDx5dzG2-1715234598370)]

[外链图片转存中…(img-AkElBfrI-1715234598371)]

[外链图片转存中…(img-t5kcymV2-1715234598371)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！