Trong bài này sẽ trình bày ví dụ minh họa cách tương tác với một tệp XML sử dụng kỹ thuật Ajax.
chuẩn bị tệp cd_catalog.xml: --> laedaily.com/laravel-filemanager/photos/1/php/cd_catalog.xml
Trong ví dụ này sẽ tạo chức năng khi người dùng select một đĩa CD sẽ hiện ra bảng thông tin CD đó
Tạo file index.php có mã như sau:
<html>
<head>
<script>
function showCD(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.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="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>
Giải thích:
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("http://laedaily.com/laravel-filemanager/photos/1/php/cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++) {
//Process only element nodes
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++) {
//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("" . $cd->item($i)->nodeName . ": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("
");
}
}
chuẩn bị tệp cd_catalog.xml: --> laedaily.com/laravel-filemanager/photos/1/php/cd_catalog.xml
Trong ví dụ này sẽ tạo chức năng khi người dùng select một đĩa CD sẽ hiện ra bảng thông tin CD đó
Tạo file index.php có mã như sau:
<html>
<head>
<script>
function showCD(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.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="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>
Giải thích:
- Kiểm tra nếu một đĩa CD được chọn
- Tạo một đối tượng XMLHttpRequest
- Sử dụng hàm onreadystatechange để lắng nghe các sự kiện từ máy chủ
- Gửi yêu cầu tới tệp PHP (getcd.php) trên máy chủ
- Lưu ý rằng tham số q được thêm vào url (getcd.php?q = " + str)
- Và biến str chứa nội dung của trường đầu vào
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("http://laedaily.com/laravel-filemanager/photos/1/php/cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++) {
//Process only element nodes
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++) {
//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("" . $cd->item($i)->nodeName . ": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("
");
}
}
Sửa lần cuối:
