1. 程式人生 > >JavaWeb15-HTML篇筆記(一)

JavaWeb15-HTML篇筆記(一)

Java

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篇筆記(一)