JavaWeb15-HTML篇筆記(一)
阿新 • • 發佈:2018-06-01
Java1.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篇筆記(一)