簡述
網頁局部重新整理功能在web網站上已經屢見不鮮了,如即時新聞資訊,股票資訊等,都需要不斷擷取最新資訊。在傳統的web實作方式中,想要實作類似的效果,必須進行整個頁面的重新整理,在網絡速度受到一定限制的情況下,這種因為一個局部變動而牽動整個頁面的處理方式顯得有些得不償失。Ajax技術的出現很好的解決了這個問題,利用Ajax技術可以實作網頁的局部重新整理,隻更新指定的資料,并不更新其他的資料。本文以 登入案例 來介紹一下ajax的使用。
登入html關鍵代碼
賬号:
密碼:
登入
解析:在傳統的項目中送出表單資料到背景,我們都是使用 form 表單進行的,此時使用ajax技術我們将抛棄以往的form送出方式。
ajax關鍵代碼
$("#btn_login").click(function() {
$.ajax({
url : "login.do",
type : "post",
data : {
username : $("input[name=username]").val(),
password : $("input[name=password]").val()
},
dataType : "json",
success : function(result) {
var flag = result.flag;
if (flag == true) {
alert("密碼正确!");
} else {
alert("密碼錯誤!");
}
}
});
});
解析:使用ajax技術我們需要依靠jQuery,是以在使用ajax的使用我們需要引入jQuery的包
ajax文法特點
url:請求位址
type:傳遞方式(get/post)
data:用來傳遞的資料
success:互動成功後要執行的方法
dataType:ajax接收背景資料的類型
servlet關鍵代碼
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//擷取使用者名和密碼
String username = req.getParameter("username");
String password = req.getParameter("password");
//建立json對象
JSONObject jsonObject = null;
if ("root".equals(username) && "123456".equals(password)) {
jsonObject = new JSONObject("{flag:true}");
} else {
jsonObject = new JSONObject("{flag:false}");
}
//将資料傳回給ajax
resp.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
}
解析:如圖我們将使用者名設定為 root ,密碼設定為123456,如果使用者輸入的跟設定的一緻将提示密碼正确,否則提示密碼錯誤!