`
chenlh
  • 浏览: 40183 次
  • 性别: Icon_minigender_1
  • 来自: 福建
文章分类
社区版块
存档分类
最新评论

史上最简单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");
    }
}

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


 

分享到:
评论
7 楼 qinglintan 2010-02-26  
有兴趣到我哪看看ajax入门吧
6 楼 xici_magic 2009-10-18  
图片看不到了  我以前学的时候第一个好像和这个也很相似
5 楼 duben 2009-10-16  


我也是这样学过来的,第一例子也是这个。



4 楼 iaimstar 2009-09-21  
看楼主表情对人世间还有依恋啊
3 楼 Emiya_wang 2009-09-21  
这个应该算是简单的了 
我也是拿验证用户名开始学习AJAX的
呵呵
2 楼 若水上善 2009-09-21  
iframe不是所有的浏览器都支持的。
1 楼 shuaijie506 2009-09-18  
这还简单?最简单的是用隐藏IFRAME做数据异步提交和验证!

相关推荐

    ajax一个最简单的例子

    本教程将通过一个最简单的Ajax例子,让你深入理解其工作原理和优势。 ### 1. Ajax基本概念 - **异步通信**:Ajax的核心是浏览器内置的`XMLHttpRequest`对象,它允许JavaScript向服务器发送异步HTTP请求,即在不...

    史上最简单的JQ图片切换

    【史上最简单的JQ图片切换】是一个使用jQuery库实现的简易图片轮播插件。这个解决方案以其简洁和易于理解的特点,适合初学者学习和快速应用到项目中。在压缩包文件中,你将找到所有必要的资源,包括HTML、CSS和...

    asp.net ajax 无刷新评论

    在这个“史上最简单AJAX实现无刷新评论例子”中,我们将探讨如何利用ASP.NET AJAX来创建一个交互性强、用户体验良好的评论系统。 一、ASP.NET AJAX基础 ASP.NET AJAX的核心组件是Microsoft ASP.NET AJAX库,它包含...

    ssm框架简单整合增删改查+jq,ajax下拉框+二级省市联动

    在这里,jQuery与Ajax结合,用于处理用户交互,如触发Ajax请求,以及在页面上动态显示和隐藏元素。 7. **下拉框联动**:省市联动通常指的是在选择一个省后,下拉框自动加载该省下的城市列表。这需要前端利用Ajax向...

    JSP动态时间

    实现"史上最简单的全日制动态时间显示",我们需要利用JSP内置的对象和动作来完成。首先,JSP提供了一个名为`pageContext`的对象,通过它可以获取到Servlet上下文,进而访问到服务器的系统时间。此外,我们还需要了解...

Global site tag (gtag.js) - Google Analytics