ajax实例1

来源：互联网发布：java判断请求的浏览器编辑：程序博客网时间：2024/05/21 13:23

该实例是测试一个登陆框中的用户名是否已存在

1.客户端脚本

<!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>Insert title here</title><script type="text/javascript">var xhr;//全局变量function fn(){//1.创建XMLHttpRequest对象（AJAX精灵对象）createXHR();//2.声明回调函数(当发生什么情况，调用什么方法)xhr.onreadystatechange=deal;//3.打开连接（以什么方式打开什么资源）//var url="http://www.baidu.com";var url="validate?username="+document.getElementById("username").value;xhr.open("GET",url,true);//第三个参数为true或者不写，表示异步发出请求//4.发送请求xhr.send(null);}//创建XMLHttpRequest对象function createXHR(){if(window.ActiveXObject){//是IE浏览器 xhr=new ActiveXObject("Microsoft.XMLHTTP"); alert("IE:"+xhr);}else if(window.XMLHttpRequest){//非IE浏览器 xhr=new XMLHttpRequest(); alert("非IE:"+xhr);}}//回调函数function deal(){//alert("请求状态值:"+xhr.readyState);if(xhr.readyState==4){//浏览器请求完成if(xhr.status==200){//服务器的HTTP状态码为200//得到服务器的响应内容var result=xhr.responseText;//alert("服务器响应内容："+result);document.getElementById("show").innerText=result;}}}</script></head><body><form method="post" action="validate">用户名：<input type="text" name="username" id="username" onblur="fn()"><span id="show" style="color:red"></span><br>密码：<input type="password" name="password"><br><input type="submit" name="username" value="提交"><input type="button" value="AJAX验证" onclick="fn()"></form></body></html>

2.服务器端的java代码

package com.wepull.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;public class ValidateServlet extends HttpServlet {/** * Constructor of the object. */public ValidateServlet() {super();}/** * Destruction of the servlet. <br> */public void destroy() {super.destroy(); // Just puts "destroy" string in log// Put your code here}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("utf-8");String username=request.getParameter("username");String password=request.getParameter("password");PrintWriter out=response.getWriter();if(username!=null && !"".equals(username)){if("wepull".equals(username)){out.println("用户名已存在");}else{out.println("可以注册");}}}public void init() throws ServletException {// Put your code here}}

3.在web.xml里配置相应的servlet

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  <servlet>    <display-name>This is the display name of my J2EE component</display-name>    <servlet-name>ValidateServlet</servlet-name>    <servlet-class>com.wepull.ajax.ValidateServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>ValidateServlet</servlet-name>    <url-pattern>/validate</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

4.部署工程并测试