Accueil 
Ajax Asynchronous JavaScript And XML.
skypeConnexionrank |
Ajax Asynchronous JavaScript And XML.
BasesAjax n'est pas une nouvelle technologie, mais plutôt une manière d'utiliser (disons une technique) un ensemble de standards déjà existants et de certaines technologies qui leurs sont associé. Les standards en question sont:
et un ensemble de technologies associé tel que:
Comme vous le constatez, ce n'est pas vraiment nouveaux! Alors? Pourquoi utiliser un nouveau sigle: Ajax? étudions un exemple pour donner une réponse! La technique Ajax permet d'échanger d'une manière asynchrone des données (morceaux d'interface ou de pages) entre le client léger et le serveur. L'utilisateur à un meilleur temps de réponse pour les interactions; ont pourrais même considérer le client léger (navigateur) comme le bureau du Web (par similitude au bureau de votre système préféré "Le Desktop") . Pour cela les client Ajax utilise typiquement l'objet XMLHttpRequest (voir JavaScripts) pour récupérer des données depuis le serveur web ou d'application. Avant de commencerVous aurer besoin d'avoir un minimum de notions HTML/XHTML/JavaScripts, vous pouver suivre le cours sur le site de e-learning de l'ISAE Développement web Avec AJAX, votre JavaScript? communique directement avec le serveur, en utilisant l'objet XMLHttpRequest. Avec cet objet object, JavaScript? echange des donnée avec le serveur web, sans recharger la page entière. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly. Un premier exemplePartons d'un formulaire html<html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Vérifions que le navigateur est supporté!<html>
<body>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
AJAX - un peu plus sur l'objet XMLHttpRequestBefore sending data to the server, we have to explain three important properties of the XMLHttpRequest object. The onreadystatechange Property After a request to the server, we need a function that can receive the data that is returned by the server. The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:
xmlHttp.onreadystatechange=function()
{
// We are going to write some code here
}
The readyState Property
The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed. Here are the possible values for the readyState propery: State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete We are going to add an If statement to the onreadystatechange function to test if our response is complete (this means that we can get our data):
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Get the data from the server's response
}
}
~/np~
The responseText Property
The data sent back from the server can be retrieved with the responseText property.
In our code, we will set the value of our "time" input field equal to responseText:
~pp~
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
The next chapter shows how to ask the server for some data! AJAX - Sending a Request to the Servero send off a request to the server, we use the open() method and the send() method. The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and PHP file are in the same directory, the code would be: xmlHttp.open("GET","time.php",true); xmlHttp.send(null); Now we must decide when the AJAX function should be executed. We will let the function run "behind the scenes" when the user types something in the username text field: <form name="myForm"> Name: <input type="text" > Time: <input type="text" name="time" /> </form> Our updated AJAX-ready "testAjax.htm" file now looks like this:
<html>
<body>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
<form name="myForm">
Name: <input type="text"
>
Time: <input type="text" name="time" />
</form>
</body>
</html>
The next chapter makes our AJAX application complete with the "time.php" script.
Le scripts serveur time.php<?php echo time(); ?>
|
