ajax的初次使用

一、get請求需注意幾點：
    1、如果需要提起多個請求，需要建立多個XMLHttpRequest對象
    2、瞭解XMLHttpRequest對象中open、onreadystatechange、readystate、responseText、status屬性和方法的含義,及引擎的五種狀態：未初始化、裝載中、已裝載、互動中、完成
    3、使用ajax需要清除緩衝，否則會產生莫名的錯誤，具體有兩種方法：
        a、採用URL後跟上時間戳記來防止瀏覽器緩衝，如：
             var url = "user_validate.jsp?userId=" + trim(field.value) + "&timestampt=" + new Date().getTime();
        b、user_validate.jsp中增加清除緩衝代碼：
             response.setContentType("text/html");
             response.setHeader("Cache-Control","no-store");    //HTTP1.1
             response.setHeader("Pragma","no-store");                    //HTTP1.0
             response.setDateHeader("Expires",0);
    
    增加使用者id時判斷是否重複採用ajax流程：
    1、建立Ajax引擎對象XMLHttpRequest
    2、調用open方法與Ajax引擎建立串連，並告訴Ajax引擎請求方式為get，請求的url及採用非同步方式
    3、告訴Ajax引擎處理完成後如何把結果反饋給我們，我們通常指定一個方法控制代碼，那麼Ajax就會調用我們指定的方法，從而就可以得到Ajax引擎返回的資料(就是回調機制)
    4、調用send方法把步驟2和3設定的參數發送給Ajax引擎
    
    AJAX程式碼範例：   
       1、servlet中代碼：
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=GB18030");
        String clientId = request.getParameter("clientId");
        boolean flag = ClientManager.getInstance().findClientByClientId(clientId);
        if (flag) {
            response.getWriter().print("分銷商代碼已經存在");
        }
    }
    2、jsp的script中代碼：
    function validateClientId(field) {
        if (trim(field.value) != "") {
            var xmlHttp = null;
            //表示當前瀏覽器不是ie,如ns,firefox
            if(window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var url = "servlet/ClientIdValidateServlet?clientId=" + trim(field.value);        //此處的url路徑與web.xml中servlet-mapping對應的url-pattern裡的路徑一致。
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange=function() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        if (trim(xmlHttp.responseText) != "") {
                            document.getElementById("spanClientId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
                        }else {
                            document.getElementById("spanClientId").innerHTML = "";
                        }
                    }else {
                        alert("請求失敗，錯誤碼=【" + xmlHttp.status + "】");
                    }
                }
            };
            xmlHttp.send(null);
        }else {
            document.getElementById("spanClientId").innerHTML = "";
        }
    }

    
    以上是get請求，如果出現亂碼
    javascript中：open方法中的url裡的參數進行二次編碼：encodeURIComponent("xxxx") 或 encodeURI(encodeURI("xxxx")) 兩種寫法都可以
    servlet中：      String userName = URLDecoder.decode(request.getxxxx, "UTF-8");
        
    ajax的接受返回資料
    ajax一般情況下返回的String字串用xmlHttpRequest對象的responseText來接受，但如果這個String字串由XML檔案組成的話則用responseXML來接受，
    參照drp中的SelectProvServlet和client_level_chart.jsp
   

二、post請求：
    如果要傳檔案或post內容給伺服器，必須在send方法前調用setRequestHeader方法，如下：
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlenoded")
    這時send的參數不為空白，例如：
    send(name=value&anothername=othervalue&so=on);
    
    
三、js與json:
        var o = {"name":"value"}
        o.name和o["name"]都可以取到value的值
        ajax中處理返回的json字串,將它轉化為js對象：
        例：eval("("+xhr.responseText+")");

四、省市級聯
        省市級聯時通過Arrays.asList方法將市的數組轉化為list，應用如下：
        商務邏輯層：
        public class RegionService{
            private Map<String,List<String>> map= new HashMap<String,List<String>>();
            public RegionService(){
                String[] c1 = new String[]{"成都","洛陽","廣安","德陽"};
                String[] c2 = new String[]{"海澱","昌平","朝陽"};
                map.put("四川",Arrays.asList(cl));
                map.put("北京",Arrays.asList(c2));
            }
            public List<String> loadProvices(){
                return new ArrayList<String>(map.keySet());    //通過kekSet方法得到map裡的省份
            }
            public List<String> loadCitys(String province){
                return map.get(province);    //得到省份對應的城市
            }
        }
        展示層：
        public class LoadProvicesServlet extends HttpServlet{
            private static final long serialVersionUID = 1L;
            private IRegionService service = new RegionServiceImpl();
            protected void doGet(HttpServletRequest request, HttpServletResponse response){
                List<String> list = service.loadProvices();
                StringBuffer s = new StringBuffer("[");    //通過拼串的方式變為數組格式
                for(int i=0;i<list.size();i++){
                    s.append("\"").append(list.get(i)).append("\"");
                    if(i<list.size()-1)
                        s.append(",");
                s.append("]");
                response.setContentType("text/html;charset=UTF-8");    //設定返回的編碼格式，否則會出現亂碼
                response.getWriter().println(s.toString());
                }
            }
        }
        jsp中:
        <script>
            var xmlHttp;    
            function createXMLHttpRequest() {
                //表示當前瀏覽器不是ie,如ns,firefox
                if(window.XMLHttpRequest) {
                    xmlHttp = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }    
            function loadProvice() {
                //alert(document.getElementById("userId").value);
                //alert(field.value);
                if (trim(field.value).length != 0) {
                    //建立Ajax核心對象XMLHttpRequest
                    createXMLHttpRequest();            
                    var url = "servlet/LoadProvicesServlet" + "&time=" + new Date().getTime();    //url裡的是xml中的相對路徑
                    xmlHttp.open("GET", url, true);        
                    xmlHttp.onreadystatechange=function {
                    if (xmlHttp.readyState == 4) {
                        if (xmlHttp.status == 200) {
                            var ret = eval("("+ xmlHttp.responseText +")");
                        }else {
                            alert("請求失敗，錯誤碼=" + xmlHttp.status);
                        }
                    }
                }            
                    //將設定資訊發送到Ajax引擎
                    xmlHttp.send(null);
                }
            }    
            window.onload=loadProvice;    //頁面載入時發送ajax請求
      </script>