Ajax/Ajax XML

მაგალითი:

ეს არის HTML გვერდი. ის შეიცავს უბრალო HTML ფორმას და ბმულს JavaScript-ზე.

<html>
<head>
<script src="selectcd.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>

როგორც ხედავთ, ეს არის უბრალო HTML ჩამოსაშლელი მენიუ, სახელად "cds".

ზემოთ მოყვანილ მაგალითში პარაგრაფი შეიცავს განყოფილებას "txtHint". ეს განყოფილება გვერდზე ინახავს სივრცეს, ვებ სერვერიდან გამოგზავნილი მონაცემების გამოსასახავად.

როდესაც მომხმარებელი მონისნავს მონაცემს, ფუნქცია სახელად "showCD", გაეშვება. ამ ფუნქციის გაშვებას იწვევს "onchange" მოვლენა. სხვა სიტყვებით: ყოველთვის, როდესაც მომხმარებელი შეცვლის მნიშვნელობას ჩამოსაშლელ მენიუში, გამოძახებულ იქნება ფუნქცია showCD.

Ajax JavaScript რედაქტირება

ეს არის ფაილში "selectcd.js" მოთავსებული JavaScript.

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="getcd.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)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

Ajax სერვერული გვერდი რედაქტირება

სერვერული გვერდი, რომელსაც იძახებს JavaScript, არის უბრალო ASP გვერდი, სახელად " getcd.asp".

<%
response.expires=-1
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
%>