首页 前端知识 JQuery中异步处理ajax的封装和应用

JQuery中异步处理ajax的封装和应用

2024-06-14 09:06:06 前端知识 前端哥 866 365 我要收藏

一、Ajax异步加载技术

1、什么是Ajax :

概念: Asynchronous JavaScript and XML 的缩写。
Ajax 不是具体的一个操作对象,而是一种技术的描述。 是一种在 XML,HTML,CSS 和 JavaScript 的帮助下创建更好, 更快和更具交互式 Web 应用程序的新技术。

	(1)、ajax的由来,
			因为我们html网页加载是整体加载的,每次我们页面上要有一些变动的时候
			都需要把整个页面重新加载一遍,非常耗费资源。
			如果我们想要让页面上的某一个小模块,数据发生变化。 用html做局部的加载是做不到的。
			这就需要我们用到今天学习的技术,Ajax 异步加载技术。
			
	(2)、ajax技术,是实现页面局部刷新的技术,		
			好处:效率更高更节省资源,提升用户体验。
			
	(3)、ajax技术的实现,依靠的是什么?
			使用支持异步加载的请求对象,有两个可用请求对象。
				XMLHttpRequest	IE6以上的浏览器,及其他浏览器
				ActiveXObject	IE6之前版本的浏览器。

2、ajax 可以做什么?

页面局部数据的刷新,例如表单的校验。 之前我们是表单提交,才可以校验。

			现在我们有了Ajax 技术,可以在用户填写数据的时候,就进行校验。
			在后台,根据用户填写数据时候触发的 输入框焦点变化的事件 
			就可以,根据触发事件使用ajax 技术,向服务器发送请求,校验数据了。

3、使用ajax 技术,具体怎么做

	具体案例分析:校验html页面中,用户名输入是否合法,是否可以使用。

		=1= 做一个html页面,table 表格里面有一个输入框,用于输入用户名。
		=2= 我们可以通过 该输入框的onblur 失去焦点事件,判断用户已经输入完内容了
		=3= 在javaScript代码中,然后使用ajax技术,在不刷新整体页面的情况下,请求servlet,
		=4= 通过servlet校验该 用户名,是否可以使用。
		=5= 根据servlet服务器返回结果,在html页面进行逻辑提示

	
	(1)、html页面中的,表单代码。
		(注意输入框,写onblur属性,通过avlidate来实现失去焦点事件具体执行代码要做的操作。)
		
			<form action="" name="form1">
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" id="name" name="name" onblur="avlidate();" > &nbsp; <font color="#ff0000">*</font></td>
						<td><div id="nameDiv" style="display: inline;" ></div></td>
					</tr>
				</table>
			</form>

	(2)、html页面中,引入JQuery 的js包。
	
			<head>
				<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
			</head>


	(3)、在body标签中,写js代码。		
		

		 <script type="text/javascript">							
				function avlidate(){
					var name = $("#name").val();
					if(name == null || name == ""){
						$("#nameDiv").html("名字不能为空!");
					}else{										
						//ajax 具体代码实现,异步访问servlet,服务器校验数据合法性
					}
				}							
			</script>	

4、ajax 实现的步骤,及具体代码

