AJAX interacts with XML files
Interaction between ajax and XML files:
You can interact with XML files through ajax.
The most typical application is to read the content of XML files. Let’s introduce it through code examples.
The code is as follows:
<!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="http://www.php.cn/" /> <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>
In the above code, xmlhttp.responseXML returns an xml object, and then the corresponding dom operation can be used to achieve the desired effect.
xml file code is as follows:
<?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>