AJAX和JQuery
今日任务
Ø 使用AJAX完成用户名的异步校验
Ø 使用JQuery完成用户名异步校验
Ø 使用JQuery完成商品信息模糊显示
Ø 使用JQuery完成省市联动效果返回JSON
教学导航
教学目标 | 了解AJAX的基本使用 掌握JQuery的AJAX部分的代码 掌握JQuery返回JSON格式数据如何处理 |
教学方法 | 案例驱动法 |
1.1 使用AJAX完成用户名异步校验:
1.1.1 需求:
在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
***** 用户名是否已经存在,需要到后台的数据库进行查询的.
1.1.2 分析:
1.1.2.1 技术分析:
【AJAX的概述】
Ø AJAX的概念:
AJAX使用的是老的技术,新的思想.完成了RIA的应用:Rich Internet Application.
* 传统方式的开发:所有的数据提交到服务器端进行处理.(胖服务器)
* AJAX的方式开发:有一部分的代码写在客户端.
同步:
异步:
Ø AJAX的作用:
完成页面局部刷新而不影响用户的体验.
* 用户名是否已经存在的校验
* 百度信息输入的提示
...
Ø 使用AJAX:
JavaScript和XML
* XMLHttpRequest:
* 属性:
* onreadystatechange:
* readyState:
* status:获得状态码
* responseText:响应的文本
* responseXML:响应的XML
* 方法:
* open(“请求方式”,”请求路径”,”是否异步”);
* send(“提交的参数”);
* setRequestHeader(“头信息”,”头的值”);
开发步骤:
1.获得XMLHttpRequest对象.
* IE将XMLHttpRequest封装到一个ObjectXActive插件中.
* Firefox直接可以创建XMLHttpRequest.
2.设置状态改变触发一个函数.
3.打开一个链接.
4.发送请求.
【AJAX的GET入门】
创建XMLHttpRequest
function createXMLHttpRequest() {
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;
}
AJAX的代码:
function loadData() {
// 1.创建异步XMLHttpRequest对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发一个函数
xhr.onreadystatechange = function(){
// 回调函数.
if(xhr.readyState == 4){// 请求发送完成
if(xhr.status == 200){// 响应也正确
var data = xhr.responseText;
document.getElementById("d1").innerHTML=data;
}
}
}
// 3.打开一个连接:
xhr.open("GET","/WEB15/ServletDemo1",true);
// 4.发送请求
xhr.send(null);
}
【AJAX的POST入门】
function loadData(){
// 1.创建异步对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发的函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML=xhr.responseText;
}
}
}
// 3.打开连接
xhr.open("POST","/WEB15/ServletDemo2",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4.发送数据
xhr.send("name=李四&password=456");
}
1.1.2.2 步骤分析:
Ø 创建一个用户表
Ø 设计一个注册页面:
Ø 在用户名文本框上绑定一个事件:onblur
Ø 在JS的函数中使用AJAX异步向Servlet发送请求.
Ø 在Servlet中接收参数-->调用业务层-->调用DAO
n 查询到了:用户名已经存在
n 没有查询到:用户名可以使用
1.1.3 代码实现:
创建用户表:
CREATE TABLE `user` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(20) DEFAULT NULL,
`password` VARCHAR(20) DEFAULT NULL,
`email` VARCHAR(20) DEFAULT NULL,
`name` VARCHAR(20) DEFAULT NULL,
`sex` VARCHAR(10) DEFAULT NULL,
`birthday` DATE DEFAULT NULL,
`hobby` VARCHAR(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');
设计注册页面:
引入jar包和工具类:
创建包结构:
AJAX异步校验用户名:
function checkUsername(){
// 获得文本框的值:
var username = document.getElementById("username").value;
// 创建对象:
var xhr = createXMLHttpRequest();
// 2.状态改变触发一个函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 获得到响应内容:
var data = xhr.responseText;
if(data == 1){
// 可以使用
document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
document.getElementById("regBut").disabled=false;
}else if(data == 2){
// 已经存在
document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被使用</font>";
document.getElementById("regBut").disabled=true;
}
}
}
}
// 3.打开连接
xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);
// 4.发送数据
xhr.send(null);
}
1.2 使用JQuery完成异步用户名的校验:
1.2.1 需求:
在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
***** 用户名是否已经存在,需要到后台的数据库进行查询的.
1.2.2 分析:
1.2.2.1 技术分析:
【Jquery的AJAX部分的概述】
由于传统AJAX开发代码比较麻烦,而且还有浏览器兼容的问题.传统的AJAX的使用在企业中是很少的.使用AJAX的一些框架完成.
JQuery的AJAX部分的API:
* $(“”).load(url,data,function(){});
* $.get(url,data,function(){},dataType);
* $.post(url,data,function(){},dataType);
* $.ajax();
【Jquery的AJAX的部分的使用】
引入JQuery的JS.
【Jquery的AJAX的部分的入门】
// jquery的load方法
$(function(){
// 给按钮1绑定一个click事件:
$("#bt1").click(function(){
$("#d1").load("/WEB15/ServletDemo4",{"name":"张三","password":"123"},function(data){
if(data == 1){
$(this).html("张三");
}else{
$(this).html("其他");
}
});
});
});
// 使用jquery的get方法:
$(function(){
$("#bt2").click(function(){
$.get("/WEB15/ServletDemo4",{"name":"李四","password":"345"},function(data){
$("#d2").html(data);
});
});
});
//使用jquery的post方法:
$(function(){
$("#bt3").click(function(){
$.post("/WEB15/ServletDemo4",{"name":"王五","password":"456"},function(data){
$("#d3").html(data);
});
});
});
// 使用jquery的ajax方法:
$(function(){
$("#bt4").click(function(){
$.ajax({
type:"post",
url:"/WEB15/ServletDemo4",
data:"name=aaa&password=123",
success:function(data){
$("#d4").html(data);
}
});
});
});
1.2.3 代码实现:
$(function(){
// 给用户名的文本框绑定一个事件:
$("#username").blur(function(){
// 获得文本框的值:document.getELementById().value;
var username = $(this).val();
// 使用jquery的ajax的操作异步发送请求.
$.post("/WEB15/ServletDemo3",{"username":username},function(data){
if(data==1){
// 用户名可以使用
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").prop("disabled",false);
}else if(data==2){
// 用户名已经存在
$("#s1").html("<font color='red'>用户名已经被占用</font>");
$("#regBut").prop("disabled",true);
}
});
});
});
1.3 案例三:使用JQuery完成仿百度的信息提示:
1.3.1 需求:
在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).
1.3.2 分析:
1.3.2.1 步骤分析:
Ø 创建一个数据库和表:
Ø 设计一个页面
Ø 文本框绑定一个事件.keyup
Ø 在keyup所触发函数中:
n 获得文本框的值.
n 将这个值异步提交到服务器.$.post();
n 提交到Servlet:
u 接收参数:
u 调用业务层--调用DAO: select * from .. Where xx like ?;
u 查询之后页面跳转把数据显示到一个表格中.
1.3.3 代码实现:
创建数据库和表:
CREATE TABLE words(
id INT PRIMARY KEY AUTO_INCREMENT,
word VARCHAR(20)
);
设计一个页面:
<center><h1>百度一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="百度一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>
为文本框绑定事件:编写jquery代码
$(function(){
// 为文本框绑定事件:
$("#word").keyup(function(){
// 获得文本框的值:
var val = $(this).val();
if(val != ""){
// 异步将这个值提交给服务器:
$.post("/WEB15/ServletDemo5",{"val":val},function(data){
$("#d1").show();
$("#d1").html(data);
});
}else{
$("#d1").hide();
}
});
});
1.4 使用Jquery完成省市联动的案例:使用JSON作为响应数据:
1.4.1 需求:
完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!
1.4.2 分析:
1.4.2.1 技术分析:
【JSON的概述】
JSON的概念:
JSON的案例:
* {key:value,key:value}
* {id:1,name:aaa}
* [{key:value,key:value},{key:value,key:value}]
* [{id:1,name:aaa},{id:2,name:bbb}]
将对象转成JSON:
使用JSONLIB将Java中对象或集合转成JSON.
* JSONArray:将数组或List集合转成JSON的.
* JSONObject:将对象或Map集合转成JSON的.
1.4.3 代码实现:
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>省市联动</title> <script type="text/javascript" src="/day19/js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //页面加载成功,查询所有省 $.get("/day19/selectPro",function(d){ //alert(d); var $pro=$("#proId"); $(d).each(function(){ //alert(this.name+"..."+this.provinceid); $pro.append($("<option value="+this.provinceId+">"+this.name+"</option>")); }); },"json"); // 给省份下拉选菜单派发change事件 $("#proId").change(function(){ //获取省份的ID var $pid=$(this).val(); //alert($pid); //发送ajax请求,查询所有的市 $.get("/day19/selectCity",{"pid":$pid},function(obj){ //alert(obj); var $city=$("#cityId"); //清空 $city.html("<option>-请选择-</option>"); $(obj).each(function(){ $city.append($("<option value="+this.cityId+">"+this.name+"</option>"));
}); },"json"); }); }) </script> </head> <body> <select id="proId" name="province"> <option>--省份--</option> </select> <select id="cityId" name="city"> <option>--请选择--</option> </select>
</body> </html> |
Domain包下的City内容
package com.huida.domain;
public class City { private int cityId; private int provinceId; private String name; public int getCityId() { return cityId; } public void setCityId(int cityId) { this.cityId = cityId; } public int getProvinceId() { return provinceId; } public void setProvinceId(int provinceId) { this.provinceId = provinceId; } public String getName() { return name; } public void setName(String name) { this.name = name; }
}
|
Dao层
package com.huida.dao;
import java.sql.SQLException; import java.util.List;
import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.huida.domain.City; import com.huida.domain.Province; import com.huida.utils.DataSourceUtils;
public class CityDao {
public List<City> findCityByPid(String pid) throws SQLException { QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select * from city where provinceID=?"; return qr.query(sql, new BeanListHandler<>(City.class),pid); }
}
|
CityService层
package com.huida.service;
import java.sql.SQLException; import java.util.List;
import com.huida.dao.CityDao; import com.huida.domain.City; public class CityService { public List<City> findCityById(String pid) throws SQLException { return new CityDao().findCityByPid(pid); } }
|
SelectProServlet
package com.huida.web.servlet;
import java.io.IOException; import java.sql.SQLException; 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.huida.domain.Province; import com.huida.service.ProvinceService;
import net.sf.json.JSONArray;
public class SelectProServlet extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.调用service查询到所有的省份 List<Province> list=null; try { list = new ProvinceService().finAll(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } //2.将所有的省份写回去 json response.setContentType("text/htm;charset=utf-8"); response.getWriter().println(JSONArray.fromObject(list)); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
|
SelectCityServlet
package com.huida.web.servlet;
import java.io.IOException; import java.sql.SQLException; 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.huida.domain.City; import com.huida.service.CityService;
import net.sf.json.JSONArray;
public class SelectCityServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //0设置编码 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //1.获取省份id String pid = request.getParameter("pid"); //2.调用service查询所有市 返回list List<City> list =null; try { list = new CityService().findCityById(pid); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } //3.将list转换成json返回页面 if(list!=null&&list.size()>0){ response.getWriter().print(JSONArray.fromObject(list)); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } |