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="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/CSS" 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>
新闻热点
疑难解答
