JS--AJAX获取XML数据、XMLHttpRequest对象响应属性

最新推荐文章于 2021-10-20 14:33:14 发布

原创最新推荐文章于 2021-10-20 14:33:14 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Web #JavaScript #XML

JavaScript 同时被 2 个专栏收录

47 篇文章

订阅专栏

web

41 篇文章

订阅专栏

本文详细介绍了XMLHttpRequest对象的响应属性，包括responseBody、responseStream、responseText和responseXML的使用场景和示例代码，帮助开发者理解如何在不同情况下选择合适的响应格式。

XMLHttpRequest对象响应属性

XMLHttpRequest对象通过responseText、responseBody、responseStream或responseXML属性获取响应信息，说明如下：

响应信息	说明
responseBody	将响应信息正文以Unsigned Byte数组形式返回
responseStream	以ADO Stream对象形式返回响应字符串
responseText	将响应信息作为字符串返回
responseXML	将响应信息格式化为XML文档格式返回

在实际应用中，一般将格式设置为XML、HTML、JSON或其他文本格式。具体使用哪种响应格式，可以参考下面几条原则：

如果向页面中添加大块数据时，选择HTML格式会比较方便
如果需要协作开发，且项目庞杂，选择XML格式会更通用
如果要检索复杂的数据，且结构复杂，那么选择JSON格式轻便

示例：

<h1>AJAX测试</h1>
 <button id="btn" value="btn" onclick="f()">按钮</button>
 <script>
     function f() {
         var ajax = createXMLHTTPObject();
         ajax.onreadystatechange = function(){
             if(ajax.readyState == 4 && ajax.status == 200){
                 var info = ajax.responseXML;
                 alert(info.getElementsByTagName("the")[0].firstChild.data);
             }
         }
         ajax.open("get", "response.xml",false);
         ajax.send();
     }
 </script>

response.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<the>XML数据</the>

点击测试按钮，弹出xml文档< the >标签中文本：
在这里插入图片描述
上面的代码使用XML DOM提供的getElementsByTagName()方法获取the节点，饭后再定位第一个the节点的子节点内容。此时如果继续使用responseText属性来读取数据，则会返回XML源代码字符串。

示例2：也可以使用服务器端生成XML文档结构

<%
    response.setContentType("text/xml");//设置XML文档文本类型，否则浏览器有可能不识别
    response.getWriter().write("<the>生成的XML数据</the>");
%>

在这里插入图片描述
注意：对于XML文档数据来说，第一行必须是< ?xml version=“1.0” encoding=“xxxx” ?>，该行命令表示输出的数据为XML格式文档，同时标识了XML文档的版本和字符编码。为了能够兼容IE和FF等浏览器，能让不同浏览器都可以识别XML文档，还应该为响应定义XML文本类型。最后根据XML语法规范编写文档的信息结构。然后使用上面的示例代码请求该服务器端脚本文件，同样能够显示元信息字符串“XML数据”。