Ajax技术一例

来源：互联网发布：胭脂扣如花知乎编辑：程序博客网时间：2024/05/24 06:29

Ajax（Asynchronous JavaScript and XML）是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

下面是使用Ajax可以完成的功能：

动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

实例

以下是我所写的一个简单的例子:

ajaxServlet.java程序清单:

package com;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/*

*------------------------------------------------------

* 文件名: ajaxServlet.java

* 创建日期: 2005-10-25

* 原作者: miaohai

* 版权所有: miaohai

* 功能说明: 生成XML文档

*

* 修改记录:N/A

*------------------------------------------------------

*/

public class ajaxServlet

extends HttpServlet

{

private static final String CONTENT_TYPE="text/xml; charset=gb2312";

public void init()

throws ServletException

{

}

public void doGet(HttpServletRequest request,

HttpServletResponse response)

throws ServletException,IOException

{

response.setContentType(CONTENT_TYPE);

PrintWriter out=response.getWriter();

String action=request.getParameter("action");

if(("send").equals(action))

{

StringBuffer sb=new StringBuffer("<type>");

sb.append("<type_name>AA</type_name>");

sb.append("<type_name>BB</type_name>");

sb.append("<type_name>CC</type_name>");

sb.append("<type_name>DD</type_name>");

sb.append("</type>");

out.write(sb.toString());

out.close();

}

}

}

html页面:

/*通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档*/

/*分析返回的XML文档*/

function complete()

{

if (req.readyState == 4)

{

if (req.status == 200)

{

var type = req.responseXML.getElementsByTagName("type_name");

var str=new Array();

for(var i=0;i<type.length;i++)

{

str[i]=type[i].firstChild.data;

document.all['td'].innerHTML+=str[i]+"<BR>";

}

}

}

}

</script>

<body onLoad="getResult()">

<table width="80%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td id="td"> </td>

</tr>

</table>

</body>