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一样。在解析请求参数后,servlet执行必需的应用逻辑,将响应序列化到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;

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页面:
<html>
<head>
<title>AJAX.html</title>
</head>
<script type="text/javascript">

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

function getResult(){ 

var url = "/Test/ajaxServlet?action=send";

 if (window.XMLHttpRequest) { 

    req = new XMLHttpRequest();  

 }else if (window.ActiveXObject){    

 req = new ActiveXObject("Microsoft.XMLHTTP");   }  

 if(req){     

    req.open("GET",url, true);     

    req.onreadystatechange = complete;   

    req.send(null); 

  } }

 /*分析返回的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 onLoad="getResult()">
<table width="80%" border="0" cellspacing="0" cellpadding="0">

<tr><td id="td">&nbsp;</td></tr>

</table>

</body>


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/cdtdx/archive/2007/01/24/1492544.aspx 

三、web.xml文件

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">

<servlet>
<servlet-name>ajaxServlet</servlet-name>
<servlet-class>com.ajaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>
</web-app>


四、运行图:
 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值