程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> Ajax簡要應用說明及技術開發實例

Ajax簡要應用說明及技術開發實例

編輯：關於JAVA

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。

http://www.mscto.com

實例

以下是我所寫的一個簡單的例子: http://www.mscto.com

AJaxServlet.Java程序清單: http://www.mscto.com

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>