史上最简单AJAX例子 -

chenlh

浏览: 39540 次
性别:
来自: 福建

最近访客更多访客>>

flatychen

hanzongbo108

splayhuo

sky_xin

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (17)

社区版块

存档分类

史上最简单AJAX例子

Ajax Servlet JavaScript XML 应用服务器

此篇也是

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。国内通常的读音为“阿贾克斯”。
    下面是一个最简单的AJAX验证用户名是否存在的例子。

     JSP页面
<%@ page language="java"  pageEncoding="utf-8"%>
<script type="text/javascript" language="javascript">
    //下面这个不理解没关系，反正就是为了不同的浏览器创建不同的XMLHttpRequest对象,照抄
    function createXmlHttpRequest()
    {
   var xmlreq = false;
   if (window.XMLHttpRequest) {
    xmlreq = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
     try {                              //创建较新版本的对象
       xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e1) {
       try {
         xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e2) {
       }
     }
   }
   return xmlreq;
   }

   function userNameCheck()
  {
      var username = document.all.username.value;//获得text的值
      var request = createXmlHttpRequest();//创建request 对象
      request.open("post","user.do?username="+username);//建立到服务器的新请求
      request.send();//向服务器发送请求
      request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄
      {
          if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示：响应已完成，可以访问服务器响应并使用它
             if (request.status==200)//HTTP状态,我们期望的状态码是 200，它表示一切顺利。
             //如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据
                {
                   var value = request.responseText;//服务器返回响应文本

                   if (value=="true")
                   {
                       document.all.unc.innerHTML="该用户名已存在";
                   }
                   else
                   {
                        document.all.unc.innerHTML="OK";
                   }
                }
      }

  }
</script>
<html>
  <head>
       <title>AjaxTest</title>
  </head>

  <body>
   用户姓名： <input type="text" name="username" onblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font>
  </body>
</html>
web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
http://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee"
xmlns:http://www.w3.org/2001/XMLSchema-instance">http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLhttp://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
  <servlet-name>user</servlet-name>
  <servlet-class>chenlh.UserAction</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>user</servlet-name>
  <url-pattern>/user.do</url-pattern>
  </servlet-mapping>
</web-app>

servlet

package chenlh;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserAction extends HttpServlet{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        this.doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String username=request.getParameter("username");
        if(username.equals("chenlh"))
         response.getWriter().print("true");
     else
      response.getWriter().print("false");
    }
}

结果(当输入用户名后，鼠标移出输入框)