AJAX传输——以XML文件传输为例

Posted Yanky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX传输——以XML文件传输为例相关的知识,希望对你有一定的参考价值。

此文档解决以下问题:

一、responseText获取数据

1.AJAX异步传输,get请求方式/post请求方式,输出全部xml数据

二、responseXML获取数据

2.AJAX异步传输,get请求方式,输出指定xml数据

3.AJAX异步传输,post请求方式,输出全部xml数据

4.AJAX同步传输,get请求方式,输出指定xml数据

5.AJAX同步传输,post请求方式,输出全部xml数据


 

1.AJAX异步传输,get请求方式/post请求方式,输出全部xml数据

1)index01.html

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title></title>
       <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
    
           function XMLhttpr () {
               //1.创建XMLHttpRequest对象
               var xhtp;
               if(window.XMLHttpRequest){
                   //支持ie6 以上
                   xhtp=new XMLHttpRequest();
               }else{
                   xhtp=new ActiveXObject("Micosoft.XMLHTTP");
               }  
               
               //2.规定请求
               //以get方式请求  xml文件
               xhtp.open("GET","books.xml",true);
               //true 为异步传输
           
               //3.发送请求
               xhtp.send(null);
               
               
               //4.响应请求
               xhtp.onreadystatechange=function () {
                   if(xhtp.readyState==4  &&  xhtp.status==200){
                       //5.设置xml的显示格式
                       var xmlDoc= xhtp.responseText;
                       $("#myDiv").html(xmlDoc);
                   }
               }
           }
           
           $(function function_name () {
               $("#btn").click(XMLhttpr);
           })
       </script>
    </head>
    <body>
        <div id="myDiv"></div>
        <br />
        <input type="text" name="txtin" id="txtin" value="" />
        <input type="text" name="txtage" id="txtage" value="" />
        <input type="button" name="btn" id="btn" value="提交" />
        <table border="" cellspacing="" cellpadding="" id="member">
            <tr>
                <th>title</th>
                <th>author</th>
                <th>year</th>
            </tr>
        </table>
    </body>
</html>

 

 

 

2)books.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="CHILDREN">
        <title>Harry Potter1</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title>Learning XML1</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

 

 

 

3)运行结果:

 

 

2.AJAX异步传输,get请求方式,输出指定xml数据

1)index02.html:

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title></title>
       <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
    
           function XMLhttpr () {
               //1.创建XMLHttpRequest对象
               var xhtp;
               if(window.XMLHttpRequest){
                   //支持ie6 以上
                   xhtp=new XMLHttpRequest();
               }else{
                   xhtp=new ActiveXObject("Micosoft.XMLHTTP");
               }  
               
               //2.规定请求
               //以get方式请求  xml文件
               xhtp.open("GET","books.xml",true);
               //true 为异步传输
           
               //3.发送请求
               xhtp.send(null);
               
               
               //4.响应请求
               xhtp.onreadystatechange=function () {
                   if(xhtp.readyState==4  &&  xhtp.status==200){
                       //5.设置xml的显示格式
                       //getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
                       //参数值 "*" 返回文档的所有元素。
                       //childNodes 属性返回包含被选节点的子节点的 NodeList。
                    //如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
                    //nodeValue 属性根据节点的类型设置或返回节点的值。
                    //注意: 如果你想返回元素的文本,记住文本通常是插入到文本节点中
                    //所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)。
                       var xmlDoc= xhtp.responseXML.documentElement;
                       Node1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
                       Node2 = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
                    Node3 = xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;
//                    var str="title:"+Node1+"<br/>author:"+Node2+"<br/>ayear:"+Node3;
//                       $("#myDiv").html(str);
                       $("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>");
                   }
                   
               }

           }
           
           $(function function_name () {
               $("#btn").click(XMLhttpr);
           })
       </script>
    </head>
    <body>
        <div id="myDiv"></div>
        <br />
        <input type="text" name="txtin" id="txtin" value="" />
        <input type="text" name="txtage" id="txtage" value="" />
        <input type="button" name="btn" id="btn" value="提交" />
        <table border="" cellspacing="" cellpadding="" id="member">
            <tr>
                <th>title</th>
                <th>author</th>
                <th>year</th>
            </tr>
        </table>
    </body>
</html>

 

 

 

2)books.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="CHILDREN">
        <title>Harry Potter1</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title>Learning XML1</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

 

 

 

3)运行结果:

 

 

3.AJAX异步传输,post请求方式,输出全部xml数据

1)index03.html:

 

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function XMLhttpr() {
                //1.创建XMLHttpRequest对象
                var xhtp;
                if(window.XMLHttpRequest) {
                    //支持ie6 以上
                    xhtp = new XMLHttpRequest();
                } else {
                    xhtp = new ActiveXObject("Micosoft.XMLHTTP");
                }

                //2.规定请求
                //以post方式请求  xml文件
                xhtp.open("POST", "books.xml", true);
                //true 为异步传输

                //3.发送请求
                xhtp.send(null);

                //4.响应请求
                xhtp.onreadystatechange = function() {
                    if(xhtp.readyState == 4 && xhtp.status == 200) {
                        //5.设置xml的显示格式
                        //getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
                           //参数值 "*" 返回文档的所有元素。
                           //childNodes 属性返回包含被选节点的子节点的 NodeList。
                        //如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
                        //nodeValue 属性根据节点的类型设置或返回节点的值。
                        //注意: 如果你想返回元素的文本,记住文本通常是插入到文本节点中
                        //所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)。
                        var xmlDoc = xhtp.responseXML.documentElement;
                        xmlDocs = xmlDoc.getElementsByTagName("book");
                        for(var i = 0; i < xmlDocs.length; i++) {
                            xmlDoc = xmlDocs[i];
                            Node1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
                            Node2 = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
                            Node3 = xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;
                            $("#member").append("<tr><td>" + Node1 + "</td><td>" + Node2 + "</td><td>" + Node3 + "以上是关于AJAX传输——以XML文件传输为例的主要内容,如果未能解决你的问题,请参考以下文章

JQuery实现AJAX异步请求实现省市联动(数据传输格式为xml)

Ajax传输Json和xml数据

AJAXform表单验证

mui.ajax与服务器(SpringMVC)传输json数据

Ajax中传输格式为XML

ajax中网页传输XML——下拉列表显示练习