史上最简单AJAX例子(转)

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"); 
    } 

 

转自:http://devbbs.doit.com.cn/thread-27358-1-1.html

posted @ 2012-06-30 22:01  hdu2012  阅读(203)  评论(0编辑  收藏  举报