=1= 创建异步——>请求对象
=2= 创建要访问数据库具体servlet地址的 url
=3= 设置请求对象的请求方式 和请求地址
=4= 根据请求状态的改变,调用callback函数。
=5= 设置请求头信息
=6= 发送请求
=7= callback 回调函数中,处理servlet 返回的结果。

		=1= 获取到ajax异步——>请求对象				
				* 知识点学习:
					异步请求对象的使用需要分两种情况使用不同的对象。
					第一种: IE6以后的版本及市面上其他浏览器使用对象 :XMLHttpRequest
							new XMLHttpRequest()
							
					第二种: IE6以前的版本: 	ActiveXObject
							new  ActiveXObject("Microsoft.XMLHTTP");
			
				* 使用哪一个,可以根据 window.XMLHttpRequest 的值进行判断。
							window.XMLHttpRequest
							值为true的时候说明是IE6之后的浏览器,用:XMLHttpRequest
							值为false的时候说明是IE6之前的浏览器,用:ActiveXObject									
					
				* 具体代码编写:

					var req = createXMLHttpRequest();
					
					function createXMLHttpRequest(){
						if(window.XMLHttpRequest){
							return new XMLHttpRequest();
						}else{
							return new ActiveXObject("Microsoft.XMLHTTP");
						}
					}


		=2= 创建要访问数据库具体servlet地址的 url
				因为用户通过浏览器访问我们部署在服务器的 网站里面的页面,
				servlet 和 用户访问的网页,是在同一个web项目中,所以可以用相对路径。
					比如,给servlet 设置的url-pattern 值为 s2 ,则可以直接访问s2
					
				var url ="s2";	


		=3= 设置请求对象的请求方式 和请求地址
				
				调用请求对象的req.open()方法
					其中访问方式有两种,一种是get方式,一种是post方式。
					第三个参数是默认值,true ,可以省略不写。						
					req.open("POST",url,true);
					req.open("POST",url);


		=4= 根据请求状态的改变,调用callback函数。回调函数进行逻辑处理。
					
					req.onreadystatechange = callback;

		=5= 设置异步请求的,请求头信息(固定写法,知道怎么用就可以,直接复制用)
					req.setRequestHeader("content-Type","application/x-www-form-urlencoded");

		=6= 发送请求,上面是get方式请求,可以把数据拼接,post方式,发送方法-携带数据
					req.send("name="+name);

		=7= callback 回调函数中,处理servlet 返回的结果。
			这里需要两个请求状态的认识:
				第一个 :req.readyState  请求就绪状态码,
							0 准备状态 :XMLHttpRequest对象未完成初始化
							1 发送请求 :XMLHttpRequest对象开始发送请求
							2 完成请求 :XMLHttpRequest对象的请求发送完成
							3 读取响应 :XMLHttpRequest对象开始读取响应
							4 响应完成 :XMLHttpRequest对象读取响应结束
							
				第二个 :req.status  HTTP状态码
						200	服务器正确返回响应
						404	请求的资源不存在
						500	服务器内部错误
						403 没有访问权限
						
						http状态码分类 & 常见的状态码(在课程资料中总结)					
					
				* 设置接收结果形式:
						客户端——>指定服务器以字符串形式返回结果,并接收这个结果
						用请求对象的 req.responseText; 引用来接收。
							
				* 具体代码实现:
				
						function callback(){
							if(req.readyState == 4 && req.status == 200){
								var data = req.responseText; //响应内容,是字符串类型。
								if(data == "true"){
									$("#nameDiv").html("您输入的用户名已存在!");
								}else{
									$("#nameDiv").html("用户名可以使用。");
								}
							}
						}
		
			服务器端代码:
				* dopost方法中内容。·	
					request.setCharacterEncoding("utf-8");
					doGet(request, response);
						
						
				 * doGet方法中的内容。
						//接收用户端发送过来的异步请求,根据情况,来分析用户的请求,返回结果给用户。
						//先要拿到请求的 参数。name 参数通过get 请求的放回,传过来了。
						String name = request.getParameter("name");
						 boolean used = false;
						if(name =="ajax"){
							//提示给客户端,用户名已被占用。
							used = true;
						}else{
							//可以使用。
							used = false;
						}
						
						//给客户端响应回去。used的状态。让客户端自己根据used状态,逻辑处理。
						//设置响应的内容文本格式,和字符编码
						response.setContentType("text/html;charset=utf-8");
						//获取输出打印对象。
						PrintWriter out = response.getWriter();
						//调用print方法,输出used 状态。
						out.print(used); 
						
						//刷新输出流和关闭输出流。
						out.flush();
						out.close();

5.JQuery中 异步处理ajax的封装和应用

java 语言 面向对象的语言——>没有这个对象,我自己封装一个!
方便用户使用,方便我们自己调用。

6. JQuery 是一种什么样的语言?

	它是基于对象的语言
					——> 封装好的对象,拿来给你直接用。
					比如ajax 对象。就是直接封装好的,其实可以直接用。

