快速掌握Ajax-Ajax基礎實例（Ajax返回Json在Java中的實現）

實例二：Ajax返回Json在Java中的實現

　　在上一個隨筆中，介紹AJAX的一個簡單實例，在這篇中主要是說一下使用Json來將后台取得的數據顯示到前台頁面。可以說這種方法應該是實現無刷新分頁的基礎，而且在開發過程中經常被用到。這里的后台部分由JAVA來實現。

　　這個例子也在上一篇中那個項目中實現。新建一個SecondTest.html頁面，定義一個按鈕，並給這個按鈕綁定事件ajaxJson()。在JS中實現AJAX，這里的AJAX相對於上一篇中的，我做了簡單的封裝，將原有的代碼分成三個方法，分別是create()、callback()、run()。

　　create方法是用來創建XMLHttp對象的，callback是用來實現回調函數的，run方法是核心方法。具體代碼如下：

　　create()：

function create(){
                if(window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
                }
            }

　　callback()：

function callback(){
                if(xmlHttp.readyState==4){
                    if(xmlHttp.status==200){
                        //要實現的操作
                    }else{
                        alert("AJAX服務器返回錯誤！");
                    }    
                }
            }

　　run()：

function run(url){
                create();
                xmlHttp.open("POST",url,true);
                xmlHttp.onreadystatechange=callback;
                xmlHttp.send();
            }

　　以上三個方法寫好后，在ajaxJson()方法中直接調用run方法並將請求當參數傳入進去。代碼如下：

function ajaxJson(){
                run("test.do?method=jsonTest&&msg="+new Date());
            }

　　在AjaxController類的中新建jsonTest方法，在JAVA中實現Json是需要Json架包的，Json的架包有：json-lib-2.3-jdk15.jar，ezmorph-1[1].0.6.jar，commons-logging-tests.jar，commons-logging-api-1.1.1.jar，commons-logging-adapters-1.1.1.jar，commons-logging-1.1.1-sources.jar，commons-logging-1.1.1-javadoc.jar，commons-logging-1.1.1.jar，commons-lang.jar，commons-collections-3[1].2.1.jar，commons-beanutils-core.jar，commons-beanutils-bean-collections.jar，commons-beanutils.jar。看着有點多哈，可以自己去CSDN上面找，我試着刪掉一些，但發現少了會不好使，所以為了保險還是把這些都加進去吧。

　　在開發過程中一般數據都是從數據庫中取出來的，習慣性的我們會在程序中將取出的數據存到List中，而Json架包中正好有封裝好的方法能將List轉換為Json。在這個例子中我們自己制造一些假數據放到List中，然后再將List轉換為Json，再返回給前台。代碼如下：

public ActionForward jsonTest(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        //制造假數據
        ArrayList<UserModel> list=new ArrayList<UserModel>();
        UserModel user1=new UserModel();//用戶對象1
        user1.setUserId(1);
        user1.setUserName("哈哈");
        user1.setUserSex("男");
        list.add(user1);
        
        UserModel user2=new UserModel();//用戶對象2
        user2.setUserId(2);
        user2.setUserName("呵呵");
        user2.setUserSex("女");
        list.add(user2);
        //將List轉化為JSON
        JSONArray json=JSONArray.fromObject(list);
        //設置編碼
        response.setCharacterEncoding("gbk");
        //寫入到前台
        response.getWriter().write(json.toString());
        return null;
    }

　　后台部分寫完了，現在前台SecondTest.html頁面需要接收后台反饋來的數據，這個時候就需要在回調函數中接收Json數據。JS代碼如下：

//回調函數
        function callback(){
            if(xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                    var xmlDoc=xmlHttp.responseText;
                    var data=eval(xmlDoc);
                    alert(data[0].userId+","+data[0].userName+","+data[0].userSex);
                    alert(data[1].userId+","+data[1].userName+","+data[1].userSex);
                }else{
                        alert("AJAX服務器返回錯誤！");
                }    
            }
        }

　　以上就完成了Ajax返回Json在Java中的實現。