使用Ajax异步加载网页——一文入门JQuery的Ajax

最新推荐文章于 2024-04-23 00:29:43 发布

阳寜

最新推荐文章于 2024-04-23 00:29:43 发布

阅读量807

点赞数

分类专栏：前端HTML+CSS 文章标签： ajax js html

本文链接：https://blog.csdn.net/weixin_45634606/article/details/113448171

版权

前端HTML+CSS 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

Ajax

Ajax(Asynchronous Javascript And XML)，百度百科写道：异步JavaScript和XML，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的内容。

重点就是：无需重新加载整个网页就能够更新部分网页的内容。

大家都知道：我们的网页是浏览器发送给服务器一个请求，然后将服务器返回的数据渲染而成的。而我们知道有些网页的内容是很多的，重新发送请求然后渲染响应的数据是很耗费时间和成本的，很多时候我们只需要查看网页中的部分内容而不是访问一个新的网页，亦或者我们需要一些数据能够非常时效性的刷新。比如我需要使用邮箱注册一个网站，我需要快速知道我输入的邮箱有没有被注册过，而不是等提交数据之后才知道，只需要在我输入邮箱之后来个小提示即可，这个时候Ajax就会很有用。

如何使用Ajax

基础的Ajax是由XMLHttpRequest(XHR)来实现的，就像就像一个Web项目的基础是Servlet一样。但我们可以使用JQuery来更方便的实现Ajax。JQuery是一个JS的库，里面封装很多的函数之类，本篇文章主要讲如何使用它实现Ajax。

实现方法

JQuery提供了很多与Ajax相关的方法，如Get、Post等提交方式。而$.ajax()是所有方法的核心。

其中有个$符号，这个东西你可以理解为一个函数或JQuery的别称，用它可以来操作其它元素。它是JQuery中一个很重要的存在。最常用的方法是用它来当作选择器，可以很方便的选中DOM元素。

是的，使用JQuery你就得下载JQuery文件，然后将其引入Html文件中进行使用。

最好直接去JQuery官网下载，直接百度JQuery官网即可，下载之后是一个.min.js的文件，引入只需要一段代码：

<script src"文件路径"></script>

然后就可以用了。

本人的话最近做一个小小项目，用的LayUI框架，就直接用的它自带的JQuery。

LayUI插曲

因为现在文章还是主要让我自己复习来用，所以插一下我自己使用时候的记录，方便以后复习，当然大家都可以看一下。

使用LayUI的话根据官方文档建议模块化导入js文件，也就是说用什么导什么，鉴于我是个后端且暂不打算仔细学习LayUI，就直接省事导了layui.all.js了。

实现Ajax基本跟JQuery一样，就是需要先创建layUI自带的JQuery对象，方法如下：

<script src="路径/layui.all.js"></script>
<script>
	var $ = layui.jquery;
</script>

如此之后就可以正常使用了。

$.ajax()

这个方法呢就是这样使用的，括号里面直接加上参数即可。而关于它的参数呢，有很多很多，具体可以参考官方文档：https://learn.jquery.com/ajax/jquery-ajax-methods/。

而我们平常使用的话只需要用两三个，其它的参数就相当于配置一样，你不配也会有默认配置。等需要的时候再去了解即可。

<script src="/layui/layui.all.js"></script>
<script>
    var $ = layui.jquery;
    function test() {
        //ajax验证邮箱是否已经注册
        $.ajax({
            url:"/ajax/registerTest",
            data:{"emailaddr":document.getElementById("emailaddr").value},
            success:function (resp) {
                if (resp === "OK") {
                    document.getElementById("label").innerText = "该邮箱可以注册";
                }else {
                    document.getElementById("label").innerText = "该邮箱已被注册";
                }
            }
        });
    }
</script>

如上是我的一个JS代码，作用就是在用户注册网站时在输入邮箱之后判断该邮箱是否被注册过。

