AJAX - Réponse du serveur
Pour obtenir une réponse du serveur, utilisez la propriété ResponseText ou ResponseXML de l'objet XMLHttpRequest.
ResponseText et ResponseXML
Le contenu du message de réponse peut se présenter sous de nombreuses formes différentes, telles que XML, texte brut, (X)HTML ou notation d'objet JavaScript ( JSON) . Nous pouvons les traiter de deux manières différentes selon le format des données reçues : en utilisant ResponseText ou ResponseXML.
La méthode ResponseText est utilisée pour les formats qui ne sont pas basés sur XML. Il prend les informations de réponse sous forme de chaîne et renvoie le contenu exact. Le texte brut, (X)HTML et JSON utilisent tous ResponseText. responseText peut non seulement ajouter du contenu à la page, il est également utile lors du débogage des requêtes AJAX. Par exemple, vous n'êtes peut-être pas prêt à analyser les données car vous ne savez pas encore à quoi ressemblent toutes les balises, qu'elles soient au format XML ou dans des fichiers JSON. Cela nécessite un moyen de détecter les données analysées. Une fois que vous connaissez tous les noms de balises, il ne vous reste plus qu’à écrire le code.
L'utilisation de ResponseXML est également assez simple. Mais comme le format JSON, XML nécessite une analyse des données. La première chose que nous devons faire est d'identifier le nœud racine dans la réponse XML.
var réponse = ajax.request.responseXML.documentElement;
Ensuite, nous récupérons tous les éléments par nom et obtenons leurs valeurs :
var header = réponse.getElementsByTagName('header')[0].firstChild.data
var description = réponse.getElementsByTagName('description ') [0].firstChild.data;
var sourceUrl = réponse.getElementsByTagName('sourceUrl')[0].firstChild.data;
Enfin, nous affichons les informations de réponse dans la balise div correspondante :
$("body").html("<b>" + header + "</b> & lt; br/& gt; "
+description+" & lt; br/& gt; & lt; "
+" & lt; le son RCE FILES & LT ;/a>";
la propriétéresponseText renvoie la réponse sous forme de chaîne :
<!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>Si la réponse de le serveur est XML et est requis. Pour analyser en tant qu'objet XML, demandez le fichier cd_catalog.xml en utilisant l'attribut réponseXML
et analysez la réponse :
<!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>Exemple :
<!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>fichier innerHTML.xml
<?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>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
