Ajax XML

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: Xem tại đây

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

Tệp PHP (getuser.php) truy vấn đối với tệp tin cd_catalog.xml và trả về kết quả dưới dạng HTML:

    $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("
"); } }
Xem ví dụ »