第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‘,‘[email protected]‘,‘张三‘,‘男‘,‘1992-01-02‘,‘篮球, 足球, 排球‘),(2,‘ccc‘,‘123‘,‘[email protected]‘,‘李四‘,‘女‘,‘1992-03-20‘,‘排球, 乒乓球‘),(3,‘aaa‘,‘123‘,‘[email protected]‘,‘王守义‘,‘男‘,‘1990-08-11‘,‘足球, 排球‘),(5,‘tom‘,‘123‘,‘[email protected]‘,‘提莫‘,‘男‘,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序列化不再繁琐。br/>【XStream的入门】
引入xstream需要的jar包:
![](http://i2.51cto.com/images/blog/201804/14/feb7d29950f81fe87fd9078cf9476ecc.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
入门:
@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的.

第15章WEB15-AJAX和JQuery案例篇

原文地址：http://blog.51cto.com/13587708/2103348

时间： 2024-07-31 10:40:58

第15章WEB15-AJAX和JQuery案例篇的相关文章

032.Ajax+Json+Jquery

AjjA: AjaxJ: JSONJ: jQuery -----------------------------------------------JSONJavascript Object NotationJS对象标记 class User{ public int Id{get;set;} public string Name{get;set;} public string Phone{get;set;} // public string HomeAddress{get;set;} // pu

50个实用的jquery案例

50个jquery案例 1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("

web基础知识（二）关于ajax，Jquery传值最基础东西

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人 列表很多,点击编辑和删除无刷新的进行操作的话,肯定是ajax了,因为无刷新嘛,可能有的朋友会说直接传值,传ID到Action删除不就OK了,用得着写js么,纯粹自己找麻烦嘛. 其实这里重点是无刷新的啦, 这个上传后到这里来,有个预览功能,把本次的全部预览,如果全部刷新的话,那么刚才上传的就不会在这个页面了,so,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选

第 15 章 组合模式【Composite Pattern】

以下内容出自:<<24种设计模式介绍与6大设计原则>> 大家在上学的时候应该都学过“数据结构”这门课程吧,还记得其中有一节叫“二叉树”吧,我们上 学那会儿这一章节是必考内容,左子树,右子树,什么先序遍历后序遍历什么,重点就是二叉树的的遍历,我还记得当时老师就说,考试的时候一定有二叉树的构建和遍历,现在想起来还是觉的老师是正确的,树状结果在实际项目应用的非常广泛. 咱就先说个最常见的例子,公司的人事管理就是一个典型的树状结构,你想想你公司的结构是不是这样: 老大,往下一层一层的管理,

web基础知识（三）关于ajax，Jquery传值最基础东西

今天补充一下两个小功能,一个是关于radio单选框的情况,如何在前面选了后,传到后台,编辑修改的时候再次传回来,并且在当时选的那个上:再一个就是关于添加小标签的时候添加接着弹出在下面,并点击出现删除. 一:radio 1 <div class="newlylist"> 2 <div class="newlyhead">图示商品:</div> 3 <div class="newlycontent">&

asp.net中ScriptManager自带Ajax与jQuery事件冲突

问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突.通过在网上收索,发现很多人都遇到这个同样的问题.最终还是找到的解决的办法,在此我想将其解决的办法分享出来供大家参考. 问题解决办法: 方法1.两者实现都能够实现页面的无刷新效果,所以可以保留其中的一种即可: 方法2.如果必须要两者混合应用,那么在用jQuery绑定事件是就要注意一些了 我们平时在jQuery中绑定事件最常用的方式有以下三种:以c

Ajax 之jquery(4) 入门jQuery之一

这是否意味着如果你尚未成为脚本编程高手,就无法在自己的网站中善用JavaScript 呢?完全不是!本章将向你展示如何利用JavaScript 工具包:借助已经预先编写好的库和函数框架,你会在项目实践中真切地感受到脚本编程的强大.目前有许多工具包可供下载,而且大部分都是免费的.本书选用了可免费下载且开源的实用程序和控件集jQuery(jquery.com)来构建交互式Web 应用程序.我们认为它是最出色的JavaScript 库之一.在接下来的几章中,我们将介绍如何使用jQuery 来拖放页面元

【机器学习实战】第15章 大数据与MapReduce

第15章 大数据与MapReduce 大数据 概述 大数据: 收集到的数据已经远远超出了我们的处理能力. 大数据 场景 假如你为一家网络购物商店工作,很多用户访问该网站,其中有些人会购买商品,有些人则随意浏览后就离开. 对于你来说,可能很想识别那些有购物意愿的用户. 那么问题就来了,数据集可能会非常大,在单机上训练要运行好几天. 接下来:我们讲讲 MapRedece 如何来解决这样的问题 MapRedece Hadoop 概述 Hadoop 是 MapRedece 框架的一个免费开源实现. Ma

第111天：Ajax之jQuery实现方法

由于jQuery中的Ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个Ajax方法,他可以简单的get,post,jsonp请求就可以了. 一.jQuery语法格式 1 var ajax = function () { 2 3 // 做一些初始化,定义一些私有函数等 4 5 return function () { 6 // ajax主体代码 7 } 8 9 }() 10 11 12 ajax({ 13