AJAX can be used for interactive communication with an XML. In this article I will show you, how to read an xml file using with AJAX.
Let’s have an example, how to read links from xml file using with AJAX in PHP.
Example:
Here I am creating simple web page UI which contains one text box, when we enter a character into textbox then this character will be searched into xml file and appropriate link will be returned to the web browser.
Coding of ‘LiveSearchAjax.php’:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Live Search content with AJAX</title>
<script type="text/javascript">
function showLivSearch(str) {
if (str.length==0) {
document.getElementById("liveSuggest").innerHTML= "";
document.getElementById("liveSuggest").style.border ="0px";
return;
}
if (window.XMLHttpRequest) {
xmlHttp=newXMLHttpRequest();
}
xmlHttp.onreadystatechange=function () {
if (xmlHttp.readyState==4) {
document.getElementById("liveSuggest").innerHTML= xmlHttp.responseText;
document.getElementById("liveSuggest").style.border ="1px solid Black";
}
}
xmlHttp.open("GET", "LiveSearchContent.php?qryVal="+str, true);
xmlHttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p style="background-color: gold;width: 200px;" > Type something here...</p>
</td>
<td>
<input type="text" id="livSearch" onkeyup="javascript: showLivSearch(this.value);"></input>
</td>
</tr>
</table>
<div id ="liveSuggest">
</div>
</body>
</html>
Now, when you type anything into text box then ‘LiveSearchContent.php’ script will be called and return the appropriate links of that character or string.
Coding of ‘LiveSearchContent.php’:
<?php
// CreateDOMDocument instance
$xmlDoc= new DOMDocument();
// load XML file
$xmlDoc->load("C://Users//Sachindra//Desktop//liveSearch.xml");
// get the parenet tag name
$ptag = $xmlDoc->getElementsByTagName('link');
// get the parameter value of page url
$val = $_GET['qryVal'];
//lookup all links from the xml file if length of val>0
if (strlen($val)>0)
{
$hint="";
for($i=0; $i<($ptag ->length); $i++)
{
// find out the child node
$child1=$ptag->item($i)->getElementsByTagName('title');
$child2=$ptag->item($i)->getElementsByTagName('url');
// check the child node condition
if ($child1->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($child1->item(0)->childNodes->item(0)->nodeValue,$val))
{
// check if no hints is available
if ($hint=="")
{
// open the link in new tab
$hint="<a href='" .
$child2->item(0)->childNodes->item(0)->nodeValue .
"'target='_blank'>" .
$child1->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{ $hint=$hint . "<br /><a href='" .
$child2->item(0)->childNodes->item(0)->nodeValue .
"'target='_blank'>" .
$child1->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to no suggestion available
if ($hint=="")
{
$response="No suggestion";
}
else
{
$response=$hint;
}
//diaplay the output response
echo $response;
?>
Here I am using ‘liveSearch.xml’ file. The structure of ‘liveSearch.xml’ file:
Leave Comment