最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 使用Ajax异步加载网页-Ajax入门

    正文概述 掘金(阳宁Coder)   2021-01-31   494

    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项目。

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

    使用Ajax异步加载网页-Ajax入门

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

    一点扩展

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

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

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

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

    唠唠嗑

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

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

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

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

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

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

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

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

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

    所以我又抱起了键盘。

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

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

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

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


    起源地 » 使用Ajax异步加载网页-Ajax入门

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元