現在剛剛看一些關於Ajax的一些知識點。把它寫下來，作為知識的備忘錄！

以下純屬個人理解！！！

 

1. Ajax分為頁面部分（前端），和幕後處理部分（後端，servlet）；

 

2. 頁面：建立XmlHttpRequest對象，不同的瀏覽器，所支援的XmlHttpRequest對象不通；

    頁面：建立發送函數   XmlHttpRequest.open("GET", url, true);
                                  XmlHttpRequest.onreadystatechange = processResponse;
                                  XmlHttpRequest.send(null); //XmlHttpRequest.send("uname=" + "lc")

 

    在open函數，第一個參數：代表請求的方法，有兩種，一種是get，令一種是post

                        第二個參數：提交給哪個網頁或者servlet

                        第三個參數：true表示非同步

 

    在send函數：表示提交給servlet的參數。可以是簡單的索引值對參數，也可以是整個XML文檔

 

    用get方法提交時，參數是跟在url或login.do?uname=lc後面；

    用post方法提交時，可以提交複雜的資料，比如，XML文檔，

    但用post提交時需要跟上，XmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-                                                                                                                                             urlencoded");

 

3. 頁面：建立回呼函數，processResponse()，用來處理具體從servlet返回的資料

    if(xmlHttpReq.readyState == 4) {
        if(xmlHttpReq.status == 200) {
            var res = xmlHttpReq.responseText;
            window.alert(res);
        } else {
        window.alert("您所請求的頁面有異常！");
       }
     }

 

4. 頁面：返回的資料可以是純文字：XmlHttpRequest.responseText；

                      也可以是XML文檔：XmlHttpRequest.responseXML；

 

5. 頁面：把返回的資料顯示到html/jsp頁面中，通過document.all.a00.innerHTML()；

                                                 或者直接操作dom對象，在html/jsp中增加節點

 

6. 後台：前台用get  +  簡單的參數   。幕後處理方式

             String uname = req.getParameter("uname");
             PrintWriter out = resp.getWriter();
             out.println("<response>");
 
             if("lc".equals(uname) && "lc".equals(password)) {
                 out.println("<res>熱烈歡迎您！</res>");
             } else {
                 out.println("<res>對不起，登入失敗！</res>");
             }
 
             out.println("</response>");
             out.close();

             說明：返回前台的可是是純文字，也可以是xml文檔，此處為XML文檔

 

7. 後台：前台用post  +  xml參數  。   幕後處理方式

             StringBuilder bxml = new StringBuilder();
             String line = null;
             try{
                 BufferedReader reader = req.getReader();
                 while((line = reader.readLine()) != null) {
                     bxml.append(line);
                 }
             }catch(Exception e) {
                 e.printStackTrace();
             }
 
             String xml = bxml.toString();
             xml = URLDecoder.decode(xml,"utf8");//提交時亂碼，這是解決
             Document xmlDoc = null;
             try{
                 xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder()
                                      .parse(new ByteArrayInputStream(xml.getBytes()));
             }catch(Exception e) {
                 e.printStackTrace();
             }
 
             String name = xmlDoc.getElementsByTagName("name").item(0).getFirstChild().getNodeValue();
 
             String responseText = "";
             PrintWriter out = resp.getWriter();
             if("lc".equals(name) && "lc".equals(psw)) {
                  responseText = "熱烈歡迎您！";
             } else {
                  responseText = "對不起，登入失敗！";
             }
 
            //設定輸出資訊的格式及字元集
            resp.setCharacterEncoding("utf-8");
            resp.setHeader("charset","utf-8");
            resp.setContentType("text/xml;charset=utf-8");
            out.write(responseText);
            out.close();

 

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/aaabendan/archive/2010/02/23/5319596.aspx