Ajax (4) ---处理请求

最新推荐文章于 2021-08-05 15:31:44 发布

lishuangzhe7047

最新推荐文章于 2021-08-05 15:31:44 发布

阅读量3.1k

点赞数 7

分类专栏： Web前端 Ajax学习

本文链接：https://blog.csdn.net/lishuangzhe7047/article/details/17066679

版权

Web前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Ajax学习

5 篇文章 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);

二：请求处理详解

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

如下：

<script type="text/javascript">
        var xmlhttp;
        var requestType = "";

        //创建XMLHttpRequest对象
        ....

        //设置开始请求
        function startRequest(requestedList) {
            requestType = requestedList;
            createXMLHttpRequest();

            //设置回掉函数
            xmlhttp.onreadystatechange = handleStateChange;
            xmlhttp.open("GET", "XMLFile1.xml", true);
            xmlhttp.send(null);
        }

        function handleStateChange() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    if (requestType == "beijing") {//如果选择"beijing"将执行listbeijing()
                        listbeijing();
                    } else if (requestType == "...") {
                        ....
                    }
                }
            }
        }

        function listbeijing() {

            var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象

            var resultNode = xmlDoc.getElementsByTagName("beijing")[0]; //将返回的对象中 标记为north的放在一个数组中

            var out = "beijing:";
            var resultNodes = resultNode.getElementsByTagName("name"); //获取对象中所有标记为state的元素

            outputList("beijing:", resultNodes);

        }

        //迭代处理数组中的所有元素，
        function outputList(title, states) {
            var out = title;
            var currentNode = null;
            for (var i = 0; i < states.length; i++) {
                currentNode = states[i];
                out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
            }
            alert(out);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" name="name" value=" clickme" οnclick="startRequest('beijing')" />
    </form>
</body>

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异步处理过程就完成啦。