1-Ajax介紹
“Asynchronous Javascript And XML”（異步JavaScript和XML）
它並不是新的技術，只是把原有的技術整合到了一起，具體
1、使用CSS和XHTML來表示
2、使用DOM模型來交互和動態顯示
3、使用XMLHttpRequest來和服務器進行異步通信
4、使用javascript來綁定和調用
2-Ajax Get、Post請求
1、創建對象
/*XMLHttpRequest 用於在後臺與服務器交換數據,
這意味着在不重新加載網頁的情況下,能對網頁進行更新
open()中的url - 可以指向任何類型的文件,比如.txt和.xml,或者服務器腳本文件*/
function ajaxFunction(){//不同瀏覽器中執行時return的request
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;
}
2、發送請求
function get(){
var request = ajaxFunction();
//參數一：請求類型 參數二：url 參數三：是否異步
request.open("GET","/Ajax01/DemoServlet01?user=Hillain",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState==4&&request.status==200){
alert(request.responseText);
}
}
}
Post請求的1步與Get一樣，第2步的代碼如下：
function post(){
var request = ajaxFunction();
request.open("POST","/Ajax01/DemoServlet01",true);
//沒有這一行就無法傳送數據,數據就爲null
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("user=Hillain"); //post的傳值方式
request.onreadystatechange = function(){
if(request.readyState==4&&request.status==200){
alert(request.responseText);
}
}
}
3-Ajax 校驗用戶名
這裏用了個綜合案例來使用Ajax獲取信息
login.jsp：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxFunction(){
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;
}
function checkUsername(){
var userName = document.getElementById("name").value;
//alert("name="+userName); 可以取值
var xmlHttp = ajaxFunction();
xmlHttp.open("post","/Ajax01/CheckUserName",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var message = xmlHttp.responseText;
var span = document.getElementById("name_msg");
if(message==1){
span.innerHTML = "<font color='red'>用戶名已存在！</font>";
}else{
span.innerHTML = "<font color='green'>用戶名可用！</font>";
}
}
}
xmlHttp.send("nameName="+userName);
}
</script>
</head>
<body>
<table>
<tr>
<td>用戶名：</td>
<td><input type="text" id="name" name="name" onblur="checkUsername()"><span id="name_msg"></span></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>郵箱：</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="註冊"></td>
</tr>
</table>
</body>
</html>
Servlet（CheckUserName）：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
String userName = request.getParameter("nameName");
response.setContentType("text/html;charset=utf-8");
UserDao user = new UserDaoImpl();
boolean isExist = user.CheckUserName(userName);
if(isExist){//用戶名存在時
response.getWriter().println(1);
}else{//用戶名不存在時
response.getWriter().println(2);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
4-JQuery 介紹及load()
JQuery是屬於Javascript的代碼框架，它的作用的簡化代碼，提高效率，write less do more。
JQuery load示例1：
function load(){
/* responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象 */
$("#content").load("/Ajax01/JQueryTest01",function(responseTxt,statusText,xhr) {
$("#content").val(responseTxt); //接收Servlet傳輸過來的數據
});
}
JQuery load示例2：
//利用按鈕標籤獲取信息：
<h3><input type="button" onclick="load()" value="點擊獲取信息"></h3>
//利用按鈕標籤獲取信息：
<a href="load()">點擊獲取信息</a> //雖然能接收到信息但是仍會刷新網頁,導致數據流失
function load(){
$("#div01").load("/Ajax01/JQueryTest01?name=load",function(1，2，3) {
$("#div01").html(responseTxt);
});
}
注意在示例2中，分別用了button標籤和a標籤來獲取信息，但結果是button能夠獲取信息，而a標籤不能。這是爲什麼呢？原因是：我們都知道，a標籤裏的一般都是超鏈接，而超鏈接都是會跳轉到另一個頁面的，這裏a標籤雖然是引用了load()，但是load()是有用到servlet的，也就是說，最後a標籤還是會跳向當前頁面，就好比你獲取到了信息沒錯，但是刷新了，相當於沒獲取到，所以沒有顯示該有的信息。而button就不一樣了，button就是一個單純的頁面元素，所以不會有刷新的問題。
5-JQuery get()與post()
對比get與post方法，除了參數一，後面的參數基本一樣，get參數一的寫法與html的寫法一樣，而post則是在後面加上{參數1名:參數1值,參數2名:參數2值,…}
function get(){
$.get("/Ajax01/JQueryTest01?name=get", function(data, status) {
$("#div01").text(data);
});
}
function post(){
$.post("/Ajax01/JQueryTest01", {name:"post"},function(data, status) {
$("#div01").text(data);
});
}
還記得上面有一個利用Ajax校驗用戶名的例子嗎？在這裏我們利用JQuery再實現一次校驗用戶名，看看兩種方式的主要代碼有什麼不一樣。
function checkUsername(){
var name = $("name").val();
$.post("/Ajax01/CheckUserName",{nameName:name},function(data,textStatus){
if(data==1){
$("#name_msg").html("<font color='red'>用戶名已存在!</font>");
}else{
$("#name_msg").html("<font color='green'>用戶名可用!</font>")
}
});
}
6-JQuery 仿百度搜索欄
這一塊內容我從開發的順序來表達👇
search.jsp（頁面搭建）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>仿百度搜索欄</title>
<script type="text/javascript" src="JQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="JQuery/search.js"></script>
</head>
<body>
<input style="width: 400px;height:40;font-size: 15px" id="content">
<div style="width: 400px;height:200px;border-color:gray;border:1px solid" id="div01">
</div>
</body>
</html>
FindKeyWordImpl（dao實現）：
public class KeyWordDaoImpl implements KeyWordDao{
@Override
public List<KeyWordBean> findKeyWord(String keyWord) throws SQLException {
QueryRunner qr = JDBCUtil_c3p0.getQR();
String sql = "select * from keyword where keyword like ? limit 5";
List<KeyWordBean> keyword= qr.query(sql, keyWord+"%",new BeanListHandler<KeyWordBean>(KeyWordBean.class));
return keyword;
}
}
search.js（獲取鍵盤輸入信息並回調）：
$(function() {
$("#content").keyup(function() {
var word = $(this).val();
if(word==""){
$("#div01").hide();
}else{
$("#div01").show();
$.post("FindKeyWord",{keyWord:word},function(data,status){
$("#div01").html(data);
});
}
}) //這裏不能加';'號,否則無法正確執行!
});
FindKeyWord（Servlet）：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
String keyWord = request.getParameter("keyWord");
System.out.println(keyWord);
KeyWordDao dao = new KeyWordDaoImpl();
List<KeyWordBean> list = dao.findKeyWord(keyWord);
request.getSession().setAttribute("list", list);
request.getRequestDispatcher("table.jsp").forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}
table.jsp（提示框頁面）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table>
<c:forEach items="${list}" var="key">
<tr>
<td>
${key.keyWord }
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
7-JQuery 省市聯動
city.jsp（頁面顯示）：
<body>
<select name="province" id="province">
<option value="">---請選擇---
<option value="1">福建省
<option value="2">浙江省
<option value="3">廣東省
<option value="4">江西省
</select>
<select name="city" id="city">
<option value="">---請選擇---
</select>
</body>
search.js（在JQuery中,被city.jsp調用）：
$(function() {
$("#province").change(function() {
var cid = $(this).val();
$.post("SearchCityServlet", {cid:cid}, function(data, textStatus) {
//alert(data);
//添加之前先清空之前的數據
$("#city").html("<option value=''>---請選擇---");
//這裏的find()中的數據爲Servlet中將CityBean全路徑修改的標籤名
$(data).find("city").each(function() {
var id = $(this).children("id").text(); //.text取其中值
var city = $(this).children("cname").text();
$("#city").append("<option value='"+id+"'>"+city);//value後有""
})
})
})
});
Dao內容：
（其中CityBean對象包含了id、cname和cid）
@Override
public List<CityBean> FindByCid(int cid) throws SQLException {
QueryRunner qr = JDBCUtil_c3p0.getQR();
String sql = "select * from city where cid = ?";
List<CityBean> list = qr.query(sql, cid,new BeanListHandler<CityBean>(CityBean.class));
return list;
}
Servlet實現（XStream的使用）：
（注意：使用XStream之前必須得導入相關包）
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.獲取參數並找到城市
int cid = Integer.parseInt(request.getParameter("cid"));
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.FindByCid(cid);
//2.利用XStream將list轉爲xml
XStream x = new XStream();
x.alias("city", CityBean.class);//將全路徑標籤變爲city標籤
//x.useAttributeFor(CityBean.class, "id");//將id標籤變爲屬性
String xml = x.toXML(list);
//3.設置編碼(xml數據)並返回
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(xml);
} catch (SQLException e) {
e.printStackTrace();
}
}
這個案例中，不太好理解的估計就是search.js與Servlet之間的關係了。在Servlet中，利用XStream給CityBean這個對象轉換爲xml，然後再利用js把xml數據顯示到jsp頁面上進行顯示。
8-Json引入與省市聯動改進
上面用到的xml，在這裏我們引入了json。舉個例子看看json和xml的區別：
XML格式如下：
<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>東莞</cname>
</city>
</list>
Json格式如下：
[
{"id":"1","pid":"1","cname":"深圳"},
{"id":"2","pid":"1","cname":"東莞"}
];
相比之下json的可讀性和佔用容量都優於xml
那現在我們使用json來完成一次省市聯動，這裏其他代碼都與之前類似，變動如下：
1、首先把jsp導入的js文件變成search_json.js
2、書寫search_json.js
3、書寫Servlet，封裝好json對象並傳遞
Servlet代碼：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.獲取參數並找到城市
int cid = Integer.parseInt(request.getParameter("cid"));
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.FindByCid(cid);
//2.利用Json將list轉爲Json數據
JSONArray ja = JSONArray.fromObject(list);
String json = ja.toString();
//3.設置編碼(Json數據)並返回
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
e.printStackTrace();
}
}
search_json.js：
$(function() {
$("#province").change(function() {
var cid = $(this).val();
$("#city").html("<option value''>---請選擇---");
$.post("SearchCityByJson",{cid:cid},function(data,status){
$(data).each(function(index,c){
$("#city").append("<option value='"+c.id+"'>"+c.cname)
});
},"json");
});
});
注意點：
1、Js中的each遍歷,json中有index,c c爲遍歷的單條信息,index爲索引
2、Js中使用json的post方法必須帶第四個參數,即傳遞數據方式,否則無法識別
HPF-自我總結
js的代碼一開始寫確實不好理解，而且很容易出錯，多寫應該就會好很多了。
其次是關於仿百度提示欄的一個問題，這是我在寫這篇博客的時候突然有的疑惑，也就是爲什麼Servlet將對象傳遞給jsp頁面1，而jsp頁面1的內容會在jsp頁面2顯示出來，我覺得我還是單獨寫一篇博客比較好，到時候會在這裏貼出博客地址。
最後，如果有什麼問題的話歡迎交流，有幫助的話也請支持一下哦！