JavaWeb学习day08(Ajax&JQuery)

最新推荐文章于 2024-04-23 15:19:32 发布

如我所愿c

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量173

点赞数

分类专栏：学习日志—杂文章标签： JavaWeb

本文链接：https://blog.csdn.net/weixin_42135811/article/details/103215563

版权

学习日志—杂专栏收录该内容

71 篇文章 1 订阅

订阅专栏

Ajax & Jquery

Ajax

是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML）

并不是新的技术，只是把原有的技术，整合到一起而已。

	   1.使用CSS和XHTML来表示。
	   2. 使用DOM模型来交互和动态显示。
	   3.使用XMLHttpRequest来和服务器进行异步通信。
	   4.使用javascript来绑定和调用。

有什么用?

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

诚如我们前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。

那么现在举个例子，以判断用户名是否已被注册为例。

传统方式：

1. 输入用户名，

2. 点击一个按钮，校验。

3. 把数据提交给服务器

4. 服务器在后台帮助我们完成校验，并且反馈信息。

5. 我们在浏览器上提示用户，给出结果

Ajax方式：

ajax方式与前面的方式其实从要做的事情来说，是一样的。
ajax也没有用到，不用去访问服务器就知道你的用户名是否已被占用。
那么它是如何工作的呢?

1.  通过JS 获取咱们的输入框文本内容 document.getElementById("username").value

2. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。

3. 请求结束后，收到结果， 再使用 js 去完成提示。 

4. 可以在顺便配合 css 样式来增加提示效果。

数据请求 Get

1.创建对象

		function  ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
	
			return xmlHttp;
		 }

发送请求

	//执行get请求
function get() {
	
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	
	//2. 发送请求。
	// http://localhost:8080/day16/demo01.jsp
	//http://localhost:8080/day16/DemoServlet01
	
	/*	
		参数一： 请求类型  GET or  POST
		参数二： 请求的路径
		参数三： 是否异步， true  or false
	*/
	request.open("GET" ,"/day16/DemoServlet01" ,true );
	request.send();
}

如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
function get() {
	
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
	
	//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
	request.onreadystatechange = function(){
		
		//前半段表示 已经能够正常处理。  再判断状态码是否是200
		if(request.readyState == 4 && request.status == 200){
			//弹出响应的信息
			alert(request.responseText);
		}
	}
	request.send();
}

数据请求 Post

<script type="text/javascript">

	//1. 创建对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }
	
	function post() {
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open( "POST", "/day16/DemoServlet01", true );
	
		//如果不带数据，写这行就可以了
		//request.send();
		
		//如果想带数据，就写下面的两行
		
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send("name=aobama&age=19");
	}
</script>

需要获取数据

function post() {
	//1. 创建对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open( "POST", "/day16/DemoServlet01", true );
	
	//想获取服务器传送过来的数据， 加一个状态的监听。 
	request.onreadystatechange=function(){
		if(request.readyState==4 && request.status == 200){
			
			alert("post："+request.responseText);
		}
	}
	
	//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	//带数据过去  ， 在send方法里面写表单数据。 
	request.send("name=aobama&age=19");
}

校验用户名是否可用

1. 搭建环境

页面准备

   	<body>
   	<table border="1" width="500">
   		<tr>
   			<td>用户名:</td>
   			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
   		</tr>
   		<tr>
   			<td>密码</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>邮箱</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>简介</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td colspan="2"><input type="submit" value="注册"></td>
   		</tr>
   	</table>
   </body>

数据库准备

2. Servlet代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	try {
		
		request.setCharacterEncoding("UTF-8");
		
		//1. 检测是否存在
		String name = request.getParameter("name");
		System.out.println("name="+name);
		
		UserDao dao = new UserDaomImpl();
		boolean isExist = dao.checkUserName(name);
		
		//2.  通知页面，到底有还是没有。
		if(isExist){
			response.getWriter().println(1);  //存在用户名
		}else{
			response.getWriter().println(2); //不存在该用户名
		}
		
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

3. Dao代码

public class UserDaomImpl implements UserDao{

	@Override
	public boolean checkUserName(String username) throws SQLException {
		QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
		
		String sql = "select count(*) from t_user where username =?";


		runner.query(sql, new  ScalarHandler(), username);

		Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
		return result > 0 ;
	}		
}

jsp页面显示

function checkUserName() {

	//获取输入框的值 document 整个网页
	var name = document.getElementById("name").value; // value  value() val val()
	//1. 创建对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open("POST"  ,"/day16/CheckUserNameServlet" , true );
	
	//注册状态改变监听，获取服务器传送过来的数据
	request.onreadystatechange = function(){
		
		if(request.readyState == 4 && request.status == 200){
			//alert(request.responseText);
			var data = request.responseText;
			if(data == 1){
				//alert("用户名已存在");
				document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
			}else{
				document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
				//alert("用户名未存在");
			}
		}
		
	}
	
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send("name="+name);
}

JQuery

是什么?

javascript 的代码框架。

有什么用?

简化代码，提高效率。

核心

write less do more , 写得更少，做的更多。

load

<a href="" onclick="load()">使用JQuery执行load方法</a>

有两次刷新，先走 onClick的方法，取到数据回来之后，赋值显示。接着走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。

//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
		//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	});

Get

$.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

赋值显示

val(“aa”);

只能放那些标签带有value属性

html(“aa”); —写html代码
text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

load & get

load

$("#元素id").load(url地址);

$("#div1").load(serlvet); —> 使用的get请求，回来赋值的时候，使用text（）;去赋值

get

语法格式： $.get(URL,callback);

  使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
  	$("#div01").text(data);
  });

post

语法格式：$.post(URL,data,callback);

function post() {
	$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
		//想要放数据到div里面去。 --- 找到div
		$("#div01").html(data);
	});
}

