web-day15

第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序列化不再繁琐。

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