AJAX XML

<html>
<head>
<script src="vyomselected.js"></script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>

Comme vous pouvez voir il est juste une forme simple de HTML avec une baisse simple enferment dans une boîte vers le bas appelé le « Cd »

Le paragraphe au-dessous de la forme contient une étiquette de division appelée le « txtHint ». La division est employée comme placeholder pour information recherché du web server.

Quand les données choisies d'utilisateur, une fonction appelée le « showCD » sont exécutées. L'exécution de la fonction est déclenchée par l'événement de « onchange » du Javascript. En d'autres termes : Chaque fois que le changement d'utilisateur la valeur de baisse de la boîte de menu vers le bas, le showCD de fonction s'appelle.

Le code de Javascript est donné ci-dessous

Le Javascript d'AJAX

C'est le code de Javascript stocké dans le dossier « vyomselected.js » :

var xmlHttp

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getcustomer.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{ objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

La page de serveur d'AJAX

Le serveur a paginé appelé par le Javascript, est un dossier simple d'asp ayant le nom « getvyomcd1.asp »

La page est écrite dans VBScript pour le serveur de l'information d'Internet (IIS). Elle pourrait facilement être récrite dans PHP, ou quelques autres langues de serveur.

Le code court une question contre un dossier de XML et renvoie le résultat comme format de HTML.

q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next