Ajax + Json 基本用法（自整理）

Asynchronous javaScipt and Xml
什麼是Ajax：異步訪問服務器,不刷新頁面！不是一項新技術,整合了幾項技術組成.主要目的是爲了提升用戶體驗度
執行流程： 在用戶界面觸發事件調用javaScipt,經過引擎(XMLHttpRequest)對象異步發送請求到服務器，服務器返回XML,JSON,或HTML等格式的數據,而後利用返回一的數據使用DOM和CSS技術局部刷新用戶界面。
做用：經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

readyState 狀態：0.未初始化1.開始發送請求2.請求發送完成3.開始讀取響應4.讀取響應結束
Status 狀態：200-正確返回,404-找不到訪問對象,403-沒有訪問權限,500-數據錯誤
onreadystatechange：設置回調函數

1.進行Ajax原生操做
    1.建立XMLHttpRequest對象
    2.設置回調函數
    3.初始化XMLHttpRequest組件
    4.發送請求
    5.參考(validate_Email.jsp,practice_server.jsp)文件

使用JQuery實現Ajax方法(必須導入jquery-1.8.3.js)文件才能使用！
2.$.ajax()方法:{}方法中基本參數有6個分別是：每一個參數以：「參數名：參數值」的方法書寫
    $.ajax({
        url:要提交的路徑
        type:發送的請求方法(Get/Post)
        data:要發送的到服務器的數據
        dateType:指定要傳輸的數據格式 (xml,html,script,json,text,jsonp)
        success:function(result){ ：請求成功以後要執行的代碼(result,ts)
            ..省略
        },
        error:function(){ :請求失敗以後要執行的代碼(xhr,em,e)
            alert("系統升級完善中,求稍後再嘗試..");
        }
    });
注意： success:function(result,status){  參數1：有服務器中返回的數據。參數2：請求類型的字符串
            error:function(xhr,msg,etype){ 參數1：XMLHttpRequest對象。參數2:錯誤信息。參數3:捕獲的異常對象。
    參考(validate_Email_JQuery.jsp,VaildateEmailServlet)文件

除了$.ajax()方法還有：  以PSOT/GET請求發送Ajax
                 $.get{url,data,success(resp,status,xhr),dataType};
                 $.post{url,data,success(resp,status,xhr),dataType};
                  將頁面片斷載入到selector(選擇器)所表達的容器中
                 $.load{url,data,success(resp,status,xhr)};
                   有待驗證用法..
                   加載JSON格式數據或腳本
                 $.getJSON(url,[data],[callback])
                 $.getScript(url,[callback])
                 
什麼是JSON：輕量級的數據交換格式,可以替代XML的工做.
保存文件的格式能夠爲：js,json(jsondemo.js或者test.json)
優勢是：數據格式比較簡單, 易於讀寫, 格式都是壓縮的, 佔用帶寬小
語法/書寫格式是： 名稱/值對。多個值之間使用逗號分隔：var JSON對象 = {key:value,key:value··};
           value能夠是：String,Number,boolean,null,對象,數組,等等類型
    1.數據在鍵值對中,中間用冒號隔開:
    2.數據由逗號分隔,
    3.花括號保存對象{}
    4.方括號保存數組[]
注意： 數組：var JSON對象 = [value,value,··];
 用法：1.jsondemo.js 編寫Js文件    {"key":"value"}
    2.在頁面輸出
    參考：(jsondemo.js,json.jsp)文件

    發送JSON格式數據到服務端,或者接收從服務器端返回的JSON格式數據。
    必須使用$getJSON()方法異步發送請求到服務端，並以JSON格式封裝客戶端與服務端間傳遞的數據。
    語法：$getJSON(url,data,success(result,status,xhr))
    等價於： 使用$Ajax({參數中,指定類型：dataType:"JSON"})就是兩個方法同樣的功效
    注意：使用該方法時，默認從服務器接收到數據就是JSON對象，不須要再解析便可使用

讀取文件 test.json 讀取時指定絕對路徑
    $getJSON使用方式：$.getJSON("jqueryjs/test.json",function(data){
                       var dataValue = data.key;
                  }
                  
解析字符串的方法： $.parseJSON(str)
               用法：var Str = {"name":"林林林"};
           alert($.parseJSON(Str).name);結果輸出:彈框信息：林林林
                 
                 
使用Ajax+JSON+struts.xml+Action訪問數據
使用JSON插件實現JSON類型的Result,實現JSON做爲服務器和客戶端之間的傳遞數據
    1.先導入包：struts2-json-plugin-2.3.15.1.jar
    2.在struts.xml文件中編寫<package>,並指定該包繼承於json-default
    3.在<package>下定義<action>,並將結果標籤指定屬性爲：<result type = "json"></result>
   例子：struts.xml文件中
    <package name="ajax" extends="json-default" namespace="/">
                <!-- 使用Ajax方式的Action -->
        <action name="loginUsersAjax" class="cn.struts2.action.LoginUsersAjaxAction" method="login">
            <!-- <result name="input">/loginAjax.jsp</result> -->
            
            <!-- 將返回類型的Type指定爲json就能夠進行服務端和客戶端進行數據傳遞了 -->
            <result name="success" type="json">
                
                <!-- includeProperties 返回指定屬性的值 -->
                <param name="includeProperties">users,nextAction</param>
                
                <!-- root 返回要指定的序列化的根對象,若指定多個則只返回最後一個 --> 
                <!-- <param name="root">user</param> -->
                <!-- excludeProperties 指定的屬性不返回 -->
                <!-- <param name="excludeProperties">user.password</param> -->
                <!-- excludeNullProperties 指定的屬性若是爲空就不返回,不爲空才返回 -->
                <!-- <param name="excludeNullProperties">true</param> -->
            </result>
        </action>
    </package>
 jsp頁面：必須保證能正常使用JQuery！(導包)
 <script type="text/javascript">
    function validate() {
        var name = $("#name").val();
        var pwd = $("#pwd").val();
        /* alert(name);alert(pwd); */
        if (name == null || name == "") {
            $("#errorMsg").html("<span style='color:red'>請輸入用戶名!</span>");
        } 
        $.ajax({
            url : "loginUsersAjax", // 訪問struts.xml 
            type : "post",
            data : {
                "users.name" : name,
                "users.password" : pwd
            },
            dataType : "json",
            success : function(data) {
                $("#errorMsg").html("");
                alert(data.nextAction);
                if (data != null && data.users!=null) {
                    location.href = data.nextAction;
                } else {
                    $("#errorMsg").html("<span style='color:red'>輸入用戶名或者密碼不正確！</span>");
                }
            },
            error : function(xhr, msg, etype) {
                alert("異常類型1：" + etype + ",異常信息：" + msg);
            }
        });

    };
</script>    
    

使用正則表達式驗證方法爲：正則表達式.test(獲取的值)
            列子： var email = $("#email").val();
                var testEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(testEmail.test(email)){return"是郵箱"}else{return"不是郵箱"}