標籤：
Ajax的核心是XMLHttpRequest對象
所有現代瀏覽器均支援 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在後台與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，
對網頁的某部分進行更新。
例如：通過Ajax的非同步重新整理簡單驗證使用者名稱的可用性
前端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>註冊Ajax驗證</title><script type="text/javascript"> function cheackUserName() { var userName=document.getElementById("userName").value;
//建立XMLHttpRequest對象：
var xmlhttp；
if(window.XMLHttpRequest)
{//相容IE7+，Firefox,Chrom,Opera,Safari
xmlhttp = new XMLHttpRequest();
}else{//IE5,IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){ alert(xmlHttp.responseText); var dataObj = eval("("+xmlHttp.responseText+")"); if(dataObj.exist){ document.getElementById("tip").innerHTML="該使用者已經存在！"; }else{ document.getElementById("tip").innerHTML="該使用者可用！"; } } };
//向伺服器發送請求：
//使用XMLHttpRequest對象的open()和send()方法
xmlHttp.open("get","getInfo?action=cheackUserName&userName="+userName,true); xmlHttp.send(); }</script></head><body><table><tr> <th>使用者註冊</th></tr><tr> <td>使用者名稱：</td> <td><input type="text" id="userName" name="userName" onblur="cheackUserName()"/> <font id="tip"></font></td></tr><tr> <td>密碼：</td> <td><input type="text" id="password" name="password"></td></tr><tr> <td>確認密碼：</td> <td><input type="text" id="password2" name="password2"></td></tr><tr> <td><input type="submit" value="註冊"/></td> <td><input type="reset" value="重設"/></td></tr></table></body></html>
在tomcat伺服器中建立一個Servlet類比對使用者名稱的接收以及驗證：
引入Json需要的jar包：commons-beanutils-1.7.0.jar commons-lang-2.4.jar json-lib-2.2.3-jdk15.jar
commons-collections-3.2.jar commons-logging-1.0.4.jar ezmorph-1.0.3.jar
package com.cong.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;public class GetInfo extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); PrintWriter out=response.getWriter(); String userName=request.getParameter("userName"); //接收瀏覽器傳過來的資料 JSONObject resultJson=new JSONObject(); //建立JSONObject對象，引入必要的jar包 if("Hello".equals(userName)){ resultJson.put("exist", true); }else { resultJson.put("exist", false); } out.println(resultJson); out.flush(); out.close(); }}
在web.xml中配置Servlet：
<servlet> <servlet-name>getInfo</servlet-name> <servlet-class>com.cong.ajax.GetInfo</servlet-class> </servlet> <servlet-mapping> <servlet-name>getInfo</servlet-name> <url-pattern>/getInfo</url-pattern> </servlet-mapping>
Ajax簡單使用者的註冊驗證
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
