Ajax是一項很重要的技術,下面簡要舉個例子，來解釋如何使用Ajax。步驟如下：使用Ajax驗證用戶名使用文本框的onBlur事件
使用Ajax技術實現異步交互創建xmlHttPRequest對象通過 xmlhttpRequest對象設置請求信息向服務器發送請求創建回調函數，根據響應狀態動態更新頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%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>異步驗證用戶名</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="descrCSS" href="styles.css"> --> </head> <body> <table> <tr> <td>用戶名：</td> <td><input type="text" name="username" id="name" onblur="change()"/></td> <td><span style="display: none;color: red" id="span"></span></td> </tr> <tr> <td>密碼</td> <td><input type="password" name="pwd" id="password" /></td> </tr> <tr> <td><input type="button" value="提交" onclick="change()"></td> </tr> </table> </body> <script type="text/Javascript"> //使用異步刷新技術實現驗證用戶名 //聲明全局對象 var xmlhttp; //第一步：創建ck對象 function ck(){ if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest; }else if(window.ActiveObject){ xmlhttp=new ActiveObject("Microsoft.XMLHTTP") } } //第二步：響應鼠標事件 function change(){ //獲取用戶名 var username=document.getElementById("name"); var password = document.getElementById("password"); if(!username.value){ alert("用戶名不能為空"); }else if(!password.value){ alert("密碼不能為空！！！") }else{ //請求異步刷新;以請求地址作為參數傳遞 doAjax("select/doselect?username="+username.value+"password="+password.value); } } //第三步：獲取URL function doAjax(url){ //初始化ck; ck(); //判斷對象是否初始化成功 if(xmlhttp!=null){ //如果不為空，則說明初始化成功 //開始請求服務器 xmlhttp.open("post",url,true);//初始化請求參數 xmlhttp.onreadystatechange=ok;//指定回調函數 xmlhttp.send(null); }else{ alert("xmlhttp初始化失敗！！！"); } } //指定回調函數 function ok(){ //判斷響應狀態 if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ chuli(xmlhttp.responseText); } } } function chuli(status){ var span=document.getElementById("span"); span.innerHTML=status; span.style.display="block"; } </script></html>
JAVA代碼Servlet語法：
javapackage select;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;public class doselect extends HttpServlet { /** * Constructor of the object. */ public doselect() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("請求正常"); String[] user = new String[]{"胖胖","薇薇","黃鼠狼","李四"}; String status = "用戶名可以使用！";//狀態：如果為0則表示該用戶名不存在；否則用戶名已占用 //得到請求參數 String name = request.getParameter("username"); name = new String(name.getBytes("ISO-8859-1"),"GBK"); for (int i = 0; i < user.length; i++) { if(name.equals(user[i])){ status = "用戶名已存在!"; } } //將信息返回客戶端 response.setContentType("text/html"); response.setCharacterEncoding("GBK"); PrintWriter out = response.getWriter(); out.println(status); out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here 在Java_Web項目的xml文檔配置具體路徑
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>doselect</servlet-name> <servlet-class>select.doselect</servlet-class> </servlet> <servlet-mapping> <servlet-name>doselect</servlet-name> <url-pattern>/select/doselect</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>
新聞熱點
疑難解答
