使用XMLHttpRequest处理xml数据（二）

最新推荐文章于 2024-07-25 19:54:22 发布

dabizime

最新推荐文章于 2024-07-25 19:54:22 发布

阅读量447

点赞数

分类专栏： Ajax 文章标签： xmlhttprequest xml ajax integer callback 浏览器

本文链接：https://blog.csdn.net/dabizime/article/details/5490048

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先写一个html页面userxmlajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户校验ajax实例</title>
     
     
    <script type="text/javascript" src="js/validatexmlajax.js"></script>
</head>
<body>
    用户名校验AJAX实例，请输入用户名：</br>
    <input type="text" id="userName"><br>
    <input type="button" value="检查" οnclick="validatexmlajax()">
    
     
    <div id="result"></div>

</body>
</html>

再写一个servlet类AJAXServletXML
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

//用于读取xml
public class AJAXServletXML extends HttpServlet{
   @Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
             //修改点1---响应Content-Type必须是text/xml
            httpServletResponse.setContentType("text/xml;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();

            //加一个计数器检测浏览器中缓存中的情况根据不同的浏览器看是不是读取同一个缓存
            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
            int temp = 0;
            if(inte == null){
                temp = 1;
            }else{
                temp = inte.intValue() + 1;
            }
            httpServletRequest.getSession().setAttribute("total",temp);

//1.取参数
String username = httpServletRequest.getParameter("username");

            //修改点2---返回的数据需要拼装成xml格式
                StringBuilder builder = new StringBuilder();
                builder.append("<message>");

            //2.检查参数是否有问题
            if(username == null || username.length() == 0 || username.equals("")){
                builder.append("用户名不能为空").append("</message>");
            } else{

            //3.校验操作
                if(username.equals("wangxingkui")){
                    //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    builder.append("用户名[" + username + "]已经存在，请使用其他用户名, ").append("</message>");

} else{
builder.append("用户名[" + username + "]尚未存在，可以使用该用户名注册, ").append("</message>");

                }
                //修改点3---这一句话要加上
                out.println(builder.toString());

            }
        } catch(Exception e){
            e.printStackTrace();
        }
    }

    @Override
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
              doGet(httpServletRequest, httpServletResponse);
    }
}

最后写一个js validatexmlajax.js
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function validatexmlajax(){

    //使用DOM方式获取文本框中的值
    //document.getElementById("userName")是dom中获取元素节点的一种方法
    //value可以获得一个元素节点的value属性值
    var userName = document.getElementById("userName").value;

    //1.创建XMLHTTPRequest对象
    //这是XMLHTTPRequest对象五部使用中最复杂的一步
    //需要针对IE和其他类型的浏览器建立这个对象的不同方式的不同代码
    if(window.XMLHttpRequest){
        //针对FireFox.Mozillar.Opear.safari.ie7.ie8
        xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的 Mozillar浏览器的bug进行修正
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml")
        }
    }else if(window.ActiveXObject()){
         //针对ie6,ie5.5,ie5
        //两个可以创建XMLHTTPRequet的对象的控件名称，保存在一个js数组中
        //排在前面的版本较新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i<activexName.length;i++){
            try{
         //取出一个空间名进行创建，如果创建成功就终止循环
          //如果创建失败，会抛出异常，然后可以继续循环，继续执行创建
                xmlhttp = new ActiveXObject([i]);
                break;
            }catch(e){

            }
        }
    }
    //确认XMLHTTPRequest对象创建成功
    if(!xmlhttp){
        alert("XMLHttpRequest对象创建失败")
    }else{
        alert(xmlhttp.readyState);
    }
    //2.注册回调函数
    //注册回调函数时，只需要函数名，不需要括号
    //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
    xmlhttp.onreadystatechange = callback;

   //3.设置连接信息
    //第一个参数表示http请求的方式，支持所有http请求的方式，主要是get和post
    //第二个参数标识请求的url地址，get方式请求的参数也在url中
    //第三个参数标识采用异步还是同步方式交互，true表示异步
    //xmlhttp.open("GET","AJAXServletXML?username=" + userName,true);

     //POST方式请求的代码
    xmlhttp.open("POST","AJAXServletXML",true);
    //post方式需要自己设置http的请求头
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //post方式发送数据
    xmlhttp.send("username="+ userName);

    //4.发送数据开始和服务器端交互
    //同步方式下，send这句话会在服务器端数据回来后才执行
    //异步方式下，send这句话会立即完成执行
    // xmlhttp.send(null);

}

//回调函数
function callback(){
    alert(xmlhttp.readyState);
    //5.接收响应数据
   //判断对象的状态时交互完成
    if(xmlhttp.readyState == 4){
         //判断http的交互是否成功
        if(xmlhttp.status == 200){

            //获取服务器端返回的数据
            //使用responseXML的方式来接受xml数据对象的dom对象
        var domObj = xmlhttp.responseXML;
        if(domObj) {
            //<message>123456789</message>
            //dom中利用getElementByTagName可以根据标签名称来获取节点，返回的是一个数组
           var messageNodes = domObj.getElementsByTagName("message");
           if(messageNodes.length > 0){
                    //获取message节点中的文本内容
                    //message标签中的文本在dom中式message标签所对应的元素节点的子节点，firstChild可以获取当前节点的第一个子节点
                    //通过以下方式就可以获取到文本内容所对应的节点
                    var textNode = messageNodes[0].firstChild;
                    //对于文本节点来说，可以通过nodeValue的方式返回文本节点的文本内同
                    var responseMessage = textNode.nodeValue;

                    //将数据显示在页面上
                    //通过dom方式找到div标签所对应的元素节点
                    var divNode = document.getElementById("result");
                    //设置元素节点中的html内容
                    divNode.innerHTML = responseMessage;
                }else{
                    alert("xml数据格式错误，原始文本内容为：" + xmlhttp.responseText);
                }
        }else{
            alert("xml数据格式错误，原始文本内容为：" + xmlhttp.responseText);
              }
        }else{
            alert("出错了！！！")

}
}
}

不要忘了配置web.xml

dabizime

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用XMLHttpRequest处理xml数据（二）

首先写一个html页面userxmlajax.html "http://www.w3.org/TR/html4/loose.dtd"> 用户校验ajax实例用户名校验AJAX实例，请输入用户名： 456--> 123456--> 再写一个servlet类AJAXServlet
复制链接

扫一扫

专栏目录