AJAX和JQuery

来源：互联网发布：java 复制代码编辑：程序博客网时间：2024/06/11 16:35

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)

);

设计一个页面：

为文本框绑定事件:编写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>

$(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>

</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);

}

阅读全文

1 0