案例一：使用AJAX完成用户名的异步校验
一，需求分析
我们有一个网站，网站中都有注册的页面，当我们在注册的页面中输入用户名的时候，这个时候会提示，用户名是否存在。
二，技术分析
1. AJAX的概述
1.1 什么是AJAX
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
-
异步的请求
1.2什么是异步
-
同步
-
异步
1.3为什么要学习AJAX
提升用户的体验。异步
将部分的代码，写到客户端浏览器。
实现页面局部刷新。
2. js的Ajax入门(了解)
2.1步骤
第一步：创建异步请求对象。
第二步：打开连接。
第三步：发送请求。
第四步：设置监听对象改变所触发的函数,处理结果
2.2 GET请求方式的入门
<script>
function AjaxDemo() {
//1.创建xmlHttpRequest对象
var xmlHttp = null;
if (window.XMLHttpRequest) {// all modern browsers
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// for IE5, IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.打开连接
xmlHttp.open("GET","${pageContext.request.contextPath}/demo02?username=zs&password=123456");
//3.发送请求
xmlHttp.send();
//4.设置对象状态发生改变所触发的函数
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var result = xmlHttp.responseText;
alert(result);
}
};
}
</script>2.3 POST请求方式的入门
<script>
function AjaxDemo() {
//1.创建xmlHttpRequest对象
var xmlHttp = null;
if (window.XMLHttpRequest) {// all modern browsers
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// for IE5, IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.打开连接
xmlHttp.open("POST", "${pageContext.request.contextPath}/demo03");
//设置请求参数的mime类型
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
//3.发送请求
xmlHttp.send("username=zs&password=123456");
//4.设置状态发生改变触发的函数,处理结果
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var result = xmlHttp.responseText;
alert(result);
}
};
}
</script>
3.JS的Ajax
3.1异步请求的对象XMLHttpRequest
不同的浏览器对该对象的创建的方式不一样，MSIE浏览器，比较早的浏览器，创建这个对象的时候将这个对象封装到ActiveXObject的插件中。像火狐或者谷歌浏览器则直接new出来。
function createXmlHttp(){
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;
}3.2 XMLHttpRequest 的对象的API
3.2.1方法
open() ：打开连接。传递三个参数。第一个是请求方式(GET/POST)，第二个是请求路径，第三个是否是异步的(默认就是异步)。
send([post请求的参数]): 发送请求。post请求可以传入参数，get请求不用传
setRequestHeader()：解决POST请求参数的问题。 key和值，如果是POST请求需要传参数，则必须需要设置一个Content-Type的请求头
3.2.2属性
onreadystatechange：监听该对象的状态的改变,需要一个函数响应它
readyState：该属性就记录这个对象的状态。咱们只关心"4(完成)",此时可以获取响应
status：状态码 。
responseText: 获得字符串形式的响应数据(响应体)。
responseXML : 获得 XML 形式的响应数据(响应体)
三，思路分析
-
创建页面和数据库
-
给用户名输入框设置失去焦点事件,创建一个CheckUserName()函数响应这个事件
-
在CheckUserName():
获得用户输入的用户名
发送Ajax请求,CheckUserNameServlet
-
创建CheckUserNameServlet
获得请求参数(用户名)
调用业务,根据用户名获得用户 (User 对象)
判断User对象是否为空,给前台不同的响应
四，代码实现
1.环境的准备
-
创建数据库和表
create database day; use day; create table user( id int primary key auto_increment, username varchar(20), password varchar(20), email varchar(50), phone varchar(20) ); insert into user values (null,'aaa','123','[email protected]','15845612356'); insert into user values (null,'bbb','123','[email protected]','15845612356'); insert into user values (null,'ccc','123','[email protected]','15845612356'); -
创建实体类 (JavaBean类)
-
导入jar包
-
引入工具类(C3P0Utils),配置文件(c3p0-config.xml)
-
页面的准备
2.代码实现
案例二:使用JQ完成用户名异步校验
一，需求分析
我们有一个网站，网站中都有注册的页面，当我们在注册的页面中输入用户名的时候，这个时候会提示，用户名是否存在。
二，技术分析
1.JQuery的Ajax
1.1 为什么要使用JQuery的AJAX
因为传统(js里面)的AJAX的开发中，AJAX有两个主要的问题：
浏览器的兼容的问题 , 编写AJAX的代码太麻烦而且很多都是雷同的。
在实际的开发通常使用的Ajax是jQuery的ajax
1.2JQuery的Ajax的API(重点掌握)
-
$.get(路径,[请求参数],[回调函数],[数据类型]); 数据类型：默认是字符串
-
$.post(路径,[请求参数],回调函数,[数据类型]); 数据类型：默认是字符串
-
$.getJSON(url,请求参数, 回调函数) 使用场景:服务器端响应给客户端的数据是json类型的时候
2.入门
get方式
$("#btn1").click(function(){
//发送请求;
$.get(url,[params],[function(result){}])
$.get("${pageContext.request.contextPath }/demo01", {"username":"zs","password":"123456"},function(result){
alert(result);
});
});
post方式
$("#btn2").click(function(){
//发送请求;
$.post(url,[params],[function(result){}])
$.post("${pageContext.request.contextPath }/demo01"，{"username":"zs","password":"123456"}, function(result){
alert(result);
});
});
三,思路分析
-
创建页面和数据库
-
给用户名输入框设置失去焦点事件(jq对象.blur(function(){})),创建一个匿名函数响应这个事件
-
在匿名函数
获得用户输入的用户名
发送Ajax请求,把用户名提交到CheckUserNameServlet
-
创建CheckUserNameServlet,在doGet()方法
获得请求参数(用户名)
调用业务,根据用户名获得用户 User
判断user对象是否为空,给前端页面响应
四，代码实现
案例三：使用JQ的ajax完成仿百度提示的效果(返回json数据)
一，需求分析
实现一个搜索页面，在文本框中输入一个值以后，给出相应的内容提示
二，技术分析
1.什么是JSON(重点)
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
-
可以理解为是一个特殊的字符串格式数据.
2. JSON数据格式
2.1JSON对象
格式:{}
-
里面的值以key:value的形式存在,key是字符串
-
如果有多个中间通过,隔开(最后一个,省略)
-
value可以是任何合法的数据类型
2.2JSON数组
格式[]
3.JSON的生成工具json-lib(掌握)
Gson(谷歌公司开发的) 阿里开发fast json
作用:java对象和json数据进行转换
使用步骤:
1.导入jar包
2.调用API
JSONObject.fromObject(map或者javabean); 把map或者javabean转成JSON对象{key:value}
JSONArray.fromObject(java的数组或者list);把数组/或者list转成JSON数组
三,思路分析
-
创建数据库和页面
-
给输入框设置键盘抬起事件(jq对象.keyup(function(){})),创建匿名函数响应这个事件
-
在匿名函数
获得用户输入的关键词
发送Ajax请求,把关键词提交到WordServlet
拿到结果展示
-
创建WordServlet ,在doGet()方法里面:
获得参数(关键词)
调用业务,根据关键词获得数据 List<Word>
把list转成JSONArray,响应给前台
5.在前台拿到Json字符串，并展示
四，代码实现
1.环境的准备
-
创建数据库
create table words( id int primary key auto_increment, word varchar(50) ); insert into words values (null, '张三'); insert into words values (null, '张三疯'); insert into words values (null, '张无忌'); insert into words values (null, '张学友'); insert into words values (null, '千张皮'); insert into words values (null, '赵四'); insert into words values (null, '赵国强'); insert into words values (null, '中华人民共和国'); insert into words values (null, '李四'); insert into words values (null, '李世民'); insert into words values (null, '小李子'); insert into words values (null, '李维'); insert into words values (null, '李白'); insert into words values (null, '大白菜'); insert into words values (null, '大白'); insert into words values (null, '赵忠祥'); insert into words values (null, '小学妹'); insert into words values (null, '小沈阳'); insert into words values (null, '小泽玛利亚'); insert into words values (null, '玛丽莲梦娜'); insert into words values (null, '马丽'); insert into words values (null, '麦当劳'); insert into words values (null, '麦当娜'); insert into words values (null, '欧阳娜娜'); insert into words values (null, '欧阳锋'); insert into words values (null, '克里斯蒂亚诺'); insert into words values (null, '马德亚诺'); insert into words values (null, '皇家马德里'); insert into words values (null, '德国'); insert into words values (null, '小白菜'); insert into words values (null, '波尔图'); insert into words values (null, '波多野结衣'); insert into words values (null, '波波维奇'); insert into words values (null, '长头发大波浪'); insert into words values (null, '长沙'); insert into words values (null, '厂长的F6'); insert into words values (null, '黑马程序员'); insert into words values (null, '黑猫警长'); insert into words values (null, '黑色毛衣'); insert into words values (null, '黑车司机'); insert into words values (null, '传智播客'); insert into words values (null, '传道授业'); insert into words values (null, '互联网**'); insert into words values (null, '武林外传'); insert into words values (null, '传销组织'); -
创建页面,search.jsp
<%@ 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 type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> function fn1() { //先将div隐藏 $("#divId").hide() //事件触发后的响应，先服务器发送请求将输入框中的值传过去进行查询 //1.获取到输入框中的值 var val = $("#inputId").val() //2.往服务器发送请求，将val带过去,接收响应的json数据 if (val != "" && val != null) { //让div显示 $("#divId").show() //getJSON()方法，用于发送GET请求，获取服务器响应的json数据 $.getJSON("/AjaxDemo/search?keyword="+val,function(data){ //data就是服务器响应的json数据 $("#tb").html("") //拿到json数组之后，遍历数组，将data转换成jQuery对象之后进行遍历 $(data).each(function (index,result) { //遍历出来的每一个对象就叫做result var word = result.word; //每遍历出一条数据，就往table中添加一行！！！ $("#tb").append("<tr><td>"+word+"</td></tr>") }) }) } } </script> </head> <body> <center> <h1>嘿嘿</h1> <input onkeyup="fn1()" id="inputId" type="text" style="width: 500px; height: 38px;" /> <input type="button" style="height: 38px;" value="嘿嘿一下" /> <div id="divId" style="display:none; width: 500px; border: 1px red solid; height: 300px; position: absolute; left: 398px;"> <table width="100%" id="tb"></table> </div> </center> </body> </html> -
创建查询的Servlet
package com.it.web.servlet; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.it.domain.Word; import com.it.service.SearchService; import net.sf.json.JSONArray; /** *负责搜索的Servlet */ public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.接收客户端传过来的参数（关键字） String keyword = request.getParameter("keyword"); keyword = new String(keyword.getBytes("ISO8859-1"), "UTF-8"); //2.调用业务层的方法来根据关键字进行查询 SearchService service = new SearchService(); List<Word> words = service.searchWords(keyword); //3.将结果集合转换成json数组 JSONArray jsonArray = JSONArray.fromObject(words); //将jsonArray对象转换成字符串 String arr = jsonArray.toString(); System.out.println(arr); response.setContentType("text/html;charset=utf-8"); //4.将jsonArray字符串传给客户端 response.getWriter().println(arr); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } - 创建SearchService
package com.it.service;
import java.util.List;
import com.it.dao.WordDao;
import com.it.domain.Word;
public class SearchService {
/**
* 根据关键字查询结果
* @param keyword
* @return
*/
public List<Word> searchWords(String keyword){
//调用dao的代码取数据库查询
WordDao dao = new WordDao();
return dao.searchWords(keyword);
}
}
-
创建SerachDao
package com.it.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.it.domain.Word;
import com.it.utils.C3P0Util;
public class WordDao {
/**
根据关键字去数据库查询结果集合
* @param keyword
* @return
*/
public List<Word> searchWords(String keyword){
QueryRunner runner = new QueryRunner(C3P0Util.getDataSource());
String sql = "select * from words where word like ?";
List<Word> words = new ArrayList<>();
try {
words = runner.query(sql, new BeanListHandler<>(Word.class), "%"+keyword+"%");
} catch (SQLException e) {
e.printStackTrace();
}
return words;
}
}