AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML),AJAX 不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的 Web 應用程序的技術。
Ajax的核心是JavaScript對象XmlHttpRequest。通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通信。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換數據(也就是說主要結合HTML5,JS和服務器達到頁面的局部刷新的技術)。AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。
以下代碼是用戶註冊與AJAX的運用.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用戶註冊頁面</title>
<script type="text/javascript">
function senduser(){ //用戶名的AJax驗證
var userinput=document.getElementById("username");
var xmlHttp=false;
//IE獲取XMLHttpRequest對象
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//非IE瀏覽器獲取XMLHttpRequest對象
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange=function(){//當服務器返回消息(響應)時觸發該事件
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var text=xmlHttp.responseText;
document.getElementById("userlabel").innerHTML=text;
}
}
xmlHttp.open("post", "ValidateServlet",true);//打開連接
//如果是get提交,則打開連接和發送請求是如下兩行代碼
//xmlHttp.open("get","ValidateServlet?username="+userinput.value,"true");
//xmlHttp.send(null);
//如果是POST提交，必須加入下面的請求頭纔可以傳遞參數到服務器.
//設置請求頭一定要放在打開連接之後進行
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+userinput.value);//發送請求
}
function sendcode(){//隨即驗證碼的Ajax驗證
var codeinput=document.getElementById("yanzhengma");
var xmlHttp=false;
//IE獲取XMLHttpRequest對象
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//非IE瀏覽器獲取XMLHttpRequest對象
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var codetext=xmlHttp.responseText;
document.getElementById("codelabel").innerHTML=codetext;
}
}
xmlHttp.open("post", "CodeValidateServlet",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("yanzhengma="+codeinput.value);
}
function changeCode(){//隨即驗證碼的產生
document.getElementById("codimg").src="RandomCodeServlet?"+Math.random();
}
function checkpwd(){
var pwd1=document.getElementById("password1");
var pwd2=document.getElementById("password2");
if(pwd1.value !=pwd2.value){
document.getElementById("pwdlabel").innerHTML="兩次輸入的密碼不一致,請重新輸入!";
}
}
</script>
</head>
<body>
<form action="RigestServlet" method="post">
<p>用戶名:<input type="text" id="username" name="username" onblur="senduser()"/><label id="userlabel"></label></p>
<p>密碼:<input type="password" id="password1" name="password"/></p>
<p>確認密碼:<input type="password" id="password2" onblur="checkpwd()"/><label id="pwdlabel"></label></p>
<p>電子郵件:<input type="text" id="email" name="email"/></p>
<p>驗證碼:<input type="text" id="yanzhengma" onblur="sendcode()" name="yanzhengma" /><img src="RandomCodeServlet" id="codimg" />
<a href="#" onclick="changeCode()">看不清換一張</a><label id="codelabel"></label>
</p>
<p><input type="submit" value="註冊 " /></p>
</form>
</body>
</html>
public
class ValidateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ValidateServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;cahrset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
String useninput=request.getParameter("username");
if("abc".equals(useninput)){
out.print("this username is exites!");
}
else{
out.print("rigester");
}
out.flush();
out.close();
}
}
隨機碼的產生代碼和隨即驗證碼的Ajax驗證所請求的服務器代碼略.
public
class RigestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RigestServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;cahrset=utf-8");
request.setCharacterEncoding("utf-8");
String yanzhegnma=request.getParameter("yanzhengma");
HttpSession session=request.getSession();
String randcode=(String) session.getAttribute("codes");
if(yanzhegnma.equalsIgnoreCase(randcode)){
String userinput=request.getParameter("username");
String password=request.getParameter("password");
String email=request.getParameter("email");
UserBean bean=new UserBean();
bean.setUsername(userinput);
bean.setPwd(password);
bean.setEmail(email);
MyService service=new MyService();
service.adduserinfo(bean);
request.getRequestDispatcher("/success.jsp").forward(request, response);
}
}
}