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

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik

AJAX - Sambutan pelayan

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]