Lessons XXXIII : Tương tác XML dùng AJAX

Tương tác XML dùng AJAX

Thứ tư, 20 Tháng 8 2008 02:30 w3schools.com Hướng dẫn lập trình Ajax-JavaScript
Email In

Tiếp tục với Ajax, và cũng là một vấn đề nảy sinh cho các lập trình viên thân yêu khi mà chúng ta không tương tác Database mà tương tác file XML???

Bạn chọn một CD từ danh sách và thông tin CD đó sẻ thể hiện ngay bên dưới.

HIỆN THỰC PHÍA CLIENT:

Ta có một form HTML như vầy:

<html>
<head>
<script src="/trung-tam-tin-hoc/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>

và nội dung file selectcd.js như sau:

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;
}

HIỆN THỰC PHÍA SERVER:

Tạo một file ASP getcd.asp: (hoặc có thể tham khảo file nầy dạng PHP tại đây)

<%
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
%>

Vâng, rất đơn giản thôi. Hỡi những người học Q6 – XML, còn hông mau ứng dụng làm Project đi nào

Xem demo và tham khảo thêm tại đây

Nguồn: 2IT.in
Theo w3schools.com

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: