Ajax专栏

最新推荐文章于 2024-07-24 11:09:48 发布

juanzi11

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量823

点赞数

分类专栏：征服Ajax 文章标签： ajax javascript xmlhttprequest dwr ajax框架 autocomplete

本文链接：https://blog.csdn.net/juanzi11/article/details/1593565

版权

征服Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【原创】教你入门ajax：一个简单的ajax例子

响应此篇文章
引言响应

1． Ajax是什么？
Ajax是 Asynchronous JavaScript And Xml 的简称，即：异步javascript和xml技术的结合体。Ajax并不是一种新的技术，它是由Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest多种技术综合而成。其中，使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。
2. Ajax工作的原理
传统的web应用使用的是request/response经典同步模式，由客户端发起请求，服务器接收到请求后对请求中的数据进行解析并处理，然后将处理后的数据通过response返回给页面显示逻辑，显示逻辑拿到结果数据以后将结果以结果页面的方式展示给最终用户。通常客户端发起请求后必须等待回应。如下图所示：
图
使用Ajax技术后，客户端虽然同样使用request/response模型，但这个时候请求和回应是异步处理的，客户端在发出请求以后不必等待结果回来就可以接着发出其它的请求，等刚才发起的请求有了回应之后，会自动地进行页面返回。其工作过程如下图所示：
图
3． Java语言中使用的Ajax框架汇总
3.1 WebORB for Java
WebORB for Java( http://www.themidnightcoders.com/weborb/aboutWeborb.htm)是一个开发AJAX和基于Flash的富客户端应用程序的开发平台。在线例子(http://www.themidnightcoders.com/examples )
? WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何Java对象、XML Web Services和EJB
? 支持异步或同步的事件驱动
? 不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。
? 同步调用不需要回调，异步调用需要一个回调方法。
? 客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。
? 提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。
? 支持数据分页技术。客户应用程序能检索页面中的数据。
? 支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references
? 目前有两个版本：标准版(免费)，专业版(商业许可)
3.2 Echo 2
Echo 2( http://www.nextapp.com/products/echo2/ )允许你用纯Java语言编写AJAX程序。
? 自动生成HTML和Javascript代码
? 用XML在客户端-服务端传递消息
? 如果愿意支持自定义Javascript组件
? 开源协议(Mozilla Public License or GNU LGPL)
3.3 Direct Web Remoting (DWR)
Direct Web Remoting( http://www.getahead.ltd.uk/dwr/ )可以在Javascript代码中直接调用Java方法的应用框架
? 类似于SAJAX，可以把Javascript中的请求调用转递到Java方法中并将执行结果返回给Javascript
? 可以和任何Web框架一起使用，如Struts、Tapestry等等
? 开源(Apache)，目前该产品被加入到WebWork中。
3.4 AJAX JSP Tag Library
The AJAX JSP Tag Library( http://ajaxtags.sourceforge.net/ )是一组JSP标签库，用来AJAX程序开发。可以在J2EE下无需Javascript就能轻松开发AJAX模式的Web Form。标签库为比较通用的AJAX功能提供了5个标签：
? autocomplete: 用户在文本框中输入字符，自动从指定的数据中匹配用户输入的字符，类似于Google Suggest
? callout:可以为A标签加入气泡式的消息提示框，不过是实时的服务端取出数据
? Select/dropdown:类似于联动菜单，比如地州市的联动下拉框
? toggle:开关闸按钮，比如在一个hidden表单域中存储true和falsh，同时显示相应的img图像
? update field:更新数据，也就是无刷新提交了。
3.5 AJAX Java Server Faces Framework
The AJAX-JSF( http://smirnov.org.ru/en/ajax-jsf.html )用来把任意的JSF应用程序转变为AJAX应用程序
? 例子：AJAX组件的 MyFaces JSF Tree(树型目录), table scroller(可滚动的表格), tabbed pane(分页栏)
? 开源协议(Apache Software License)
4.我的第一个Ajax例子-Hello Ajax!
上述的Ajax框架中DWR是一种比较优秀的成熟产品，所以在这里我们使用DWR来开发我们的第一个Ajax例子Hello Ajax。
4.1 下载DWR工具包
从DWR网站上下载工具包： http://getahead.ltd.uk/dwr/download
4.2 安装工具包
将dwr.jar文件拷贝到web应用的WEB-INF/lib目录下。
4.3修改 web.xml文件增加DWR功能

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <display-name>DWR Servlet</display-name>
  <servlet-class>
    org.directwebremoting.servlet.DwrServlet
  </servlet-class>
  <init-param>
    <param-name>debug</param-name>
    <param-value>true</param-value>
  </init-param>
</servlet>

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
注：如果应用正式运行的时候要把debug开关置成false。
4.4 编辑DWR配置文件dwr.xml

<dwr>
  <allow>
    <create creator="new“
      javascript="HelloWorld" scope="page">
      <param name="class"
        value="com.ben.ajax.HelloWorld" />
    </create>
  </allow>
</dwr>

4.5编写HelloWorld.java文件

package com.ben.ajax;

public class HelloWorld {
  public String sayHelloWorldTo(String name) {
    return "Hello World " + name + "!";
  }
}

4.6编写jsp文件

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<script type='text/javascript'
	src='/dwr-helloworld/dwr/interface/HelloWorld.js'></script>
<script type='text/javascript' src='/dwr-helloworld/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr-helloworld/dwr/util.js'></script>
<script type="text/javascript">
window.onload = function() {
	HelloWorld.sayHelloWorldTo("This is an ajax sample", function(returnStr) {
		$('output').innerHTML = returnStr;
	});
}
</script>
</head>

<body>
<h2 id="output"></h2>
</body>
</html>