本帖最后由 谷粒姐姐 于 2018-6-1 15:34 编辑
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入门】 [AppleScript] 纯文本查看 复制代码 创建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");
{:5_229:}
| 
收藏
淘帖
踩
