Ajax实例及简要说明

2022-07-15 80酷酷网 80kuku.com

　　ajax

Ajax

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

Ajax处理过程

一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的响应Ajax处理过程中的第一步是创建一个XMLHttpRequest实例使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上

现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在响应真正到达后处理它们要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求控制权马上就被返回到浏览器，当响应到达时，回调函数将会被调用

在Java Web上，到达的请求与任何其它HttpServletRequest一样在解析请求参数后，执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse

实例

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

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]+"
";

}

}

}

}

</script>

<body >

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

<tr>

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

</tr>

</table>

</body>