JavaWeb15-HTML篇笔记（一）

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");
JavaWeb15-HTML篇笔记（一）

猜你喜欢
