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代码:
- <script language="javascript">
- var myReq;
- function t1(){
-
- myReq = new ActiveXObject("Msxml2.XMLHTTP");
-
- myReq = new ActiveXObject("Microsoft.XMLHTTP");
-
-
- myReq = new XMLHttpRequest();
- }
- </script>
2:XMLHttpRequest对象的属性
3:XMLHttpRequest对象的方法
14.1.3 Ajax示例
虽然不详细去讲述Ajax的知识,还是通过一个基本的示例来看看如何使用Ajax技术。更多Ajax的知识,有需要的朋友请参阅相应的Ajax资料。
使用Ajax来实现一个输入校验的功能,用户填写数据,当光标离开输入框后,自动到后台去校验输入是否正确,并给出相应的提示信息。
1:先来实现后台的功能
为了演示的简洁性,直接就在jsp里面实现。功能也很简单,就是判断用户的输入是否重复了,如果不重复,提示用户“输入正确”;如果重复了,提示用户“输入不正确,请重新输入”。
后台文件的名称为server.jsp,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <%@ page import="java.util.*"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%
- String account = request.getParameter("account");
-
-
- Set<String> set = new HashSet<String>();
- set.add("account1");
- set.add("account2");
- set.add("account3");
-
- if(set.contains(account)){
- out.print("输入不正确,请重新输入");
- }else{
- out.print("输入正确");
- }
- %>
2:实现前台页面的功能
在页面上除了简单的输入框之外,就是要实现Ajax的功能,当帐号信息输入完毕,光标离开的时候,提交到后台进行校验。
文件的名称为client.jsp,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <script language="javascript">
- var myRequest;
- function t1(){
-
- var account = document.getElementById("account").value;
-
- myRequest = new ActiveXObject("Msxml2.XMLHTTP");
- myRequest.onreadystatechange = t2;
- myRequest.open("GET","server.jsp?account="+account,true);
- myRequest.send(null);
- }
- function t2(){
- if(myRequest.readyState==4){
- var ret = myRequest.responseText;
-
- document.all("myDiv").innerHTML = ret;
- }
- }
- </script>
- <form action="" medhot="post">
- <table>
- <tr>
- <td colspan=3 align=center>新用户注册</td>
- </tr>
- <tr>
- <td>用户帐号:</td>
- <td><input type="text" id="account" name="account" onblur="t1();"><font color=red>*</font></td>
- <td><div id="myDiv"></div></td>
- </tr>
- <tr>
- <td>用户密码:</td>
- <td colspan=2><input type="password" id=""password" name="password"></td>
- </tr>
- <tr>
- <td>重复密码:</td>
- <td colspan=2><input type="password" id=""password2" name="password2"></td>
- </tr>
- <tr>
- <td colspan=3 align=center><input type="submit" value="保存注册信息"></td>
- </tr>
- </table>
- </form>
3:运行测试一下
先输入一个正确的,运行结果如下:
图14.1 Ajax示例一
再来输入一个重复的,比如“account1”之类的,运行结果如下:
图14.2 Ajax示例二
通过上面的示例,大家可以初步体会一下Ajax实现的方式,以及无需刷新页面即可与后台交互的实现。
私塾在线网站原创《研磨struts2》系列
转自请注明出处:【http://sishuok.com/forum/blogPost/list/0/4128.html】
欢迎访问http://sishuok.com获取更多内容
分享到:
相关推荐
这个压缩包中的“研磨Struts2配书视频对应的演示源代码”是《研磨Struts2》一书作者为了帮助读者更好地理解和实践书中理论知识而提供的实际示例代码。 首先,让我们深入理解Struts2的核心概念和技术特性: 1. **...
### 知识点一:Struts2入门(MVC HelloWorld) #### 1.1 Struts2简介 ...以上就是关于“研磨Struts2”的主要知识点梳理,通过深入学习这些内容,开发者可以更好地掌握Struts2框架的核心技术和实践技巧。
由于文件较大,我把这个文档切割为2部分,这是第一部分,请下载完第一部分后一定要下载第二部分,否则不能阅读。
#### Struts2 基础 **Struts2** 作为 **Struts1** 的下一代产品,在很多方面进行了改进,例如支持拦截器、动态方法调用、文件上传下载等。其核心组件包括: - **Action**:控制器组件,用于处理具体的业务逻辑。 -...
根据提供的文件信息,我们可以推断出这是一份关于《研磨Struts 2》书籍PDF版本的下载资源。为了更好地理解和概括这份资料所涉及的知识点,我们先来了解一下Struts 2框架及其重要性,然后深入探讨《研磨Struts 2》这...
《研磨Struts2》这本书是专门针对Struts2框架的学习指南,通过深入浅出的方式讲解了Struts2的核心概念和技术。其配套的PPT和视频旨在帮助读者更直观地理解书中的理论知识,并将其付诸实践。 在研读《研磨Struts2》...
从给定的文件信息来看,这是一份关于Struts2框架深入解析的系列文章,涵盖了Struts2的基础、架构、核心组件、高级特性等多个方面,旨在帮助读者全面掌握Struts2框架的应用与实践。以下是对该系列文章所涵盖的关键...
研磨Struts2 高清完整版,请和第一部分一起下载啊
《研磨Struts2》这本书主要介绍了Struts2的基础知识、实践应用以及其核心概念。 1. **MVC模式**:MVC是一种设计模式,用于分离应用程序的业务逻辑、数据和用户界面。在Struts2中,Action类代表Controller,负责处理...
研磨Struts2_12859679_高清完整版
研磨Struts2-高清-完整目录-2011年10月,分享给所有需要的人
第14章 迭代器模式(Iterator) 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式(State) 第19章 备忘录模式(Memento) 第20章 享元模式...
第14章 迭代器模式(Iterator) 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式(State) 第19章 备忘录模式(Memento) 第20章 享元模式...
第14章 迭代器模式(Iterator) 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式(State) 第19章 备忘录模式(Memento) 第20章 享元模式...
第14章 迭代器模式(Iterator) 第15章 组合模式(Composite) 第16章 模板方法模式(Template Method) 第17章 策略模式(Strategy) 第18章 状态模式(State) 第19章 备忘录模式(Memento) 第20章 享元...
研磨设计模式.part2 一定要下载5部分