Ajax & Jquery的使用

蔚落 2022-11-30 12:50 181阅读 0赞

## Ajax & Jquery ##

### Ajax ###

Ajax是什么?

Asynchronous Javascript And XML（异步JavaScript和XML）

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

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

Ajax有什么用?

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

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

#### 1、数据请求 Get ####

（1）创建对象

（2）发送请求

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

（3）如果发送数据请求的同时，还想获取响应的数据

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

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

#### 2、数据请求 Post ####

（1）发送请求数据

（2）获取响应数据

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

#### 例题：Ajax校验用户名是否可用 ####

###### 1、搭建环境 ######

（1）页面准备

（2）数据库准备

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

###### 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 ;
    	}
    
    }

###### 4、jsp页面显示 ######

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

## JQuery ##

是什么？  
javascript 的代码框架。

有什么用？  
简化代码，提高效率。

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

#### 1、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);
    	});

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

#### 2、Get ####

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

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

#### 3、赋值显示 ####

val(“aa”);

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

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

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

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

#### 4、load & get & post ####

*  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);
    		});
    	}

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

#### 5、使用JQuery去实现校验用户名 ####

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

#### 6、实现百度搜索提示 ####

###### （1）搭建环境 ######

定义首页

定义数据库。

捕获键盘弹起

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

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

###### （2）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);
    			});
    		}
    		
    	})
    });

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

###### （3）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();
    	}
    
    }

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

###### （4）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>

#### 7、使用JQuery实现 省市联动 ####

###### （1）环境准备 ######

准备数据库

准备页面

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

###### （2）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);

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

###### （3）JS代码 ######

$(function() { 
    	//1。找到省份的元素
    	$("#province").change(function() { 
    		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
    		//$("#province").varl();
    		var pid = $(this).val();
    		
    		$.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)
    			});
    		} );
    		
    	});
    });

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

###### （4）服务器和客户端数据传输的方式 ######

*  xml

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

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

###### （5）使用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();
    		
    		$.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请求

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

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