第15章WEB15-AJAX和JQuery案例篇

阿新 • • 發佈：2018-04-14

AJAX和JQuery案例篇 javaweb

今日任務
? 使用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) {
  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");
  }
  1.2.2.2 步驟分析:
  ? 創建一個用戶表
  ? 設計一個註冊頁面:
  ? 在用戶名文本框上綁定一個事件:onblur
  ? 在JS的函數中使用AJAX異步向Servlet發送請求.
  ? 在Servlet中接收參數-->調用業務層-->調用DAO
  n 查詢到了：用戶名已經存在
  n 沒有查詢到：用戶名可以使用
  1.2.3 代碼實現：

創建用戶表:
CREATE TABLE `user` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(20) DEFAULT NULL,
  `password` VARCHAR(20) DEFAULT NULL,
  `email` VARCHAR(20) DEFAULT NULL,
  `name` VARCHAR(20) DEFAULT NULL,
  `sex` VARCHAR(10) DEFAULT NULL,
  `birthday` DATE DEFAULT NULL,
  `hobby` VARCHAR(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT  INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,‘bbb‘,‘123‘,‘[email protected]‘,‘張三‘,‘男‘,‘1992-01-02‘,‘籃球, 足球, 排球‘),(2,‘ccc‘,‘123‘,‘[email protected]‘,‘李四‘,‘女‘,‘1992-03-20‘,‘排球, 乒乓球‘),(3,‘aaa‘,‘123‘,‘[email protected]‘,‘王守義‘,‘男‘,‘1990-08-11‘,‘足球, 排球‘),(5,‘tom‘,‘123‘,‘[email protected]‘,‘提莫‘,‘男‘,NULL,‘籃球‘);

設計註冊頁面:

引入jar包和工具類:

創建包結構：

AJAX異步校驗用戶名:
function checkUsername(){
// 獲得文本框的值:
var username = document.getElementById("username").value;
// 創建對象:
var xhr = createXMLHttpRequest();
// 2.狀態改變觸發一個函數
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 獲得到響應內容:
var data = xhr.responseText;
if(data == 1){
// 可以使用
document.getElementById("s1").innerHTML = "<font color=‘green‘>用戶名可以使用</font>";
document.getElementById("regBut").disabled=false;
}else if(data == 2){
// 已經存在
document.getElementById("s1").innerHTML = "<font color=‘red‘>用戶名已經被使用</font>";
document.getElementById("regBut").disabled=true;
}
}
}
}
// 3.打開連接
xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);
// 4.發送數據
xhr.send(null);
}

1.3 使用JQuery完成異步用戶名的校驗：1.3.1 需求：
技術分享圖片
在註冊頁面中,當輸入了用戶名之後,光標離開文本框,顯示用戶名是否已經存在.
***** 用戶名是否已經存在,需要到後臺的數據庫進行查詢的.
1.3.2 分析:1.3.2.1 技術分析:
【Jquery的AJAX部分的概述】
由於傳統AJAX開發代碼比較麻煩,而且還有瀏覽器兼容的問題.傳統的AJAX的使用在企業中是很少的.使用AJAX的一些框架完成.
JQuery的AJAX部分的API：

