Exemple AJAX
Pour vous aider à comprendre le fonctionnement d'AJAX, nous avons créé une petite application AJAX :
Exemple
<html><!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","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Analyse de l'instance AJAX
ci-dessus L'application AJAX contient un div et un bouton. La section
div est utilisée pour afficher les informations du serveur. Lorsque l'on clique sur le bouton, il se charge d'appeler une fonction appelée loadXMLDoc() :
<!DOCTYPE html>
<html>
<body>
<div id="myDiv"><h2>Laissez AJAX modifier ce texte</h2>< ;/div>
<button type="button" onclick="loadXMLDoc()">Modifier Contenu</button>
</body>
</html>
<html>
<body>
<div id="myDiv"><h2>Laissez AJAX modifier ce texte</h2>< ;/div>
<button type="button" onclick="loadXMLDoc()">Modifier Contenu</button>
</body>
</html>
Ensuite, ajoutez une balise <script> Cette balise contient la fonction loadXMLDoc() :
<head>
<script>
fonction loadXMLDoc()
{
.... Le script AJAX va ici ...
}
</script>
</head>
<script>
fonction loadXMLDoc()
{
.... Le script AJAX va ici ...
}
</script>
</head>
Les chapitres suivants vous expliqueront comment fonctionne AJAX.
