第15章WEB15-AJAX和JQuery案例篇

今日任务

  • 使用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 = "<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.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("<font color='green'>用户名可以使用</font>");

$("#regBut").prop("disabled",false);

}else if(data==2){

// 用户名已经存在

$("#s1").html("<font color='red'>用户名已经被占用</font>");

$("#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)

);

设计一个页面:

<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.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>

<name>哈尔滨</name>

</city>

...

</list>

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

【XStream的概述】

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

【XStream的入门】

引入xstream需要的jar包:

入门:

@Test

public void demo1(){

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

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

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

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

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    代码实现:

设计一个页面:

<h1>省市联动的案例</h1>

<select id="province">

<option value="">--请选择--</option>

<option value="黑龙江">黑龙江</option>

<option value="吉林">吉林</option>

<option value="辽宁">辽宁</option>

</select>

<select id="city">

<option value="">--请选择--</option>

</select>

为第一个列表绑定事件:

$(function(){

// 为第一个列表绑定事件:

$("#province").change(function(){

// 获得下拉列表选中的值

var val = $(this).val();

// alert(val);

$.post("/WEB15/ServletDemo6",{"province":val},function(data){

// alert(data);

$("#city").html("<option>--请选择--</option>");

$(data).find("city").each(function(){

var id = $(this).children("id").text();

var name = $(this).children("name").text();

// alert(name);

var op = "<option>"+name+"</option>";

$("#city").append(op);

});

});

});

});

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

1.6.1    需求:

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

1.6.2    分析:

1.6.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.6.3    代码实现:

web-day15的更多相关文章

  1. python开发学习-day15(前端部分知识、web框架、Django创建项目)

    s12-20160430-day15 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  2. day15 web框架和Django基础

    参考博客: http://www.cnblogs.com/yuanchenqi/articles/6788872.html http://www.cnblogs.com/yuanchenqi/arti ...

  3. 撩课-Web大前端每天5道面试题-Day15

    1.请描述一下 cookies,sessionStorage 和 localStorage 的区别? cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过 ...

  4. day15 web前端之css

    css的概念以及初体验 概念: CSS(cascading style sheet)也就是层叠样式表:它是一种网页设计的新技术,现在已经被大多数浏览器所支持,层位网页设计必不可少的工具之一.优点:   ...

  5. [spark案例学习] WEB日志分析

    数据准备 数据下载:美国宇航局肯尼迪航天中心WEB日志 我们先来看看数据:首先将日志加载到RDD,并显示出前20行(默认). import sys import os log_file_path =' ...

  6. python_way day15 HTML-DAY2 HTML-DAY2、JS

    python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...

  7. 《30天学习30种新技术》-Day 15:Meteor —— 从零开始创建一个 Web 应用

    目录:https://segmentfault.com/a/1190000000349384 原文: https://segmentfault.com/a/1190000000361440 到目前为止 ...

  8. java web中的相对路径和绝对路径

    以往一直没注意javaweb中的相对路径和绝对路径问题,有时有问题了,才想起去看看是否是路径的问题,一直对路径问题都是一知半解.今天就姑且记录一下,毕竟事如春梦了无痕嘛,倘不记之笔墨,未免有辜彼苍之厚 ...

  9. web笔记全

    1.项目流程与数据库 1.课程体系 阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS 阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap 阶段3(前端进阶技术): ...

  10. python_way day15 HTML-DAY2、 回顾HTML-CSS 标签(css强制生效),JS(数据类型,时间处理,作用域)

    python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 增加默认值: . 强制生效,就算在上面,被覆盖上了也会生效 解决缩小页面混乱 ...

随机推荐

  1. Vue 快速原型开发

    快速原型开发 注意: 是:serve 而不是 server 通过使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展 go ...

  2. Linux移植之auto.conf、autoconf.h、Mach-types.h的生成过程简析

    在Linux移植之make uImage编译过程分析中分析了uImage文件产生的过程,在uImage产生的过程中,顺带还产生了其它的一些中间文件.这里主要介绍几个比较关键的文件 1.linux-2. ...

  3. Charles抓取https包

    Android: 1.若滑动解锁,请先设置屏幕锁: 2.然后浏览器输入Charlesproxy.com/getssl,安装证书,出现安装证书提示,随便打个名称 比如Android,选择WLAN(这里A ...

  4. Windows服务安装、卸载、启动和关闭的管理器

    最近在重构公司的系统,把一些需要独立执行.并不需要人为关注的组件转换为Windows服务,Windows服务在使用的过程中有很多好处,相信这一点,就不用我多说了.但是每次都要建立Windows服务项目 ...

  5. Informatica_(1)安装

    安装961 server和client 0.informatica卸载保证服务(informatica9.6.1)在关闭状态:卸载客户端,应用程序-->informatica-->unin ...

  6. 自定义标签tld的使用

    在JSP中使用标签是很平常的事情,在制作自定义标签时,通常都需要写tld文件来定义标签的各种属性,对应的Java类,前缀等等.标签与tld文件紧紧相连,那么,到底应该怎么放置tld文件?在web.xm ...

  7. Eclipse中logcat过滤器的使用

    logcat里信息繁多,用过滤器可以方便快捷的找到我们要查找的信息. 我们可以在打开Eclipse之后,选择Window –> Show View ->Other菜单,然后在Android ...

  8. json与字符串转换

    一.json转为字符串 JSON.stringify(...) 二.字符串转为json JSON.parse(...)

  9. hdu 1539 & poj 1416 某某公司

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1539 大意是输入n和m,把m按顺序拆分成若干个数,问这些数和的在小于n的前提下最大为多少 注意必须m的 ...

  10. CF Round #510 (Div. 2)

    前言:没想到那么快就打了第二场,题目难度比CF Round #509 (Div. 2)这场要难些,不过我依旧菜,这场更是被\(D\)题卡了,最后\(C\)题都来不及敲了..最后才\(A\)了\(3\) ...