关闭

Ajax (4) ---处理请求

2717人阅读 评论(25) 收藏 举报
分类:

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

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



7
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1864948次
    • 积分:11803
    • 等级:
    • 排名:第1377名
    • 原创:150篇
    • 转载:12篇
    • 译文:1篇
    • 评论:1641条
    博客专栏
    最新评论