专栏首页海仔技术驿站javaWeb核心技术第十三篇之Ajax

javaWeb核心技术第十三篇之Ajax

版权声明:本文为博主原创文章,遵循 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);
				}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javaWeb技术第二篇之CSS、事件和案例

    海仔
  • JVM中优化指南

    Java虚拟机有自己完善的硬件架构,如处理器、堆栈、寄存器等,还具有相应的指令系统。JVM屏蔽了与具体操作系统平台相关的信息,使得Java程序只需生成在J...

    海仔
  • 排序算法之冒泡、插入、快排和选择排序

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

    海仔
  • 最新jquery+easyui_api培训文档

    用户1112962
  • 关于表单重复提交问题

    问题引入:当我们在做一个页面数据提交的时候,当我们连续点击提交按钮,因为快速连续点击,因为速度过快,页面还来不及反应,导致页面从复提交。。

    小小许
  • express + jqPaginator 分页展示内容

    其中,limit后面可以跟两个参数,也可以跟一个参数。 跟一个参数表示rows,相当于offset=0,从数据表中的第一条记录开始查询出rows条数据。 跟...

    Theone67
  • ES6 系列之我们来聊聊 Promise

    Promise 的基本使用可以看阮一峰老师的 《ECMAScript 6 入门》。

    夜尽天明
  • node.js学习与应用

    学习资料 入门: 小白篇 http://samsungapps.csdn.net/text.html?arcid=311044 了解了 npm,类似于pytho...

    财主刀刀
  • Angular技巧汇总 原

        声明项目的全局类型,同时不需要在各个Ts文件中import {XXX} from 'xxx'  ,就能直接引用!方法是:

    申君健
  • JavaScript作用域闭包(你不知道的JavaScript)

    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示...

    奋飛

扫码关注云+社区

领取腾讯云代金券