HTML/Ajax/XML数据交互:HTML通过Ajax读取XML的存储信息

JavaScript 同时被 2 个专栏收录
17 篇文章 0 订阅

    介绍:

    上一篇Ajax文章中对Ajax的XHR对象作出了介绍,这篇博客介绍下如果使用Ajax从服务端获取数据。之前分析



过,Ajax是向服务端请求服务的,说白了就是想数据库中进行信息验证或取存。本篇博客没有使用数据库而是采用了



XML存储数据,这样大家看的也清楚。能明白来龙去脉。



分析实现过程:



    需要的文件:HTML页面、【.js】文件、【.XML】文件。



    实现的思路:



        首先在HTML设置好提交事件,并且设置一个div(或其它)容器,准备接受数据;



        其次是在js文件中写好使用Ajax的五个步骤,(将open方法的URL地址改成项目中Xml文件所在的地址)。



        最后使用Xml语言写入一些存储的数据,方便查询。


                               

    代码:



    HTML:

<span style="font-family:SimSun;font-size:18px;"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="ReadXmk.js"></script>
    <title>Ajax/XML</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="CDShow">       
    <button οnclick="loadXMLDoc('XMLFile1.xml')">获取详细信息</button>
    </div>
    </form>
</body>
</html>
</span>


     JavaScript(Ajax):


<span style="font-family:SimSun;font-size:18px;">function loadXMLDoc(url)
{
    //alert(url);
    var xmlhttp;
    var txt, x, xx, i;
    //创建Ajax对象。解决不同浏览器兼容问题
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //alert(1);
    //响应服务
    xmlhttp.onreadystatechange = function () {
           //4表示请求处理中;200表示处理OK;
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //拼接table 表格
            //创建table,表头为title 和artist和county
            txt = "<table border='1'><tr><th>Title</th><th>Artist</th><th>County</th></tr>";
            //从xml中获取CD标签里的内容
            x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
            for (i = 0; i < x.length; i++) {
                //添加新的一行,标签内容为Title
                txt = txt + "<tr>";
                xx = x[i].getElementsByTagName("TITLE");
  
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td> </td>";
                    }
                }
                xx = x[i].getElementsByTagName("COUNTRY");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td> </td>";
                    }
                }
                xx = x[i].getElementsByTagName("ARTIST");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td> </td>";
                    }
                }
                txt = txt + "</tr>";
            }
            //完成table表格拼接
            txt = txt + "</table>";
            //将table插入
            document.getElementById('CDShow').innerHTML = txt;
        }
    }
    //xmlhttprequest 的方法 open 和send
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    alert("加载完成!");
}</span>


     XML:


<span style="font-family:SimSun;font-size:18px;"><CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
  <CD>...</CD>
  <CD>...</CD>
  ...
  <CATALOG/></span>


      效果:





      触发单击事件后:





    学习资料:JavaScript入门经典 



              W3C教程



    总结:



        Ajax中的onReadyStateChange被回调函数赋值,这是实现异步调用的关键点,另外回调函数直接操作DOM,



所以才能实现局部的刷新,而不是整个页面的刷新。



        学习还很单纯,有说的不对的,请指出,谢谢!!!

     

  • 1
    点赞
  • 79
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值