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

一、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复制

	（1）、ajax的由来，
	因为我们html网页加载是整体加载的，每次我们页面上要有一些变动的时候
	都需要把整个页面重新加载一遍，非常耗费资源。
	如果我们想要让页面上的某一个小模块，数据发生变化。用html做局部的加载是做不到的。
	这就需要我们用到今天学习的技术，Ajax 异步加载技术。

	（2）、ajax技术，是实现页面局部刷新的技术，
	好处：效率更高更节省资源，提升用户体验。

	（3）、ajax技术的实现，依靠的是什么？
	使用支持异步加载的请求对象，有两个可用请求对象。
	XMLHttpRequest IE6以上的浏览器，及其他浏览器
	ActiveXObject IE6之前版本的浏览器。

	现在我们有了Ajax 技术，可以在用户填写数据的时候，就进行校验。
	在后台，根据用户填写数据时候触发的输入框焦点变化的事件
	就可以，根据触发事件使用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();" >   <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>

	=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();

	它是基于对象的语言
	——> 封装好的对象，拿来给你直接用。
	比如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(){} 访问失败之后，回调的函数。

	（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>  <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