在web項目開發中，我們經常會使用到ajax，那麼接下來就對其做個總結吧！
1、定義
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。
2、原生ajax
接下來將通過原生的ajax實現動態驗證用戶名是否可用的案例。
（1）在web 工程下創建index.jsp 文件，添加如下HTML元素實現文本框+按鈕的樣式佈局
<%@ page language="java" import="java.util.*" pageEncoding="gbk" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<input οnblur="btn_cl(this)" id="txt"><span id="s1"></span><br>
<input type="button" value="請求" οnclick="">
</body>
</html>
<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function btn_cl(e){
xmlhttp.onreadystatechange=processRequest;
xmlhttp.open("post","ShowMsgSerl?uname="+e.value);
xmlhttp.send();
}
function processRequest(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
if(xmlhttp.responseText=="false"){
document.getElementById("s1").innerHTML="用戶已存在!";
}else{
document.getElementById("s1").innerHTML="用戶名可以使用!";
}
}
}
</script>package edu.zzuli.web.demo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ShowMsgSerl extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("gbk");
PrintWriter out= response.getWriter();
List<String> user=Arrays.asList("zs","ls");
String uname=request.getParameter("uname");
for (String u : user) {
if(u.equals(uname)){
out.print(false);
}
}
}
}
注：
| readyState |
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status |
200: "OK" 404: 未找到頁面 |
3、jquery ajax
將通過jquery的ajax實現動態驗證用戶名是否可用的案例。
（1）在web 工程下添加jquery的依賴文件jquery-1.7.2.min.js，創建index.jsp 文件，添加如下HTML元素實現文本框+按鈕的樣式佈局
<span style="font-size: 18px;"><%@ page language="java" import="java.util.*" pageEncoding="gbk" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body>
<input οnblur="btn_cl(this)" id="txt"><span id="s1"></span><br>
<input type="button" value="請求" οnclick="">
</body>
</html>
</span><pre name="code" class="java"><script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function btn_cl(e){
$.post("ShowMsgSerl",{uname:e.value},function(data){
if(data=="false"){
Document.getElementById("s1").innerHTML="用戶已存在!";
}else{
Document.getElementById("s1").innerHTML="用戶名可以使用!";
}
});
}
</script>（3）創建名爲ShowMsgSerl的servlet文件實現驗證並返回驗證狀態
package edu.zzuli.web.demo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ShowMsgSerl extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("gbk");
PrintWriter out= response.getWriter();
List<String> user=Arrays.asList("zs","ls");
String uname=request.getParameter("uname");
for (String u : user) {
if(u.equals(uname)){
out.print(false);
}
}
}
}
注：
$(selector).post(URL,data,function(data,status,xhr),dataType)
| 參數 | 描述 |
|---|---|
| URL | 必需。規定將請求發送到哪個 URL。 |
| data | 可選。規定連同請求發送到服務器的數據。 |
| function(data,status,xhr) |
可選。規定當請求成功時運行的函數。 額外的參數：
|
| dataType |
可選。規定預期的服務器響應的數據類型。 默認地，jQuery 會智能判斷。 可能的類型：
|
4、區別
JQuery、AJAX都是Javascript的一個框架，JQuery是輕量級的js庫，他所實現的ajax不過是對底層的封裝，實現了它的主旨：WRITE LESS,DO MORE。正因爲的jquery 更容易實現ajax，所以項目開發中更偏向於jquery.
