使用js读取xml文件responseXML返回值为null

本文探讨了在使用JavaScript进行AJAX请求时,遇到responseXML返回null的问题。通过分析register.jsp、onclick事件、ajax_uni.js以及Servlet ChangeInfo.java的代码,发现错误出在服务器端设置的Content-Type应为"text/xml;charset=utf-8",而非"text/html;charset=utf-8"。修正这一错误后,成功读取XML文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

register.jsp代码如下:

<tr>
    <td>
    <c:forEach var="province" items="${provincelist}">
    <!-- 这里的this就代表a标签,获取this,就可以获取到a标签的所有属性,即id和coId -->
        <a onclick='setProUnis(this)' href="javascript:void(0);"
        class="xh" id="${province.id}" name="${province.country.id }">
        ${province.name } </a>
    </c:forEach>
    </td>
</tr>

在a标签上添加了一个onclick事件。

ajax_uni.js代码如下:

//响应用户点击省市
function setProUnis(o) {    
    createXMLHttpRequest();    //创建AJAX引擎
    if (xmlrequest) {         //AJAX引擎创建成功,即非空
        //准备发送请求,带上省id和国家的id
        var req = "/xiaonei/ChangeInfo?proid="+o.id+"&cid="+o.name;
        //alert(req);
        //打开请求:因为数据量很小,所以选择get请求;req代表的是url
        //false是等待有返回数据的时再继续往下走,还没有得到数据的时候就会卡在那里,直到获取数据为止。
        //true是不等待,直接返回,这就是所谓的异步获取数据!
        xmlrequest.open("get", req, true);
        //指定处理结果的函数,即回调函数
        xmlrequest.onreadystatechange = getProUnis;    //拿到从ChangeInfo Servlet返回的切换省份后的大学数据     
        //发送请求
        xmlrequest.send();
    }
}
//根据不同的浏览器创建AJAX引擎
function createXMLHttpRequest() {  
    if (window.ActiveXObject) {   //如果是IE浏览器  
        xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else {     //非IE浏览器 
        xmlrequest = new XMLHttpRequest();
    }
}
//回调函数
function getProUnis() {
    /*XMLHttpRequest对象的属性:
    readyState(对象状态:0 为未初始化;1为读取中;2为已读取;3为交互中;4为完成)
    status(服务器返回的状态码,404为文件未找到,200为成功)*/
    //完成
    if (xmlrequest.readyState == 4) {
        //成功返回!
        if (xmlrequest.status == 200) {         
            //表示获取unis集合,并拼接成一个新的大学表格
            var unis = xmlrequest.responseXML.getElementsByTagName("unis");
            var con = "<table width='100%'><tr>";
            for (var i = 1; i <= unis.length; i++) {
                con += "<td><li><a onclick='showMyUni(this)' href='javascript:void(0);' id='" + unis[i - 1].childNodes[0].childNodes[0].data + "' class='xh'>" + unis[i - 1].childNodes[1].childNodes[0].data + "</a></li></td>";
                if (i % 3 == 0) {
                    con += "</tr><tr>";
                }
            }
            con += "</tr></table>";
            //替换成最新的表格
            document.getElementById("uniTbl").innerHTML = con;
        }
    }
}

创建一个servlet,用来处理setProUnis(o)发送过来的请求。ChangeInfo.java代码如下:

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        //浏览器禁用缓存(使用ajax为什么要禁用缓存?)
        //response.setHeader("Cache-Control", "no-cache");
        PrintWriter out = response.getWriter();
        //响应用户选择不同省或直辖市的大学信息请求
        String proid = request.getParameter("proid");
        String cid = request.getParameter("cid");
        System.out.println(proid + "&&" + cid);     
        //获取spring容器
        WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());
        //从spring容器中,取出了 UniversityServiceInter 类型的bean
        UniversityServiceInter universityService=(UniversityServiceInter) ctx.getBean("universityService");     
        List<University> uniList=universityService.getResult("from University where province.id=? and country.id=?", 
                new Object[]{Integer.valueOf(proid),Integer.valueOf(cid)});     
        String res = "<allUniversities>";       
        for (int i = 0; i < uniList.size(); i++) {
            University u = uniList.get(i);
            //XML文档中的所有文本都会被解析器解析,只有CDATA部分的文本会被解析器忽略.引入CDATA后,代码更严谨,防止大学名称中出现特殊的字符而解析错误。
            res += "<unis><id>" + u.getId() + "</id><name><![CDATA[" + u.getName() + "]]></name></unis>";
            //res += "<unis><id>" + u.getId() + "</id><name>"+ u.getName() + "</name></unis>";
        }
        res += "</allUniversities>";        
        System.out.println(res);        
        out.write(res);   //返回给AJAX的回调函数
        out.close();
    }

然后运行结果一直报xmlrequest.responseXML为空的问题。
自己调试了很久,最后发现,原来是自己粗心,将服务器端的response.setContentType(“text/xml;charset=utf-8”);写成了response.setContentType(“text/html;charset=utf-8”)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值