JS通过ajax动态读取xml文件内容的方法_javascript技巧-js教程-PHP中文网

JS通过ajax动态读取xml文件内容的方法_javascript技巧

php中文网

发布： 2016-05-16 16:07:48

原创

1540人浏览过

本文实例讲述了js通过ajax动态读取xml文件内容的方法。分享给大家供大家参考。具体分析如下：

下面的JS代码读取note.xml文件，并填充显示相关字段

HTML文件代码如下

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById('A1').innerHTML=xmlhttp.status;
  document.getElementById('A2').innerHTML=xmlhttp.statusText;
  document.getElementById('A3').innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1172">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680100168511.png" alt="LibLib AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1172">LibLib AI</a>
                            <p>中国领先原创AI模型分享社区，拥有LibLib等于拥有了超多模型的模型库、免费的在线生图工具，不考虑配置的模型训练工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="LibLib AI">
                                <span>647</span>
                            </div>
                        </div>
                        <a href="/ai/1172" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="LibLib AI">
                        </a>
                    </div>
                
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadXMLDoc('note.xml')">Get XML data</button>
</body>
</html>

登录后复制

xml文件内容如下

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

大家都在看：

JavaScript性能监控_APM系统设计与实现使用js中replace()方法替换当前页面 JavaScript性能监控_关键指标采集分析数字安全：JS中的大整数与精度问题 js中可选的回调函数