使用JQuery去实现校验用户名

function checkUserName() {
	//1. 获取输入框的内容
	var name = $("#name").val();
	
	//2. 发送请求
	$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
		//alert(data);
		if(data == 1){//用户名存在
			//alert("用户名存在");
			$("#span01").html("<font color='red'>用户名已被注册</font>");
		}else{
			//alert("用户名可用");
			$("#span01").html("<font color='green'>用户名可以使用</font>");
		}
	} );
	//3. 输出响应的数据到页面上。
}

实现百度搜索提示

搭建环境

定义首页

<body>
<center>
<h2>黑马</h2>
	<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
	<input type="button" value="黑马一下"  style="height: 55px ; width: 100px ; ">
	
	<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
</center>
</body>

定义数据库

捕获键盘弹起

$(function(){
	$("#word").keyup(function() {
		alert("键盘弹起了..");
	})
});

JS请求

$(function(){
	$("#word").keyup(function() {
		//2。 获取输入框的值 
		//var word = $("#word").val();
		//this  对应就是执行这个方法的那个对象， $("#word")
		var word = $(this).val();

		if(word == ""){
			$("#div01").hide();
		}else{
			//3. 请求数据。
			$.post("find",{word:word} ,function(data , status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
			});
		}			
	})
});

Servlet代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	request.setCharacterEncoding("utf-8");
	try {
		//1. 先获取参数
		String word = request.getParameter("word");
		System.out.println("word="+word);
		
		//2. 让dao执行查询
		WordsDao dao = new WordsDaoImpl();
		List<WordBean> list = dao.findWords(word);
		
		for (WordBean wordBean : list) {
			System.out.println("==="+wordBean.toString());
		}
		
		request.setAttribute("list", list);
		
		//3. 返回数据
		response.setContentType("text/html;charset=utf-8");
		//response.getWriter().write("数据是：");
		request.getRequestDispatcher("list.jsp").forward(request, response);
	} catch (SQLException e) {
		e.printStackTrace();
	}		
}

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<table style="width: 100%">
	<c:forEach items="${list }" var="wordBean">
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>

使用JQuery实现省市联动

环境准备

准备数据库
准备页面

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/city.js"></script>
	</head>
	<body>
	省份: <select name="province" id ="province">
			<option value="" >-请选择 -
			<option value="1" >广东
			<option value="2" >湖南
			<option value="3" >湖北
			<option value="4" >四川
		</select>
	城市: 
		<select name="city" id="city">
			<option value="" >-请选择 -
		</select>
	</body>

XStream的使用

//3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml
	XStream xStream = new XStream();
	
	//想把id做成属性
	xStream.useAttributeFor(CityBean.class, "id");
	
	//设置别名
	xStream.alias("city", CityBean.class);
	
	//转化一个对象成xml字符串
	String xml = xStream.toXML(list);

JS代码

	$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();
		
		/*<list>
			<city>
				<id>1<id>
				<pid>1</pid>
				<cname>深圳</cname>
			</city>
			<city >
				<id>2<id>
				<pid>1</pid>
				<cname>东莞</cname>
			</city>
		</list>*/
		
		$.post( "CityServlet",{pid:pid} ,function(data,status){
			//alert("回来数据了:"+data);
			
			//先清空以前的值：
			$("#city").html("<option value='' >-请选择-")
			//遍历： 
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法
			$(data).find("city").each(function() {
				
				//遍历出来的每一个city，取它的孩子。 id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		} );
		
	});
});

服务器和客户端数据传输的方式

<list>
		<city>
			<id>1<id>
			<pid>1</pid>
			<cname>深圳</cname>
		</city>
		<city >
			<id>2<id>
			<pid>1</pid>
			<cname>东莞</cname>
		</city>
	</list>

json

阅读性更好、容量更小。

{"name":"aaa" , "age":19}

把javaBean 转化成 json数据

	    //3. 把list ---> json数据
		//JSONArray ---> 变成数组 ， 集合  []
		//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
		
		JSONArray jsonArray = JSONArray.fromObject(list);
		String json = jsonArray.toString();

使用json格式数据显示省市联动效果

serlvet代码：

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	try {
		//1. 获取参数
		int pid = Integer.parseInt(request.getParameter("pid"));
		
		//2 找出所有的城市
		CityDao dao = new CityDaoImpl();
		List<CityBean> list = dao.findCity(pid);
		
		//3. 把list ---> json数据
		//JSONArray ---> 变成数组 ， 集合  []
		//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
		
		JSONArray jsonArray = JSONArray.fromObject(list);
		String json = jsonArray.toString();

		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write(json);

	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	};
}

js代码

$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();
		
		/*[
		    {
		        "cname": "深圳",
		        "id": 1,
		        "pid": 1
		    },
		    {
		        "cname": "东莞",
		        "id": 2,
		        "pid": 1
		    }
		    ...
		]*/
		$.post( "CityServlet02",{pid:pid} ,function(data,status){
			
			//先清空
			$("#city").html("<option value='' >-请选择-");
			//再遍历，追加
			$(data).each(function(index , c) {
				$("#city").append("<option value='"+c.id+"' >"+c.cname)
			});
		},"json" );				
	});
});

总结

Ajax

发送get请求

发送post请求

都要求带数据 + 获取数据＋　放置到元素上。

JQuery

发送get请求

发送post请求

都要求带数据 + 获取数据＋　放置到元素上。

---------------------------------------

1. 服务器返回xml数据

2. 服务器返回json数据

如我所愿c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习day08(Ajax&JQuery)

Ajax & JqueryAjax是什么?“Asynchronous Javascript And XML”（异步JavaScript和XML）并不是新的技术，只是把原有的技术，整合到一起而已。 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使...
复制链接

扫一扫