AJAX傳輸——以XML文件傳輸為例

本文轉載自查看原文 2018-11-12 08:04 2496 JavaScript

此文檔解決以下問題：

一、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 + "</td></tr>");
                        }
                    }
                }
            }

            $(function function_name() {
                //one() 方法為被選元素附加一個或多個事件處理程序，並規定當事件發生時運行的函數。
                //當使用 one() 方法時，每個元素只能運行一次事件處理器函數
                $("#btn").one("click",function () {
                    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）運行結果：

4.AJAX同步傳輸，get請求方式，輸出指定xml數據

1）index04.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","books1.xml",false);
               // false 為同步傳輸，則不必設置onreadystatechange
           
               //3.發送請求
               xhtp.send(null);
               
               
               //4.響應請求
//               xhtp.onreadystatechange=function () {
//                   if(xhtp.readyState==4  &&  xhtp.status==200){
//                       var xmlDoc= xhtp.responseText;
//                   }
//               }
               
               //5.設置xml的顯示格式
            //getElementsByTagName() 方法可返回帶有指定標簽名的對象的集合。
               //參數值 "*" 返回文檔的所有元素。
               //childNodes 屬性返回包含被選節點的子節點的 NodeList。
            //如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
            //nodeValue 屬性根據節點的類型設置或返回節點的值。
            //注意： 如果你想返回元素的文本，記住文本通常是插入到文本節點中
            //所以返回的是文本節點的節點值(element.childNodes[0].nodeValue)。
            //getAttribute() 方法返回指定屬性名的屬性值。
               var xmlDoc=xhtp.responseXML;
               Node1 = xmlDoc.getElementsByTagName("two")[0].firstChild.nodeValue;
            Node2 = xmlDoc.getElementsByTagName("author")[0].firstChild.nodeValue;
            Node3 = xmlDoc.getElementsByTagName("book")[0].getAttribute("category");
                    
            $("#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）books1.xml：

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

3）運行結果：

5.AJAX同步傳輸，post請求方式，輸出全部xml數據

1）index05.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",false);
               // false 為同步傳輸，則不必設置onreadystatechange
               xhtp.setRequestHeader("Content-type","text/xml");
               
               //3.發送請求
               xhtp.send(null);

               //4.響應請求
//               xhtp.onreadystatechange=function () {
//                   if(xhtp.readyState==4  &&  xhtp.status==200){
//                       var xmlDoc= xhtp.responseText;
//                   }
//               }
               
               //5.設置xml的顯示格式
            //getElementsByTagName() 方法可返回帶有指定標簽名的對象的集合。
               //參數值 "*" 返回文檔的所有元素。
               //childNodes 屬性返回包含被選節點的子節點的 NodeList。
            //如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
            //nodeValue 屬性根據節點的類型設置或返回節點的值。
            //注意： 如果你想返回元素的文本，記住文本通常是插入到文本節點中
            //所以返回的是文本節點的節點值(element.childNodes[0].nodeValue)。
            //getAttribute() 方法返回指定屬性名的屬性值。
               var xmlDoc=xhtp.responseXML;
                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+"</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>

3）運行結果：

正文結束！~~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AJAX異步傳輸——以php文件傳輸為例 AJAX傳輸圖片文件如何發送post請求的時候傳輸xml文件？以QQ傳輸文件為例-設計測試用例 ajax是怎樣傳輸數據的? gRPC流式傳輸，以視頻傳輸為例 blob數據ajax傳輸 Django之Ajax傳輸數據 jq 和原生js進行傳輸文件ajax請求 ajax傳輸數組類型的參數