$(“”).load(url,data,function(){});
$.get(url,data,function(){},dataType);
$.post(url,data,function(){},dataType);
$.ajax();
【Jquery的AJAX的部分的使用】
引入JQuery的JS.
【Jquery的AJAX的部分的入門】
// jquery的load方法
$(function(){
// 給按鈕1綁定一個click事件：
$("#bt1").click(function(){
$("#d1").load("/WEB15/ServletDemo4",{"name":"張三","password":"123"},function(data){
if(data == 1){
$(this).html("張三");
}else{
$(this).html("其他");
}
});
});
});
// 使用jquery的get方法:
$(function(){
$("#bt2").click(function(){
$.get("/WEB15/ServletDemo4",{"name":"李四","password":"345"},function(data){
$("#d2").html(data);
});
});
});
//使用jquery的post方法:
$(function(){
$("#bt3").click(function(){
$.post("/WEB15/ServletDemo4",{"name":"王五","password":"456"},function(data){
$("#d3").html(data);
});
});
});
// 使用jquery的ajax方法:
$(function(){
$("#bt4").click(function(){
$.ajax({
type:"post",
url:"/WEB15/ServletDemo4",
data:"name=aaa&password=123",
success:function(data){
$("#d4").html(data);
}
```
        });
});
```
});
1.3.3 代碼實現：

$(function(){
// 給用戶名的文本框綁定一個事件：
$("#username").blur(function(){
// 獲得文本框的值:document.getELementById().value;
var username = $(this).val();
// 使用jquery的ajax的操作異步發送請求.
$.post("/WEB15/ServletDemo3",{"username":username},function(data){
if(data==1){
// 用戶名可以使用
$("#s1").html("<font color=‘green‘>用戶名可以使用</font>");
$("#regBut").prop("disabled",false);
}else if(data==2){
// 用戶名已經存在
$("#s1").html("<font color=‘red‘>用戶名已經被占用</font>");
$("#regBut").prop("disabled",true);
}
});
});
});

1.4 案例三：使用JQuery完成仿百度的信息提示:1.4.1 需求:
在一個搜索頁面中,鍵盤輸入一些信息,在文本框下面給出一些提示信息(需要從服務器端進行查詢的).
技術分享圖片
1.4.2 分析：1.4.2.1 步驟分析：
? 創建一個數據庫和表:
? 設計一個頁面
? 文本框綁定一個事件.keyup
? 在keyup所觸發函數中:
n 獲得文本框的值.
n 將這個值異步提交到服務器.$.post();
n 提交到Servlet：
u 接收參數:
u 調用業務層--調用DAO: select * from .. Where xx like ?;
u 查詢之後頁面跳轉把數據顯示到一個表格中.
1.4.3 代碼實現:

創建數據庫和表:
CREATE TABLE words(
id INT PRIMARY KEY AUTO_INCREMENT,
word VARCHAR(20)
);

設計一個頁面：
<center><h1>黑馬一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="黑馬一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>

為文本框綁定事件:編寫jquery代碼
$(function(){
// 為文本框綁定事件:
$("#word").keyup(function(){
// 獲得文本框的值:
var val = $(this).val();
if(val != ""){
// 異步將這個值提交給服務器:
$.post("/WEB15/ServletDemo5",{"val":val},function(data){
$("#d1").show();
$("#d1").html(data);
});
}else{
$("#d1").hide();
}
});
});
1.5 使用JQuery完成一個省市聯動的案例:使用XML作為響應內容:1.5.1 需求:
技術分享圖片
完成省市聯動的效果.市的信息從後臺服務器端獲得.通過AJAX使用這樣的功能!!!
1.5.2 分析:1.5.2.1 技術分析:
【XML作為響應文本】
List<City> list = new ArrayList<City>();
list.add(new City(1,”哈爾濱”));
list.add(new City(2,”齊齊哈爾”));
list.add(new City(3,”牡丹江”));
將list集合轉出XML：
<list>
<city>
<name>哈爾濱</name>
</city>
...
</list>
使用XStream工具:將Java對象轉成XML.
【XStream的概述】
Xstream是一種OXMapping 技術，是用來處理XML文件序列化的框架,在將javaBean序列化，或將XML文件反序列化的時候，不需要其它輔助類和映射文件，使得XML序列化不再繁瑣。【XStream的入門】
引入xstream需要的jar包:
![](http://i2.51cto.com/images/blog/201804/14/feb7d29950f81fe87fd9078cf9476ecc.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
入門:
@Test
br/>【XStream的入門】
引入xstream需要的jar包:
![](http://i2.51cto.com/images/blog/201804/14/feb7d29950f81fe87fd9078cf9476ecc.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
入門:
@Test
List<City> list = new ArrayList<City>();
list.add(new City(1,"哈爾濱"));
list.add(new City(2,"齊齊哈爾"));
list.add(new City(3,"牡丹江"));

            XStream stream = new XStream();

            // 設置標簽的別名：
            stream.alias("city", City.class);

            // 設置子標簽作為屬性進行顯示:
            stream.useAttributeFor(City.class, "id");

            String xml = stream.toXML(list);

            System.out.println(xml);
    }

1.5.2.2 步驟分析：
? 設計頁面:
? 為第一個下拉列表綁定事件:change
? 在change事件觸發的函數中:提交數據到Servlet.
? 在Servlet中:
n 接收數據:接收提交的省份的信息.
n Map<String,List<City>>
n 將集合轉成XML，將XML寫回到瀏覽器.
? 在回調函數中獲得XML中的市的信息.
? 生成一個option元素,將option元素添加到第二個下拉列表中。
1.5.3 代碼實現:

設計一個頁面:
<h1>省市聯動的案例</h1>
<select id="province">
<option value="">--請選擇--</option>
<option value="黑龍江">黑龍江</option>
<option value="吉林">吉林</option>
<option value="遼寧">遼寧</option>
</select>
<select id="city">
<option value="">--請選擇--</option>
</select>

為第一個列表綁定事件:
$(function(){
// 為第一個列表綁定事件:
$("#province").change(function(){
// 獲得下拉列表選中的值
var val = $(this).val();
// alert(val);
$.post("/WEB15/ServletDemo6",{"province":val},function(data){
// alert(data);
$("#city").html("<option>--請選擇--</option>");
$(data).find("city").each(function(){
var id = $(this).children("id").text();
var name = $(this).children("name").text();
// alert(name);
var op = "<option>"+name+"</option>";
$("#city").append(op);
});
});
});
});

1.6 使用Jquery完成省市聯動的案例:使用JSON作為響應數據:1.6.1 需求:
技術分享圖片
完成省市聯動的效果.市的信息從後臺服務器端獲得.通過AJAX使用這樣的功能!!!
1.6.2 分析:1.6.2.1 技術分析:
【JSON的概述】
JSON的概念:

JSON的案例:

{key:value,key:value}
- {id:1,name:aaa}
[{key:value,key:value},{key:value,key:value}]
- [{id:1,name:aaa},{id:2,name:bbb}]
  將對象轉成JSON:
  使用JSONLIB將Java中對象或集合轉成JSON.
JSONArray :將數組或List集合轉成JSON的.
JSONObject :將對象或Map集合轉成JSON的.

第15章WEB15-AJAX和JQuery案例篇

AJAX和JQuery案例篇 javaweb 今日任務? 使用AJAX完成用戶名的異步校驗? 使用JQuery完成用戶名異步校驗? 使用JQuery完成商品信息模糊顯示? 使用JQuery完成省市聯動效果返回XML? 使用JQuery完成省市聯動效果返回JSON教學導航教學目標了解AJAX的基本使用掌

第15章WEB15-AJAX和JQuery案例篇

第15章WEB15-AJAX和JQuery案例篇

LDD3 第15章記憶體對映和DMA

《數學之美》第15章矩陣運算和文字處理中的兩個分類問題

accp8.0轉換教材第10章Ajax和jQuery理解與練習

Linux命令應用大詞典-第 15章文件、目錄權限和屬性

第15章友元、異常和其他

第15章友元、異常、和其他

精通iOS開發--第15章 Grand Central Dispatch和後臺處理之Block與Self的迴圈引用

第15章動畫基礎(1)——概述、通過程式碼建立動畫和動畫的生命週期

讀構建之法第五章：團隊和流程

python編程快速上手之第15章實踐項目參考答案(17.7.2)

python編程快速上手之第15章實踐項目參考答案(17.7.3)

第5章 IP地址和子網劃分（2）_IP地址分類和NAT技術

第5章 IP地址和子網劃分（4）_超網合並網段

第6章靜態路由和動態路由（1）_靜態路由

Js原生Ajax和Jquery的Ajax

轉載--編寫高質量代碼:改善Java程序的151個建議(第5章:數組和集合___建議65~69)

第四章第五章環境搭建和24個命令總結

安卓權威編程指南-筆記（第24章 Looper Handler 和 HandlerThread）

第十章對象和類

第15章WEB15-AJAX和JQuery案例篇

相關推薦