7.JQuery中的ajax 对象是怎么样的:

	(1)、$.ajax({ajax需要的参数信息  });
	
	
	(2)、jquery中ajax 对象的参数的格式:
			采用的json的格式:键值对形式出现的。
			 值的名称1: "具体的值1" , 值的名称2: "具体的值2" , ……


	(3)、jquery 封装的ajax中,都有那些参数:
			url:"",						访问的服务器地址,具体某个servlet
			type:"get",					使用get 或者post方式进行访问。
			data:"",					访问携带的参数。
			dataType:"text",			携带的参数数据的类型,text,json,xml、
			success:function(result){},	访问成功之后,会回调的函数,在里面可以做逻辑处理。
			error: function(){}			访问失败之后,回调的函数。

8、具体代码的编写:

	(1)、项目创建——webroot根目录下创建:
				创建·js文件夹—— > 把jquer的jar包复制过来。
				创建·ajax文件夹—— > 新建一个jsp页面,起名ajax.jsp
				
	(2)、在jsp页面中编写的代码:
	
		=1= 引入jquery jar 包:
			<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
			
		=2= 在body 标签中,写一个表格,用户名输入框。
			<table>
			  <tr>
				<td>用户名:</td>
				<td><input id="name" name="name" type="text"  onblur="avlidate();"></td>
				<td> &nbsp;<font color="red"> * </font></td>
				<td><div id="nameDiv" style="display: inline;"></div></td>
			  </tr>
			</table>
			注意: 
					输入框和提示的div 都需要有id属性,后续方便找到元素对象进行操作
					输入框 添加失去焦点事件。

		=3= head标签中新建一个script 标签,里面写js代码。
			<script type="text/javascript">
				//当我们的输入框失去焦点的时候,触发的方法。
				function avlidate(){
					//拿到输入框中的内容,判断输入框中的内容,是否合法。
					var name = $("#name").val();
					if(name==null || name== ""){
						$("#nameDiv").html("用户名 不能为空!");
					}else{
						//当输入框中的内容不为空的时候,用ajax 请求服务器 ,判断,该数据是否合法!
						//ajax 来实现。 $.ajax({ });
					
					}
				}
			</script>
			

		=4= 需要创建一个访问的servlet,
			doPost里面写的代码:
				request.setCharacterEncoding("utf-8");
				doGet(request, response);

			doGet 中写的代码:
				//先拿到客户端访问服务器,携带的请求参数信息。
				String name = request.getParameter("name");
				
				boolean used = false;
				if(name.equals("ajax")){
					//用户名被使用了,我给客户端提示 一个值,被占用。
					used = true;
				}else{
					//没被使用的时候,就提示客户端,可以使用。
					used = false;
				}
				
				//用响应对象,把我们是否被使用的used  状态,返回给客户端,让客户端进行处理。
				//设置输出内容文本格式,和编码格式。
				response.setContentType("html/text;charset=utf-8");
				//通过响应对象,获取输出对象,
				PrintWriter out = response.getWriter();
				//通过输出对象的print方法输出used状态值。注意,不能用println方法,因为会使数据准备。
				out.print(used);
				
				//刷新,输出流和关闭输出流
				out.flush();
				out.close();

		=5= JQuery中  Ajax对象异步请求,具体实现代码。
		
				//当输入框中的内容不为空的时候,用ajax 请求服务器 ,判断,该数据是否合法!
				//ajax 来实现。 $.ajax({ });
				$.ajax({
					url:"s1",
					type:"post",
					data:{"name": name},
					dataType:"text",
					success:function(result){
						if(result=="true"){
							$("#nameDiv").html("用户名已被占用!");
						}else{
							$("#nameDiv").html("用户名可以用~");
						}
					},
					error: function(){
						alert("异步请求失败!");
					}
				});
		=6=  注意事项,当我们的web项目 
			如果不是根目录的文件,是访问不到js文件夹下的jquery的jar包的。
			

			页面报错提示:找不到jquery jar包的资源。
				Failed to load resource: the server responded with a status of 404 (Not Found)

			同时用jquery 先择器的地方也会报错:
				 $ is not defined   at avlidate
				 
			解决方法:浏览器的权限不够,如果不是根目录文件,不允许访问上下级的文件夹
			
				具体,需要把ajax 文件夹下的ajax.jsp 复制到webroot根目录下
				浏览器访问,webroot根目录下的ajax.jsp
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12081.html
标签
评论
发布的文章

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!