一個簡單的ajax實例:ajax與struts2實例

         前言

         對於從事技術的人員來講ajax是這好東西，都會使用，並且樂於使用。但對於新手，開發一個ajax實例，還有是難度的，必竟對於他們這是新東西。leo開發一個簡單的ajax實例,用的是ajax與struts2結合而開發的實例。

        在學習實例前，leo以爲有必要看看，瞭解下下面這些資料，對ajax學習很重要也很必要.

        什麼是Ajax

        讀音：e:j^ks 。AJAX即「Asynchronous JavaScript and XML」（異步JavaScript和XML)，AJAX並不是縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種建立交互式網頁應用的網頁開發技術.

        什麼是JavaScript

        Javascript是一種由Netscape的LiveScript發展而來的原型化繼承的面向對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是爲了解決服務器端語言，好比Perl，遺留的速度問題，爲客戶提供更流暢的瀏覽效果。當時服務端須要對數據進行驗證，因爲網絡速度至關緩慢，只有28.8kbps，驗證步驟浪費的時間太多。因而Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能。
       
        什麼是XML

        XML（Extensible Markup Language）便可擴展標記語言，它與HTML同樣，都是SGML(Standard Generalized Markup Language,標準通用標記語言)。Xml是Internet環境中跨平臺的，依賴於內容的技術，是當前處理結構化文檔信息的有力工具。擴展標記語言XML是一種簡單的數據存儲語言，使用一系列簡單的標記描述數據，而這些標記能夠用方便的方式創建，雖然XML佔用的空間比二進制數據要佔用更多的空間，但XML極其簡單易於掌握和使用。

        leo說明

        有了這些資料，如今學習ajax就容易了,若是熟悉上面兩種語言，那就更駕輕就熟了；不會這兩種語言的朋友能夠先去大概的看看，學習下，特別是Javascript，這樣在學習ajax時會很輕鬆.

        ajax實例

        下面來看看實例.

        準備工做:開發軟件Myeclipse6.5,tomcat6.0 環境jdk1.6,struts2.0

        OK，一切準備好了，搭建工程，先建立一個test工程，添加。。。具體的步驟就省略了，相信你們這個都會。咱們看代碼。

        建立一個接受請求處理請求的java類 Java代碼
package action;   
  
import java.io.PrintWriter;   
import java.text.SimpleDateFormat;   
import java.util.Date;   
  
import javax.servlet.http.HttpServletRequest;   
import javax.servlet.http.HttpServletResponse;   
  
import org.apache.struts2.ServletActionContext;   
  
import com.opensymphony.xwork2.ActionSupport;   
/**Struts2中AJAX應用演示業務控制器**/  
public class AjaxAction extends ActionSupport {   
       
       
    /**處理原始的AJAX請求:讀取服務端系統時間**/  
    public String getServerTime(){   
        try {   
            SimpleDateFormat sd = new SimpleDateFormat("yyyy-MM-dd kk:mm:ss");   
            //獲取原始的PrintWriter對象,以便輸出響應結果,而不用跳轉到某個試圖   
            HttpServletResponse response = ServletActionContext.getResponse();   
            //設置字符集   
            response.setCharacterEncoding("UTF-8");   
            PrintWriter out = response.getWriter();   
               
            //直接輸入響應的內容   
            out.println(sd.format(new Date()));   
            /**格式化輸出時間**/  
            out.flush();   
            out.close();   
               
        } catch (Exception e) {   
            // TODO: handle exception   
            e.printStackTrace();   
        }   
        return null;//不須要跳轉某個視圖 由於上面已經有了直接輸出的響應結果   
           
    }   
       
    /**處理原始的AJAX請求:異步登陸**/  
    public String ajaxLogin(){   
        try {   
            String responseText="";   
            //讀取請求的參數   
            HttpServletRequest request = ServletActionContext.getRequest();   
            String loginname=   request.getParameter("loginname");   
            String loginpwd= request.getParameter("loginpwd");   
            //進行登陸驗證   
            if(loginname==null||loginname.trim().length()<1){   
                responseText="對不起,帳號不能爲空";   
            }else if(loginpwd==null||loginpwd.trim().length()<1){   
                responseText="對不起,密碼不能爲空";   
            }else{   
                if(loginname.equalsIgnoreCase("www.dukai168.cn")&&loginpwd.equalsIgnoreCase("www.dukai168.cn")){   
                    responseText="恭喜你,異步登陸成功";   
                }else{   
                    responseText="對不起,異步登陸失敗";   
                }   
            }   
               
            //獲取原始的PrintWriter對象,以便輸出響應結果,而不用跳轉到某個試圖   
            HttpServletResponse response = ServletActionContext.getResponse();   
            //設置字符集   
            response.setContentType("text/plain");//設置輸出爲文字流  
            response.setCharacterEncoding("UTF-8");   
            PrintWriter out = response.getWriter();   
               
            //直接輸出響應的內容   
            out.println(responseText);   
            out.flush();   
            out.close();   
               
        } catch (Exception e) {   
            // TODO: handle exception   
            e.printStackTrace();   
        }   
        return null;//不須要跳轉某個視圖 由於上面已經有了直接輸出的響應結果   
           
    }   
  
       
}      
        配置struts.xml Java代碼
