内容发布更新时间 : 2025/1/10 0:59:47星期一 下面是文章的全部内容请认真阅读。

黑马程序员：javaweb基础阶段笔记之第十五章

WEB15-AJAX和IQuery案例篇

今日任务

? 使用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) {

黑马程序员郑州中心 编著