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());
    }