1.引入
传统网站中存在的问题
-
网速慢的情况下,页面加载时间长,用户只能等待
-
表单提交后,如果一项内容不合格,需要重新填写所有表单内容
-
页面跳转,重新加载页面,造成资源浪费,增加用户等待时间。
2.Ajax介绍
传统项目前后端不分离,用户触发一个http请求服务器,然后服务器接收之后,在做出响应到用户,并且返回一个新的页面,也就是说交互都是通过页面刷新或页面跳转来实现。 这样的方式对于用户体验来将其实并不友好,少量的数据更新也会引发整个页面重新请求,浪费了很大一部分资源。 因此,我们希望有一种更好的方式,可以不用重新请求整个页面而达到更新部分数据的效果。 2005年,AJAX(Asynchronous Javascript And XML)横空出世,给前端行业带来了巨大的变化与革新。
2.1 概述
Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML
Ajax实际上是下面这几种技术的融合:
(1)XHTML和CSS的基于标准的表示技术
(2)DOM进行动态显示和交互
(3)XML和XSLT进行数据交换和处理
(4)XMLHttpRequest进行异步数据检索
(5)Javascript将以上技术融合在一起
是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。
2.2 为什么需要使用AJAX技术?
在我们之前的开发,每当用户向服务器发送请求,哪怕只是需要更新一点点的局部内容,服务器都会将整个页面进行刷新。
性能会有所降低(一点内容,刷新整个页面!)
用户的操作页面会中断(整个页面被刷新了)
Ajax就是能够做到局部刷新!
2.3 特点
优点 (1)不需要插件支持(一般浏览器且默认开启JavaScript即可) (2)用户体验极佳(不刷新页面即可获取可更新的数据) (3)提升WEB程序的性能(在传递数据方面做到按需发送,不必整体提交) (4)减轻服务器和带宽的负担(将服务器的一些操作转移到移动客户端) 缺点 (1)前进、后退的功能被破坏(因为AJAX永远在当前页,不会记录前后页面) (2)搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解JS引起变化数据的内容) (3)不同版本的浏览器对XMLHttpRequest对象支持度不足(比如IE5之前)
2.4 应用场景
-
页面上拉加载更多数据
-
列表数据无刷新分页
-
表单项离开焦点数据验证
-
搜索框提示文字下拉列表
2.5 运行原理
Ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
3.jQuery的AJAX
原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
jquery帮咱们封装好了一个方法 ajax,我们直接调用jquery的方法,就可以发送ajax的请求
后期,前后端分离了,还可以继续使用jquery的ajax, axios更主流一些
因为学习的是jQuery中Ajax方法,所以所说的结构即是$.ajax()的结构。 $.ajax()方法中的参数很多,我在实例中使用的只是一小部分,这里只介绍实例中所需要的参数的使用,其余更多参数还将继续学习。
$.ajax({ url:"发送请求(提交或读取数据)的地址", dataType:"预期服务器返回数据的类型", type:"请求方式", async:"true/false", data:{发送到/读取后台(服务器)的数据}, success:function(data){请求成功时执行}, error:function(){请求失败时执行} });
<1> url 默认为当前页地址 <2> dataType 可用类型: (如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递) xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息。 script:返回纯文本JavaScript代码。 json:返回json数据。 jsonp:(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 text:返回纯文本字符串。 说明:对于json和jsonp的区别,本小白暂时没有深入了解,目前只知道jsonp可以跨域读取数据,有待进一步学习~ <3> type 可用类型主要为post和get两种(默认为get) get:从指定的资源请求数据(从服务器读取数据) post:向指定的资源提交要被处理的数据(向服务器提交数据) <4> async 异步方式,默认为true,即异步方式。当设置为false时,为同步方式。 异步方式:ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发ajax里的success方法,这时候执行的是两个线程。 同步方式:在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 说明:这里的同步和异步有待深入理解,以下实例均使用默认的异步方式 <5> data 请求的数据,{ }中可以填入多项数据。如果不填(一般为get请求),则读取对应地址的全部数据,此时可以在console中通过console.log(res)显示数据情况。 <6> success 和 error 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。
post方式 格式
$.post(url, [data], [callback], [type]); 参数1:url,请求路径 参数2:data,请求参数 参数3:callback,回调函数 参数4:type,返回内容格式,默认的是text,xml, html, script, json, text, _default。
get方式 格式
$.get(url, [data], [callback], [type]); 第一个参数:请求的路径 如: ${pageContext.request.contextPath}/Servlet1 第二个参数:请求的参数 格式:// JSON数据格式 {key1:value1,key2:value2} 第三个参数:回调函数 格式: function(data){ alert(data); } 第四个参数:返回内容 格式:xml, html, script, json, text, _default。 服务器响应编码为:application/json;charset=UTF-8,回调函数data类型是json对象 服务器响应编码为:text/html;charset=UTF-8,回调函数data类型是字符串。 $.get() 以get请求方式发送ajax除了请求方式不同,使用方式与$.post()完全一致。 .get()和.get()和.post()两种方式书写格式一模一样,只需要修改.get()为.get()为.post(),其余地方不需要改动! 它们的请求方式不同$.get()为get请求,$.post()为post请求。这两种请求方式在处理编码方式上不一样,建议优先使用$.post()请求方式。