Ajax (4) ---处理请求

矫情吗；* 2022-09-18 14:48 135阅读 0赞

上一篇文中说到请求返回的消息，可以是字符串也可以是对象，返回的字符串我们可以使用弹出框的形式将所有内容显示出来，但是还没有加工处理。下面将详细说明如何取出对象中有效信息。

DOM文档对象模型，在JavaScript的学习中，我们只知道它是三个组成部分之一，规定文档结构，还有处理网页内容的接口和API，那时候学习的是了解功能，现在的学习是它如何实现处理内容的。

# 一：DOM再认识 #

DOM提供了文档结构化的表示，我们可以简单理解成xml文档中每个结点的元素都是DOM的一部分。而JavaScript是访问和处理DOM的语言，这就意味着，文档中元素可以结合DOM和JavaScript访问啦。

1）用于遍历XML的DOM元素方法

*  getElementById(id) 根据id获取文档中的元素
 *  getElementsByTagName(name) 根据标记名返回子元素的数组
 *  hasChildNodes() 判断是否有子元素
 *  getAttribute(name) 获取元素的属性值

2）实例说明

xml 文件内容：

<?xml version="1.0" encoding="utf-8" ?>
    <school>
    
      <grade>
        lishuangzhe1111
      </grade>
      
    </school>

JavaScript文件内容：

var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
    var resultNode = xmlDoc.getElementsByTagName("grade");
    var currentNode = null;
    
    
    for (var i = 0; i < resultNode.length; i++) {
                    currentNode = states[i];
                    out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
     }
    alert(out);

如果xml文档中再套一层，那我们也就再添加一层去取。如下：

<?xml version="1.0" encoding="utf-8" ?> 
    <school>
      
      <grade1>
        <name>li</name>
        <name>li</name>
        <name>li</name>
      </grade1>
      
    </school>

JavaScript文件内容：

var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
    var resultNode = xmlDoc.getElementsByTagName("grade1")[0]; //将返回的对象中 标记为grade1的放在一个数组中
    var retultNodes = resultNode.getElementsByTagName("name"); //获取对象中所有标记为state的元素
    var currentNode = null;
    
    for (var i = 0; i < resultNodes.length; i++) {
        currentNode = states[i];
        out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
     }
    alert(out);

# 二：请求处理详解 #

就是将接受到的返回信息，根据需求挑出自己想要的内容。

如下：

xml文件内容：

<?xml version="1.0" encoding="utf-8" ?>
    <school>
        <beijing>
          <name>li1</name>
          <name>li2</name>
        </beijing>
    
      <langfang>
        <name>shuang1</name>
        <name>shuang2</name>
      </langfang>
    
    </school>

上面的例子，已经将服务器发送的XML消息解析出来啦，当然在实际应用时，并不会给用户弹出个提示框，而是通过其它方式显示给用户。我们已经做到了遍历XML结构，抽取所需信息的目的。

如上所述就是对通过异步传输过来的xml document对象的处理过程。这样整个Ajax异步处理过程就完成啦。