<?xml version="1.0" encoding="UTF-8" ?>   
  
<!DOCTYPE struts PUBLIC   
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    "http://struts.apache.org/dtds/struts-2.0.dtd">   
  
<struts>   
    <package name="test1" extends="struts-default">   
        <action name="ajax_*" class="action.AjaxAction" method="{1}">   
            <result>/show.jsp</result>   
        </action>   
    </package>   
</struts>  
        建立前臺前請求頁面 XML/HTML代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<!--www.dukai168.cn-->
<script language="javascript">  
    //定義一個變量用於存放XMLHttpRequest對象   
    var xmlHttp;   
       
       
    //改函數用於建立一個XMLHttpRequest對象   
    function createXMLHttpRequest(){   
        if(window.ActiveXObject){   
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
        }else if(window.XMLHttpRequest){   
            xmlHttp = new XMLHttpRequest();   
        }   
    }   
       
       
    //這是一個啓動AJAX異步通訊的方法   
    function getServerTime(){   
        alert("我走過了時間方法");   
        var now = new Date();//獲取系統當前的時間   
           
        //建立一個XMLHttpRequest對象   
        createXMLHttpRequest();   
        //將狀態觸發器綁定到一個函數   
        xmlHttp.onreadystatechange= processServerTime;   
        //經過GET方法向指定的URL創建服務器的調用,加個臨時的參數,以便表示一個全新的請求   
        var url="ajax_getServerTime.action?tmp="+now.getTime();//等寫完回來看這一句話   
        xmlHttp.open("GET",url,true);   
        //發送請求   
        xmlHttp.send(null);   
    }   
       
    //這是一個用來處理狀態改變的函數   
    function processServerTime(){   
        //定義一個變量用於存放從服務器返回的響應結果   
        var responseContext;   
        if(xmlHttp.readyState==4){   
            //若是響應成功   
            if(xmlHttp.status==200){   
                //取出服務器的響應內容   
                responseContext=xmlHttp.responseText;   
                document.getElementById("servertime").innerHTML=responseContext;   
            }   
        }   
    }   
    /**以上是獲取當前時間的**/   
       
    //這是一個啓動AJAX異步通訊的方法   
    function ajaxLogin(){   
        var ln = document.getElementById("loginname").value;   
        var lp = document.getElementById("loginpwd").value;   
        //建立一個XMLHttpRequest對象   
        createXMLHttpRequest();   
           
        //將狀態綁定到一個函數   
        xmlHttp.onreadystatechange=processAjaxLogin;   
        //經過GET方法向指定的URL創建服務器的調用   
        var url="ajax_ajaxLogin.action?loginname="+ln+"loginpwd="+lp;   
        xmlHttp.open("GET",url,true);   
           
        //發送請求   
        xmlHttp.send(null);   
    }   
    //這是一個用來處理狀態改變的函數   
    function processAjaxLogin(){   
        //定義一個變量用於存放 從服務器返回的響應結果   
        var responseContext="";   
        if(xmlHttp.readyState==4){   
            if(xmlHttp.status==200){   
                responseContext = xmlHttp.responseText;   
                alert(responseContext);   
            }   
        }   
    }   
</script>  
<!--"www.dukai168.cn"-->
1.服務器端的系統時間:   
<span id="servertime"></span>  
<input type="button" value="獲取服務器端時間" onclick="getServerTime()">  
2.登錄帳號:   
<input type="text" id="loginname">  
登錄密碼:   
<input type="password" id="loginpwd">  
<input type="button" value="異步登錄" onclick="ajaxLogin()">  
        好了，全部的工做都完成了，發佈運行，一切正常，運行的圖就不放上來了，此ajax實例已經通過leo親自測試運行。你們能夠直接貼代碼進行運行。

        leo總結
       
        此ajax實例是用的最原始的ajax語言來實現了，如今通常都不這樣用，由於這們對瀏覽器間的兼容性不強，目前使用的都是ajax框架，好比說Jquery,prototype,dwr,Dojo等，更多瀏覽ajax框架.
本文爲原創JSP博客(http://www.dukai168.cn) 獨家發佈,轉載請保留原文地址http://www.dukai168.cn/blog/157.html,不然將追究法律責任,謝謝配合.