AJAX XML

AJAX can be used to communicate interactively with XML files.

AJAX XML Example

The following example will demonstrate how a web page reads information from an XML file through AJAX:

Example

Select a CD: Cat Stevens

CD info will be listed here...

Example explanation - HTML page

When When the user selects a CD in the drop-down list above, a function named "showCD()" is executed. This function is triggered by the "onchange" event:

   <html>
        <head>
        <script>
        function showCD(str)
        {
            if (str=="")
            {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest)
            {
                // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","getcd.php?q="+str,true);
            xmlhttp.send();
        }
        </script>
        </head>
        <body>
        <form>
        Select a CD:
        <select name="cds" onchange="showCD(this.value)">
        <option value="">Select a CD:</option>
        <option value="Bob Dylan">Bob Dylan</option>
        <option value="Bonnie Tyler">Bonnie Tyler</option>
        <option value="Dolly Parton">Dolly Parton</option>
        </select>
        </form>
        <div id="txtHint"><b>CD info will be listed here...</b></div>
        </body>
     </html>

showCD() function will perform the following steps:

1) Check whether a CD is selected

2) Create an XMLHttpRequest object 3) Create a function that executes when the server response is ready

4) Send a request to a file on the server

5) Please note the parameters added to the end of the URL (q ) (Contains the contents of the drop-down list)

Note:

A lot of knowledge about JavaScript is used in the above examples. Please refer to this chapter first: JavaScript Tutorial

PHP file

The server page called above through JavaScript is a PHP file named "getcd.php".

The PHP script loads the XML document, "cd_catalog.xml", runs the query against the XML file, and returns the results in HTML:

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
// 处理元素节点
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
// 处理元素节点
if ($cd->item($i)->nodeType==1)
{
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>

When the CD query is sent to the PHP page from JavaScript When, it will happen: 1. PHP creates an XML DOM object

2. Finds names in all <artist> elements that match the data passed by JavaScript

3. Output the album information and send back the "txtHint" placeholder

Summary: Return xml format

Advantages:

XML is a universal data format.

It is not necessary to force the data into a defined format, but to customize appropriate tags for the data. Use DOM to fully control the document.

Disadvantages:

If the document comes from the server, you must ensure that the document contains correct header information. If the document type is incorrect, the value of responseXML will be empty.

When the browser receives a long XML file, DOM parsing may be complicated.

Continuing Learning

new file

<?php //需要与前面的HTML文件联合使用 $q=$_GET["q"]; $xmlDoc = new DOMDocument(); $xmlDoc->load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { // 处理元素节点 if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i<$cd->length;$i++) { // 处理元素节点 if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b> "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br>"); } } ?>

submit Reset Code

Automatic operation

AJAX XML

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]