简单讲一下代码的逻辑。我的项目是一个SpringBoot项目。

首先导入js文件声明变量$，然后是一个函数test，这个函数是在邮箱的input输入框中，当该输入框失去焦点的时候自动触发。

函数中就直接封装的ajax的操作。大括号中加上ajax的参数，

首先url，我的这个url是一个测试邮箱的Controller，也就是说当函数触发的时候发送请求的地址就是它。

然后是data，它是发送请求携带的参数值，既然测试邮箱当然要知道你输入的邮箱是多少。通过DOM得到该元素的值并附带上发送。

然后是success，它是该请求成功执行之后的回调函数，也就是说当请求成功执行之后会执行它，携带了参数resp。也就是请求成功后返回的数据。我的Controller返回的就是一个Json的字符串。

如下预览(实际提示很清楚，做出gif变成了我不认识的样子)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JzqhKZKX-1612018365094)(D:\文章素材处理\ajax预览.gif)]

可以看到，一个简单的Ajax请求就搞定了。

一点扩展

关于参数，这里只用到了三个，前文说到它有很多参数，如：

method	请求方式，GET、POST
headers	请求头
timeout	设置请求超时时间
error	请求失败的回调函数
dataType	将服务器返回的数据转换为指定类型

这也只是一部分，更详细的可以参考官方文档。

另外就是ajax大量的参数让其变得稍微有些臃肿，而JQuery实际上有更简单直接的$.get、$.post方法。也就是直接发送对应的请求，参数更少和精准。另外还有一些其它的方法函数，本文只简单的介绍ajax方法，其它内容有兴趣的读者可以自行学习。

唠唠嗑

这部分内容纯属闲谈，没兴趣的读者直接跳过即可。

我隔了好长时间没写文章了。怎么又开始了？

实际上这是因为前两天突然的一件小事导致的。

之前那段日子说在学习也不假，只不过学的很少而已哈哈哈。因为写博客真的太浪费时间，打着多利用时间学习的幌子放下了写文章而已。

但因为最近自己要做项目，把SSM、SpringBoot都过了一遍，虽然学的时候也会跟着做一下但毕竟不是真刀实枪干活，学过的东西太容易忘了！

比如MyBatis差不多一个多月前学的，现在的话基本就能记住个简单的Mapper怎么用什么的，像缓存作用使用等不看的话也忘得差不多了。这个时候我才突然认识到了：写文章记录的重要性。

我自己写的文章肯定我自己看的最多。之前写的文章经常看导致知识记得才牢，即使忘了还可以再翻开文章看一看就能立马回想起来。

但不写文章之后去哪看？无非就是当初在哪学去哪看，为了一个知识点还得扒以往的视频等等。看完还不一定记住，还需要经常扒拉。那才效率低。

还不如自己记录成文章。用自己容易理解的方式写下来，无论什么时候去复习，它都在那儿。或许这就是各个老师总是强调记笔记的原因吧。

所以我又抱起了键盘。

这样的话文章又会继续更新啦，虽然频率不是很固定，但肯定不会低。

还有就是因为不写文章了，导致我有一种不知道怎么形容的感觉，我看文章也变得特别少了。因为看的时候会给我一种感觉，别人都在写、坚持。而我不写了，会让我很自惭形秽，就不好意思看别人的文章。。。哈哈哈很搞笑

不过我看我知乎、CSDN、公号竟然还有读者再关注我，就是为了读者，我也实在不好意思自己放弃自己了。

另外的话，之后文章的方向，短期的话主要以Spring、计算机基础为主。以记录特定的主要知识点为主。比如最近项目又用到某个知识，会记录一下使用方法原理等等。还有就是数据机构、操作系统那块。前两天还想写AVL树来着，然后写点各种结构的原理，无奈那块确实又难又不好总结，莫得办法，要写出来肯定要先学好。

最后，如果觉得本文对你有所帮助的话，不妨点个关注点个赞，加油~