第15章WEB15-AJAX和JQuery案例篇-白红宇

第15章WEB15-AJAX和JQuery案例篇

阅读量：7126 次

发布时间：2019-06-28

本文共 8346 字，大约阅读时间需要 27 分钟。

今日任务

Ø 使用AJAX完成用户名的异步校验

Ø 使用JQuery完成用户名异步校验

Ø 使用JQuery完成商品信息模糊显示

Ø 使用JQuery完成省市联动效果返回XML

Ø 使用JQuery完成省市联动效果返回JSON

教学导航

教学目标

了解AJAX的基本使用

掌握JQuery的AJAX部分的代码

掌握JQuery返回XML和JSON格式数据如何处理

教学方法

案例驱动法

1.1 上次课内容回顾：

JDBC的添加，修改，删除查询.

查询：
- 在首页点击查询:提交到Servlet--调用业务层--调用DAO

添加:
- 在首页点击添加:提交到添加的JSP.在JSP中输入一些信息.提交到Servlet.
  - 在Servlet中接收参数,封装参数,调用业务层,调用DAO.
  - 使用令牌机制完成重复提交的问题.

修改：
- 在列表页面中点击编辑：提交到Servlet.查询某个商品.显示到页面.
  - 在页面中输入一些信息,点击确定.提交到修改的Servlet.
  - 接收参数,封装,调用业务层,调用DAO.

删除:
- 在列表页面中点击删除：提交到Servlet.
  - 在Servlet中接收id,调用业务层,调用DAO.
  - 使用JS进行提示.

分页查询:
- 分页分类:
  - 一次性查询几条记录.
  - 一次性查询所有记录.对记录进行切分.
- 一次性查询几条:limit
- 封装一个分页的Bean:
  - 提供参数:currPage,pageSize,totalCount,totalPage,List.
- 在业务层需要将PageBean进行封装.
  1.2 使用AJAX完成用户名异步校验:1.2.1 需求:
  在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
  ***** 用户名是否已经存在,需要到后台的数据库进行查询的.
  1.2.2 分析：1.2.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.2.2.2 步骤分析:
  Ø 创建一个用户表
  Ø 设计一个注册页面:
  Ø 在用户名文本框上绑定一个事件:onblur
  Ø 在JS的函数中使用AJAX异步向Servlet发送请求.
  Ø 在Servlet中接收参数-->调用业务层-->调用DAO
  n 查询到了：用户名已经存在
  n 没有查询到：用户名可以使用
  1.2.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 = "用户名可以使用";document.getElementById("regBut").disabled=false;}else if(data == 2){// 已经存在document.getElementById("s1").innerHTML = "用户名已经被使用";document.getElementById("regBut").disabled=true;}}}}// 3.打开连接xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);// 4.发送数据xhr.send(null);}

1.3 使用JQuery完成异步用户名的校验：1.3.1 需求：

在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.

***** 用户名是否已经存在,需要到后台的数据库进行查询的.

1.3.2 分析:1.3.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.3.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("用户名可以使用");$("#regBut").prop("disabled",false);}else if(data==2){// 用户名已经存在$("#s1").html("用户名已经被占用");$("#regBut").prop("disabled",true);}});});});

1.4 案例三：使用JQuery完成仿百度的信息提示:1.4.1 需求:

在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).

1.4.2 分析：1.4.2.1 步骤分析：

Ø 创建一个数据库和表:

Ø 设计一个页面

Ø 文本框绑定一个事件.keyup

Ø 在keyup所触发函数中:

n 获得文本框的值.

n 将这个值异步提交到服务器.$.post();

n 提交到Servlet：

u 接收参数:

u 调用业务层--调用DAO: select * from .. Where xx like ?;

u 查询之后页面跳转把数据显示到一个表格中.

1.4.3 代码实现:

创建数据库和表:

CREATE TABLE words(

id INT PRIMARY KEY AUTO_INCREMENT,

word VARCHAR(20)

);

设计一个页面：

为文本框绑定事件:编写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.5 使用JQuery完成一个省市联动的案例:使用XML作为响应内容:1.5.1 需求:

完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!

1.5.2 分析:1.5.2.1 技术分析:

【XML作为响应文本】

List<City> list = new ArrayList<City>();

list.add(new City(1,”哈尔滨”));

list.add(new City(2,”齐齐哈尔”));

list.add(new City(3,”牡丹江”));

将list集合转出XML：

<list>

<city>

</city>

...

</list>

使用XStream工具:将Java对象转成XML.

【XStream的概述】

Xstream是一种OXMapping 技术，是用来处理XML文件序列化的框架,在将javaBean序列化，或将XML文件反序列化的时候，不需要其它辅助类和映射文件，使得XML序列化不再繁琐。

XStream stream = new XStream();            // 设置标签的别名：            stream.alias("city", City.class);            // 设置子标签作为属性进行显示:            stream.useAttributeFor(City.class, "id");            String xml = stream.toXML(list);            System.out.println(xml);    }

1.5.2.2 步骤分析：

Ø 设计页面:

Ø 为第一个下拉列表绑定事件:change

Ø 在change事件触发的函数中:提交数据到Servlet.

Ø 在Servlet中:

n 接收数据:接收提交的省份的信息.

n Map<String,List<City>>

n 将集合转成XML，将XML写回到浏览器.

Ø 在回调函数中获得XML中的市的信息.

Ø 生成一个option元素,将option元素添加到第二个下拉列表中。

1.5.3 代码实现:

设计一个页面:省市联动的案例
为第一个列表绑定事件:$(function(){// 为第一个列表绑定事件:$("#province").change(function(){// 获得下拉列表选中的值var val = $(this).val();// alert(val);$.post("/WEB15/ServletDemo6",{"province":val},function(data){// alert(data);$("#city").html("");$(data).find("city").each(function(){var id = $(this).children("id").text();var name = $(this).children("name").text();// alert(name);var op = "";$("#city").append(op);});});});});

1.6 使用Jquery完成省市联动的案例:使用JSON作为响应数据:1.6.1 需求: