AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
AJAX异步请求细分的话可以分为四种:
-
load()方法
-
$.get()方法
-
$.post()方法
-
$.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: “请求携带的参数”}是携带的参数,第三个为请求完成后回调方法。请求地址必填,其他两个可以根据项目需求是否添加。
回调方法中三个参数分别为:
-
responseTxt - 请求返回的内容
-
statusTXT - 请求返回的状态
-
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为请求地址,必填项,第二回调方法,选填。
回调方法中的参数:
-
data为请求返回的数据
-
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开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!