`

《研磨struts2》第十四章 对Ajax的支持 之 14.1 Ajax基础

 
阅读更多

14.1  Ajax基础

14.1.1 Ajax概述

Ajax（Asynchronous JavaScript And XML）技术，通常翻译成“异步JavaScript和xml”，它能让应用程序以异步的方式连接到服务器，等待服务器处理后获取返回值，从而实现无需刷新页面就可以与后台通讯的方式。

       Ajax技术其实是一个非常老的技术，2000年左右就已经有了，只不过一直没有得到重视，直到Google把这个技术应用到Gmail和Google Maps里面，其异步的功能特性迅速走红，从而引起业界广泛的关注，得到更多的应用。到了web2.0的时代，Ajax成为了web2.0的核心技术之一。

       Ajax的核心技术包括：

  • XMLHttpRequest对象：用来实现异步通讯的组件对象，是Ajax的核心技术
  • Javascript：Ajax的编程脚本，可以通过Javascript来操作Ajax
  • Dom（Document Object Model）模型：Javascript通过Dom跟页面进行交互
  • XML：可扩展标记语言，用来封装交互的数据

虽然xml是Ajax的核心技术之一，但是完全可以不使用xml，而且现在在实际项目开发中，也大有使用JSON来代替xml的趋势。

14.1.2 XMLHttpRequest对象

这里简单的介绍一下Ajax的这个核心对象的基本用法：

1：如何初始化

要使用XMLHttpRequest对象，首先就是要初始化这个对象，示例代码如下：

 

java代码：
查看复制到剪贴板打印
  1. <script language="javascript">  
  2.     var myReq;    
  3.     function t1(){  
  4.         //对于IE浏览器,第一种方式  
  5.         myReq = new ActiveXObject("Msxml2.XMLHTTP");  
  6.         //对于IE浏览器,第二种方式  
  7.         myReq = new ActiveXObject("Microsoft.XMLHTTP");  
  8.           
  9.         //对于Mozilla浏览器  
  10.         myReq = new XMLHttpRequest();  
  11.     }  
  12. </script>  

2：XMLHttpRequest对象的属性


3：XMLHttpRequest对象的方法


14.1.3 Ajax示例

虽然不详细去讲述Ajax的知识，还是通过一个基本的示例来看看如何使用Ajax技术。更多Ajax的知识，有需要的朋友请参阅相应的Ajax资料。

       使用Ajax来实现一个输入校验的功能，用户填写数据，当光标离开输入框后，自动到后台去校验输入是否正确，并给出相应的提示信息。

1：先来实现后台的功能

       为了演示的简洁性，直接就在jsp里面实现。功能也很简单，就是判断用户的输入是否重复了，如果不重复，提示用户“输入正确”；如果重复了，提示用户“输入不正确，请重新输入”。

后台文件的名称为server.jsp，示例代码如下：

 

java代码：
查看复制到剪贴板打印
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <%@ page import="java.util.*"%>  
  3. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  4. <%  
  5.     String account = request.getParameter("account");  
  6.       
  7.     //准备已经注册的数据,测试使用  
  8.     Set<String> set = new HashSet<String>();  
  9.     set.add("account1");  
  10.     set.add("account2");  
  11.     set.add("account3");  
  12.       
  13.     if(set.contains(account)){  
  14.         out.print("输入不正确，请重新输入");  
  15.     }else{  
  16.         out.print("输入正确");  
  17.     }         
  18. %>  

2：实现前台页面的功能

       在页面上除了简单的输入框之外，就是要实现Ajax的功能，当帐号信息输入完毕，光标离开的时候，提交到后台进行校验。

文件的名称为client.jsp，示例代码如下：

 

java代码：
查看复制到剪贴板打印
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <script language="javascript">  
  4.     var myRequest;  
  5.     function t1(){  
  6.         //准备向后台传输的数据  
  7.         var account = document.getElementById("account").value;   
  8.         //Ajax  
  9.         myRequest = new ActiveXObject("Msxml2.XMLHTTP");  
  10.         myRequest.onreadystatechange = t2;  
  11.         myRequest.open("GET","server.jsp?account="+account,true);  
  12.         myRequest.send(null);  
  13.     }     
  14.     function t2(){  
  15.         if(myRequest.readyState==4){  
  16.             var ret = myRequest.responseText;             
  17.             //后续处理  
  18.             document.all("myDiv").innerHTML = ret;    
  19.         }  
  20.     }     
  21. </script>  
  22. <form action="" medhot="post">  
  23.     <table>  
  24.         <tr>  
  25.             <td colspan=3 align=center>新用户注册</td>  
  26.         </tr>  
  27.         <tr>  
  28.             <td>用户帐号：</td>  
  29.             <td><input type="text" id="account" name="account" onblur="t1();"><font color=red>*</font></td>  
  30.             <td><div id="myDiv"></div></td>  
  31.         </tr>  
  32.         <tr>  
  33.             <td>用户密码：</td>  
  34.             <td colspan=2><input type="password" id=""password" name="password"></td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>重复密码：</td>  
  38.             <td colspan=2><input type="password" id=""password2" name="password2"></td>  
  39.         </tr>  
  40.         <tr>  
  41.             <td colspan=3 align=center><input type="submit" value="保存注册信息"></td>  
  42.         </tr>  
  43.     </table>  
  44. </form>  

3：运行测试一下

       先输入一个正确的，运行结果如下：

图14.1  Ajax示例一

再来输入一个重复的，比如“account1”之类的，运行结果如下：

图14.2  Ajax示例二

通过上面的示例，大家可以初步体会一下Ajax实现的方式，以及无需刷新页面即可与后台交互的实现。

 

私塾在线网站原创《研磨struts2》系列

转自请注明出处：【http://sishuok.com/forum/blogPost/list/0/4128.html】

欢迎访问http://sishuok.com获取更多内容

3
顶
1
踩
分享到：
| 《研磨struts2》第十三章 文件上传下载 ...
评论
1 楼 changingSelf 2012-06-02  
你好，有没有关于jquery的示例，老说好用，但就是不怎么理解
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    研磨Struts2配书视频对应的演示源代码

    这个压缩包中的“研磨Struts2配书视频对应的演示源代码”是《研磨Struts2》一书作者为了帮助读者更好地理解和实践书中理论知识而提供的实际示例代码。 首先，让我们深入理解Struts2的核心概念和技术特性： 1. **...

    研磨Struts2

    ### 知识点一：Struts2入门（MVC HelloWorld） #### 1.1 Struts2简介 ...以上就是关于“研磨Struts2”的主要知识点梳理，通过深入学习这些内容，开发者可以更好地掌握Struts2框架的核心技术和实践技巧。

    研磨struts2 高清版

    由于文件较大，我把这个文档切割为2部分，这是第一部分，请下载完第一部分后一定要下载第二部分，否则不能阅读。

    《研磨Struts 2》PDF版本下载.txt

    根据提供的文件信息，我们可以推断出这是一份关于《研磨Struts 2》书籍PDF版本的下载资源。为了更好地理解和概括这份资料所涉及的知识点，我们先来了解一下Struts 2框架及其重要性，然后深入探讨《研磨Struts 2》这...

    研磨Struts2配书视频对应的PPT

    《研磨Struts2》这本书是专门针对Struts2框架的学习指南，通过深入浅出的方式讲解了Struts2的核心概念和技术。其配套的PPT和视频旨在帮助读者更直观地理解书中的理论知识，并将其付诸实践。 在研读《研磨Struts2》...

    研磨Struts2 高清完整版.part2

    研磨Struts2 高清完整版，请和第一部分一起下载啊

    研磨struts

    《研磨Struts2》这本书主要介绍了Struts2的基础知识、实践应用以及其核心概念。 1. **MVC模式**：MVC是一种设计模式，用于分离应用程序的业务逻辑、数据和用户界面。在Struts2中，Action类代表Controller，负责处理...

    研磨Struts2_12859679_高清完整版.part2.rar

    研磨Struts2_12859679_高清完整版

    研磨Struts2-高清-完整目录-2011年10月

    研磨Struts2-高清-完整目录-2011年10月，分享给所有需要的人

    研磨设计模式(完整带书签).part2.pdf

    第14章 迭代器模式（Iterator） 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式（State） 第19章 备忘录模式（Memento） 第20章 享元模式...

    研磨设计模式-part2

    第14章 迭代器模式（Iterator） 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式（State） 第19章 备忘录模式（Memento） 第20章 享元模式...

    研磨设计模式(完整带书签).part1.pdf

    第14章 迭代器模式（Iterator） 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式（State） 第19章 备忘录模式（Memento） 第20章 享元模式...

    研磨设计模式.part2（共4个）

    第14章 迭代器模式（Iterator） 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式（State） 第19章 备忘录模式（Memento） 第20章 享元...

    研磨设计模式.part2

    研磨设计模式.part2 一定要下载5部分

Magicbox
Global site tag (gtag.js) - Google Analytics