AJAX与XML文件交互
ajax与XML文件交互:
通过ajax可以与XML文件进行相互交互。
最为典型的应用就是读取XML文件的内容,下面就通过代码实例做一下介绍。
代码如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var xmlDoc = xmlhttp.responseXML; var str = ""; var targets = xmlDoc.getElementsByTagName("target"); for (index = 0; index < targets.length; index++) { str = str + targets[index].childNodes[0].nodeValue + "<br>"; } document.getElementById("show").innerHTML = str; } } xmlhttp.open("GET", "demo/ajax/xml/XML.xml", true); xmlhttp.send(); } window.onload = function () { var obt = document.getElementById("bt"); obt.onclick = function () { loadXMLDoc(); } } </script> </head> <body> <div> <div id="show"></div> <input id="bt" type="button" value="查看效果"/> </div> </body> </html>
在上面的代码中,xmlhttp.responseXML返回的是一个xml对象,然后再利用相应的dom操作即可实现想要的效果。
xml文件代码如下:
<?xml version="1.0" encoding="utf-8" ?> <bookstore> <book> <range>前端专区</range> <author>php中文网</author> <target>css教程</target> </book> <book> <range>前端专区</range> <author>php中文网</author> <target>div教程</target> </book> <book> <range>资源专区</range> <author>php.cn</author> <target>特效下载</target> </book> <book> <range>前端专区</range> <author>php.cn</author> <target>教程下载</target> </book> </bookstore>