­

javaWeb核心技术第十三篇之Ajax

  • 2019 年 10 月 5 日
  • 筆記

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zhao1299002788/article/details/100185373 

Js--ajax--原理解释  		概述:异步刷新网页,不会刷新整个页面.    	Get原理:  				<%@ page language="java" contentType="text/html; charset=UTF-8"  			pageEncoding="UTF-8"%>  		<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  		<html>  		<head>  		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  		<title>Insert title here</title>    		<script>  			function sendGetAjax(){  				//下面的代码可以不需要练习  但不可以使用IE  浏览器兼容      				//1.获得ajax引擎  				var xmlHttp = new XMLHttpRequest();    				//2.设置回调函数--作用是 响应回来时 ajax引擎会调用回调函数 将数据返回  				//回调函数将会被执行四次  				xmlHttp.onreadystatechange = function(){  					//判断 readyState 状态必须是4 表示响应结束  					if(xmlHttp.readyState == 4 ){  						//响应结束 不一定就是正确响应  						//判断响应必须是成功 成功状态码是200  						if(xmlHttp.status == 200){  							//接受服务器的值  							var textTemp = xmlHttp.responseText;  							alert(textTemp);  						}    						if(xmlHttp.status == 404){  							alert("yyy");  						}  					}    				}    				//3.打开连接 建立连接  				//参数1:请求方式  				//参数2:请求的路径  				xmlHttp.open("get", "/ee66_day44/DemoServlet?username=jack2&nickname=rose2");    				//4.发送  				//参数表示 请求体  				xmlHttp.send(null);  			}  		</script>    		</head>  		<body>  			<form action="/ee66_day44/DemoServlet" method="post">    				<input type="text" name="username" value="jack"/>  				<input type="text" name="nickname" value="rose"/>  				<input type="submit"/>  			</form>  			<a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a>  		</body>  		</html>    	Post原理:  		跟get方式相似,但需要在3和4中间加一个设置请求头的代码.    	Jquery -- ajax(重点)  		Jquery:底层就是js  特性:兼容浏览器,api都是封装好的.    		Get方式:  						<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  			<html>  			<head>  			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  			<title>Insert title here</title>    			<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>  			<script>  				function sendGetAjax(){  					//1.导入jquery的类库  					//2.jquery的api提供工具类  					/**  					url :请求的路径  					params:请求参数  						格式1:key=value&key=value...  						格式2:{key:value,key:value..}  js对象  					fn : 回调函数 function(data){}  data就是回调函数中服务器响应的数据  					type : text 默认值 表示服务器响应的数据是文本  如果设置的是json 直接将字符串数据转换成对象  					*/  					//$.get(url,params,fn,type);  					//$.get("/ee66_day44/DemoServlet"); //应用场景 服务器统计访问人数  					//$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2");  					//$.get("/ee66_day44/DemoServlet",{"username":"jack3","nickname":"rose3"});  					$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2",function(data){  						alert(data);  					},"text");  				}  			</script>    			</head>  			<body>  				<form action="/ee66_day44/DemoServlet" method="post">    					<input type="text" name="username" value="jack"/>  					<input type="text" name="nickname" value="rose"/>  					<input type="submit"/>  				</form>  				<a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a>  			</body>  			</  			html>    	Post :  		Post提交方式和get方式没有区别,参数一样,写法一样.  		如果涉及乱码get和post处理是不一样,建议post    	案例分析:  		1.失去焦点时发送ajax请求.  		2.编写函数.  		3.发送ajax请求,请求中携带参数.  			参数是username  		4.编写servlet代码.  		5.回调函数中处理响应数据  		if(1 失败) {  			用户名不可用,显示  			可用隐藏  		}else {  			用户名不可用 隐藏  			可用显示  		}  		protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    		//1.获得  		String username = request.getParameter("username");  		//2.处理  		if("jack".equals(username)){  			//失败 返回1  			//3.响应  			response.getWriter().print("1");  		}else{  			//成功 返回0  			//3.响应  			response.getWriter().print("0");  		}      	}    	<script>     	//页面加载   	$(function(){  			//初始化 可用和不可用都需要隐藏  			$("#FailedId").hide();  			$("#SuccessId").hide();  			//绑定事件  			$("#username").blur(function(){  				//获得参数  				var usernameVal = $("#username").val();  				//发送ajax请求  				$.post("${pageContext.request.contextPath}/CheckServlet",{"username":usernameVal},function(data){  					if("1"==data){  						//失败  用户名不可用显示 可用隐藏  						$("#SuccessId").hide();  						$("#FailedId").show();  					}else{  						//成功 用户名不可用隐藏 可用显示  						$("#SuccessId").show();  						$("#FailedId").hide();  					}  				});  			});  		})  	 </script>    	<div class="col-sm-4">  			    	<span class="label label-success" id="SuccessId">用户名可用</span>  					<span class="label label-danger" id="FailedId">用户名不可用</span>  	</div>    	Json(重点):  		Json是一种数据格式,用于通信获得数据传递数据方便.  		Json对象:  			Object:格式 {key:value,key:value....}  使用map,对象,描述  		Json数组:  			Object : 格式[obj,obj,obj...]	使用数组,list集合描述    		数组中可以嵌套对象,对象可以嵌套数组.  	Js--json  				<script>  					//js对象  json 的 和value必须用双引号包括起来  如果是数字 boolean 变量是不需要双引号的  					var obj = {"a":"b","c":"d"};  					//alert(obj.c);    					//var obj = "{'a':'b','c':'d'}";  					//alert(obj.a);  					//字符串 转换 对象  					//1.eval可以将字符串转换成可执行的代码片段  					//2.eval可以将字符串转换成对象  					/* var objTemp =  eval( "(" + obj +")" );  					alert(objTemp.a); */    					var arr = ["a" , "b" , 1 , true , obj];  					alert(arr[4].a);      					var obj2 = {"abc":arr};  				</script>    		案例分析:自动联想功能  			需求:在文本框中输入值,动态的联想数据库中数据填充在下拉框下.  				1.联想时,数据库中所有全部联想(查询所有),js前台的细节.  				2.加上条件联想(根据条件查询)  */  				首页:  					文本框输入内容  					1.文本框添加事件(keydown按下,keypress按住,keyup弹起)  						使用keyup弹起事件  					2.发送ajax,携带参数searchWord  					3.编写servlet  					4.回调函数中获得数据  					将一根div显示,再往框里加数据,    				<script>  					$(function(){  						//1.给文本框绑定事件  						$("#SearchId").keyup(function(){  							//2.获得数据  							var wordVal = $("#SearchId").val();    							if(""==wordVal){  								$("#completeShow").hide();  								return;  							}    							//清空ul  							$("#showUI").html("");      							//3.发送请求  							$.post("${pageContext.request.contextPath}/SearchWordServlet",{"searchWord":wordVal},function(data){  								//4.遍历 往div中添加数据  								$(data).each(function(){  									//this 表示 被遍历的当前对象 当前对象表示product  List<Product>  									$("#showUI").append("<li class='list-group-item'><a href=''>"+this.pname+"("+this.pinyin+")"+"</a></li>");  								});  								//5.将div显示  								$("#completeShow").show();    							},"json");  						});  					})  				</script>    				<div id="completeShow">  			        	<ul class="list-group" id="showUI">  						</ul>  			    </div>    				服务器:servlet  					1.获得  					获得searchWord  					2.处理  					service.findByWord(searchWord)  					返回值List<类名>    					3.响应  					使用json-lib,将集合转换成json字符串    				public class SearchWordServlet extends HttpServlet {  					protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  						try {  							//0.乱码  							request.setCharacterEncoding("utf-8");  							response.setHeader("content-type", "text/html;charset=utf-8");  							//1.获得  							String word = request.getParameter("searchWord");  							//2.处理  							ProductService  service = new ProductService();  							List<Product> list = service.findByWord(word);  							//3.响应  							String json = JSONArray.fromObject(list).toString();  							response.getWriter().print(json);  						} catch (Exception e) {  							e.printStackTrace();  						}  					}  				public List<Product> findByWord(String word) throws SQLException {  					QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());    					String sql =" SELECT * FROM product WHERE pname LIKE ? OR pinyin LIKE ? ";  					Object [] params = {  							"%"+word+"%","%"+word+"%"  					};  					return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);  				}

VirMach 便宜 VPS

QNews

QNews