现在的位置: 首页 > 综合 > 正文

Ajax简要说明及实例

2018年02月11日 ⁄ 综合 ⁄ 共 4587字 ⁄ 字号 评论关闭
什么是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。 

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

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

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

      一个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; 

/* 
 *------------------------------------------------------ 
 * 文件名: 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页面: 

<html> 
<head> 
<title>AJAX.html</title> 
</head> 
<script type="text/javascript"> 

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

function getResult() 

        var url = "servlet/com.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]+"<BR>"; 
                        } 

                } 
        } 

</script> 
<body onLoad="getResult()"> 
<table width="80%"  border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td id="td">&nbsp;</td> 
  </tr> 
</table> 
</body> 
</html>  

抱歉!评论已关闭.