masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

AJAX - Sambutan pelayan

Untuk mendapatkan respons daripada pelayan, gunakan sifat responseText atau responseXML bagi objek XMLHttpRequest.

ResponseText dan ResponseXML

Kandungan mesej respons mungkin datang dalam pelbagai bentuk, seperti XML, teks biasa, (X)HTML atau Notasi Objek JavaScript ( JSON). Kami boleh memprosesnya dalam dua cara berbeza bergantung pada format data yang diterima: menggunakan responseText atau responseXML.

Kaedah responseText digunakan untuk format yang bukan berasaskan XML. Ia mengambil maklumat respons sebagai rentetan dan mengembalikan kandungan yang tepat. Teks biasa, (X)HTML dan JSON semuanya menggunakan responseText. responseText bukan sahaja boleh menambah kandungan pada halaman, ia juga berguna apabila menyahpepijat permintaan AJAX. Sebagai contoh, anda mungkin tidak bersedia untuk menganalisis data kerana anda masih belum mengetahui rupa semua teg, sama ada ia dalam format XML atau fail JSON. Ini memerlukan cara untuk mengesan data yang sedang dianalisis. Sebaik sahaja anda mengetahui semua nama tag, anda hanya perlu menulis kod tersebut.

Penggunaan responseXML juga agak mudah. Tetapi sama dengan format JSON, XML memerlukan analisis data. Perkara pertama yang perlu kita lakukan ialah mengenal pasti nod akar dalam tindak balas XML.

var response = ajax.request.responseXML.documentElement;

Seterusnya, kami mendapat semua elemen mengikut nama dan mendapatkan nilainya:
pengepala var = response.getElementsByTagName('header')[0].firstChild.data;

var description = response.getElementsByTagName('description ') [0].firstChild.data;

var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;

Akhir sekali, kami memaparkan maklumat respons dalam teg div yang sepadan:

$("body").html("<b>" + pengepala + "</b> & lt; br/& gt; "
+penerangan+" & lt; bunyi RCE FILES & LT ;/a>";

sifat responsText mengembalikan respons sebagai rentetan:

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadXMLDoc()
        {
            var xmlhttp;
            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 (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","ajax_info.txt",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>

Jika respons daripada pelayan adalah XML dan diperlukan Untuk menghuraikan sebagai objek XML, minta fail cd_catalog.xml menggunakan atribut responseXML

dan menghuraikan respons: 

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
    var xmlhttp;
    var txt,x,i;
    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 (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        xmlDoc=xmlhttp.responseXML;
        txt="";
        x=xmlDoc.getElementsByTagName("ARTIST");
        for (i=0;i<x.length;i++)
          {
          txt=txt + x[i].childNodes[0].nodeValue + "<br>";
          }
        document.getElementById("myDiv").innerHTML=txt;
        }
      }
    xmlhttp.open("GET","cd_catalog.xml",true);
    xmlhttp.send();
 }
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>

Contoh: 

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset=utf-8" />
 <title>Using responseText with innerHTML</title>
 <script type="text/javascript">
 var xmlHttp;
 function createXMLHttpRequest(){
     if(window.ActiveXObject){
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }else if(window.XMLHttpRequest){
     xmlHttp = new XMLHttpRequest();
     }
  }
     function startRequest(){
         createXMLHttpRequest();
         xmlHttp.onreadystatechange = handleStateChange;
         xmlHttp.open("GET","innerHTML.xml",true);
         xmlHttp.send(null);
     }
     function handleStateChange(){
         if(xmlHttp.readyState == 4){
             if(xmlHttp.status == 200){
             document.getElementById("results").innerHTML=xmlHttp.responseText;
             }
         }
    }
 </script>
 </head>
 <body>
     <form>
        <input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
     </form>
     <div id="results"></div>
 </body>
</html>

innerHTML.xml fail

<?xml version="1.0" encoding="utf-8"?>
<table border="1">
 <tbody>
 <tr><th>Activity Name</th><th>Location</th><th>Time</th></tr>
 <tr><td>Waterskiing</td><td>Dock #1</td><td>9:00 AM</td></tr>
 <tr><td>Volleyball</td><td>East Court</td><td>2:00 PM</td></tr>
 <tr><td>Hiking</td><td>Trail 3</td><td>3:30 PM</td></tr>
 </tbody>
</table>


Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Using responseText with innerHTML</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } function startRequest(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET","innerHTML.xml",true); xmlHttp.send(null); } function handleStateChange(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ document.getElementById("results").innerHTML=xmlHttp.responseText; } } } </script> </head> <body> <form> <input type="button" value="Search for Today's Activities" onclick="startRequest();"/> </form> <div id="results"></div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan