AJAX:XMLHttpRequest說明

1.創建XMLHttpRequest對象

      

function createXmlHttp() {

     if (window.XMLHttpRequest) {
        //針對FireFox，Mozillar，Opera，Safari，IE7，IE8
        xmlhttp = new XMLHttpRequest();
        //針對某些特定版本的mozillar瀏覽器的BUG進行修正
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
         //針對IE6，IE5.5，IE5
        //兩個可以用於創建XMLHTTPRequest對象的控件名稱，保存在一個js的數組中
        //排在前面的版本較新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try{
                //取出一個控件名進行創建，如果創建成功就終止循環
                //如果創建失敗，回拋出異常，然後可以繼續循環，繼續嘗試創建
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
            }
        }
    }

    if (!xmlhttp) {
        alert("XMLHttpRequest對象創建失敗!!");
        return;
    }
}

2.在函數中處理

function verify() {
    var userName = document.getElementById("userName").value;
    createXmlHttp();
    //以post方式提交請求
    xmlhttp.open("POST","AjaxXMLServer",true);
    //post方式需要設置請求頭
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //設置回調函數
    xmlhttp.onreadystatechange=callback;
    //post方式發送數據
    xmlhttp.send("name="+userName);
}

3.回調函數

//回調函數處理提交回來的xml數據
function callback() {
    if(xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
            //接收xml文檔
            var domObj = xmlhttp.responseXML;
            if(domObj){
                var messageNodes = domObj.getElementsByTagName("message");
               if(messageNodes.length > 0) {
                   var textNode =  messageNodes[0].firstChild;
                   var responseMessage = textNode.nodeValue;
                   var divNode = document.getElementById("result");
                   divNode.innerHTML=responseMessage;
               }else {
                  alert("XML數據格式錯誤，原始文本內容爲：" + xmlhttp.responseText);
               }
            } else {
                 alert("XML數據格式錯誤，原始文本內容爲：" + xmlhttp.responseText);
            }
        }
    }
}

4.後臺Servlet

@Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
          //1.取得參數
          httpServletResponse.setContentType("text/xml;charset=utf-8");
          StringBuilder sb = new StringBuilder();
          PrintWriter out = httpServletResponse.getWriter();
          String old = httpServletRequest.getParameter("name");

          sb.append("<message>");

          if(old == null || old.length() == 0) {
              sb.append("用戶名不能爲空");
         } else {
              String name = old;
              if(name.equals("huaguoming")) {
                  sb.append("用戶名[")
                    .append(name)
                    .append("]已經存在");
                  }else {
                  sb.append("用戶名[")
                    .append(name)
                    .append("]不存在，可以使用！");
                  }
          }
          sb.append("</message>");
        out.println(sb.toString());
    }