Getting started with AJAX Premiers pas avec AJAX

This guide provides some background info on Ajax, and then jumps right in and gets you started with examples. Ce guide fournit des renseignements de base sur Ajax info, et puis les sauts en droit et obtient que vous avez commencé avec des exemples.

JavaScript has been the main use for XMLHttpRequest objects for a good number of years now, but only recently did it start to gain some “fame”. JavaScript a été le principal recours pour les objets XMLHttpRequest pour un bon nombre d'années maintenant, mais ce n'est que récemment il a commencer à acquérir une certaine "notoriété". A lot of the ruckus has to do with the many advanced web applications having web developers that see it, drool and want their own site to have those same exact advanced applications/features. Une grande partie de l'Ruckus a à voir avec les nombreuses applications Web avancées ayant développeurs de sites Web que voir, baver et veulent que leur propre site d'avoir exactement les mêmes applications de pointe / fonctionnalités. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax Mais certains d'entre elle a également à voir avec le groupe de personnes à AdaptivePath qui ont nommé cette application Ajax

Ajax Beginners: What in the world is Ajax? Ajax débutants: Qu'est-ce que dans le monde est Ajax?

In a nutshell? En un mot? Well Ajax is a solution to web interfaces. Ajax est bien une solution à des interfaces web.

Commonly, the web user enters some data or makes a simple choice, and clicks a button finalizing that choice or data entry and sends the data over to the server. Généralement, l'utilisateur entre des données ou fait un choix simple, et clique sur un bouton de finaliser ce choix ou l'entrée de données et envoie les données sur le serveur. The server hastily observes the data and sends back an entire new web page. Le serveur hâte observe les données et renvoie une toute nouvelle page web. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. Le fait d'avoir à recharger une page toutes les fois que vous voulez faire quelque chose est très ennuyeux, disjonctive et extrêmement temps considérable pour l'utilisateur. XMLHttpRequest resurfaces the browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! XMLHttpRequest refait le navigateur-serveur à l'interaction dans les coulisses, de sorte que l'utilisateur peut seulement continuer à jouer avec la même page, alors même que les éléments sur la page parlons au serveur!

With JavaScript we’ve always been able to server-side script without anything happening in the browser by using a few classic tricks up our sleeves. Avec JavaScript, nous avons toujours été en mesure de script côté serveur sans passe-t-il quoi que ce soit dans le navigateur à l'aide de quelques astuces classique jusqu'à nos manches.

Caching form data to a file with JavaScript on a server is good, but this usually doesn’t return any useful information to the JavaScript that calls it, so its effectiveness is very limited. La mise en cache des données de formulaire dans un fichier avec JavaScript sur un serveur est de bonne qualité, mais généralement ce ne retourne pas toutes les informations utiles pour le code JavaScript qui appelle, de sorte que son efficacité est très limitée. Ajax, however, can get a full parcel of data back from the script it calls. Ajax, cependant, peut obtenir une parcelle de données à partir du script il appelle. Hence the “XML” part of the name - which really is just there for looks of sorts, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML isn’t your preferred choice. D'où la "XML" une partie du nom - qui est vraiment juste pour y ressemble en quelque sorte, un peu comme le "Java" de la partie JavaScript, parce que les données renvoyées peuvent être en texte simple ou ce que vous voulez, si XML n'est pas votre choix.

This alone opens up so many exciting possibilities. Ce seul ouvre tant de possibilités passionnantes. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Chaque formulaire de soumission, chaque JavaScript état de cause, et quelle que soit d'autre application, peuvent désormais interagir avec le serveur de bases de données du côté de l'offre et la puissance de traitement! Data retrieval, password authentication, image generation - you just name it, Ajax can activate it. Extraction de données, mot de passe d'authentification, la génération d'images - que vous venez de nommer, Ajax pouvez l'activer.

Putting Ajax Into Practice Mettre en pratique Ajax

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. La seule chose qui limite Ajax-Web application est votre imagination et par le soutien navigateur. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Les navigateurs basés sur Mozilla peut le faire, Safari, et les nouvelles versions de Internet Explorer, Opera 8, mais pas Opera 7. It’s best to slot in an alternative way of doing things for users who aren’t as witty as you’d hope for them to be. Il est préférable de fente dans une autre façon de faire les choses pour les utilisateurs qui ne sont pas aussi spirituel que vous avez espoir pour eux d'être. Also, Internet Explorer does things somewhat differently (most definitely) from all the other browsers, so it’s pretty essential to work the code to account for the irksome 80% of the population who rely on Explorer. De plus, Internet Explorer fait les choses un peu différemment (certainement plus) de tous les autres navigateurs, il est très essentiel de travailler le code pour tenir compte de la ennuyeux 80% de la population qui comptent sur Explorer.

Now to the exciting part! Maintenant à la partie passionnante! Let’s generate a straightforward application that can accept input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser in use. Let's générer une application simple qui peut accepter l'entrée de l'utilisateur, il passe à PHP sur le serveur que les contrôles contre une base de données, et renvoie le résultat au navigateur utilisé. We assimilate it in three parts. Nous assimiler en trois parties.

First, we need an HTML form. Tout d'abord, nous avons besoin d'un formulaire HTML. As you’ can see below: Comme vous pouvez le voir ci-dessous:

 <html> 
  <head> 
  <title>Report</title> <title> le rapport </ title> 
  <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <script type='text/javascript' src='xhr.js'> </ script> </ head> <body> <form action="fallbackpage.php" method="post"> 
  <p>Welcome, student. <p> Bienvenue, étudiant. Please enter your essay here:<textarea name="essay" id="essay"> S'il vous plaît, entrez votre texte ici: <textarea name="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ textarea> <input type = "submit" name = "submit" value = "Soumettre" onclick = "return 
  grade(this.form.essay.value);"> grade (this.form.essay.value); "> 
  </p> </ p> 
  </form> </ form> 
  </body> </ body> 
  </html </ html 

Note: For users without proper support for our script ( named xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Note: Pour les utilisateurs sans soutien en faveur de notre script (nommé xhr.js), la forme sera tout simplement soumettre à la page de repli à fallbackpage.php. Ok, c'est là que le code JavaScript arrive, nous allons considérer lente.

 function grade(essay) { fonction classe (essai) ( 

The first thing we have to do is initialize the object. La première chose que nous avons à faire est de l'initialisation de l'objet. There are two ways we must do this, for different browsers. Il ya deux façons nous devons le faire, pour les différents navigateurs.

 // Mozilla version / / Mozilla version 
     if (window.XMLHttpRequest) { if (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); XHR = new XMLHttpRequest (); 
     } ) 
     // IE version / / IE version 
     else if (window.ActiveXObject) { else if (window.ActiveXObject) ( 
         xhr = new ActiveXObject("Microsoft.XMLHTTP"); XHR = new ActiveXObject ( "Microsoft.XMLHTTP"); 
     } ) 

We then escape the user input to make it URL-safe: Nous avons ensuite échapper à l'entrée utilisateur afin de le rendre sûr URL:

     essay=encodeURIComponent(essay); encodeURIComponent = essai (essai); 

and use the open method of the object to open a new connection to the PHP script: et d'utiliser la méthode ouverte de l'objet pour ouvrir une nouvelle connexion pour le script PHP:

     xhr.open("POST","grade.php"); xhr.open ( "POST", "grade.php"); 

The method requires two arguments: first, the HTTP method (GET or POST) ; second, the URL of the script. A quick HTTP header asserts the script for what it’s getting, and then the send method conveys the actual request: La méthode requiert deux arguments: d'abord, la méthode HTTP (GET ou POST), en deuxième lieu, l'URL du script. Un rapide-tête HTTP affirme le script pour ce qu'il devient, et ensuite envoyer la méthode transmet la demande:

  xhr.setRequestHeader( xhr.setRequestHeader ( 
       'Content-Type', 
       'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); "application / x-www-form-urlencoded; charset = UTF-8 '); xhr.send (essai); 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL. Cette dernière étape n'est pas nécessaire pour les requêtes GET, caractérisé en ce que toutes les données peuvent être contenus dans la chaîne de requête de l'URL.

Obtaining Final Results L'obtention de résultats définitifs

We’re finally ready to see if the HTTP request we made worked. Nous sommes enfin prêt à voir si la requête HTTP nous avons travaillé. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. La propriété readyState compte jusqu'à zéro lors de la demande, et montre 4 lorsque le serveur la page a été chargé avec succès.

  xhr.onreadystatechange=function() { Xhr.onreadystatechange = function () ( 
       if (xhr.readyState==4) { if (xhr.readyState == 4) ( 

If indeed the actual request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. Si, effectivement, la demande de travail, alors nous pouvons obtenir la sortie de l'un script côté serveur en interrogeant la propriété responseText, qui contient une chaîne de caractères. For more of a complex server script output, a responseXML property, which can hold a full document object of XML data, is an option also accessible. Pour plus complexe d'un script serveur de sortie, une propriété responseXML, qui peut contenir un objet de document XML de données, une option est également accessible.

      grade = xhr.responseText; Grade = xhr.responseText; 
       alert ("Nice essay. Your grade is " + grade); alert ( "Nice essai. Votre grade est" + grade); 
     } ) 
     return false; return false; 
  } ) 

In conclusion, the third component consist of PHP script, which basically lives on the server and waits patiently for the JavaScript to pass it some juicy data so it can thrive. En conclusion, le troisième volet composé de script PHP, qui vit essentiellement sur le serveur et attend patiemment le JavaScript pour transmettre des données juteux pour qu'il puisse s'épanouir. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. Cet exemple certaines utilisations de PHP, mais n'importe quelle langue vous voulez - Ruby, Perl, C, ASP - peut répondre à vos besoins ainsi. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. La base de cet exemple de script est un langage naturel grade_essay la fonction appelée () que les grades des étudiants essais de 1 à 100, mais je vais éditer la partie à conserver de l'espace.

  <?php <? php 
  function grade_essay($essay) { grade_essay fonction ($ essai) ( 
       return strlen($essay); retour strlen ($ essai); 
  } ) 
  $essay = urldecode(implode(file('php://input'))); $ essai = urldecode (implode (fichier ( 'php: / / input'))); 
  $grade = grade_essay($essay); $ grade grade_essay = ($ essai); 
  echo $grade; echo $ grade; 
  ?> 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. Le php: / / input attrape le POST de données, qui est mis dans une chaîne de caractères, décodés et transmis à l'algorithme de classement intelligent. The algorithm returns a numeric grade. L'algorithme retourne une qualité numérique. Lastly, we just output the grade with echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Enfin, nous venons de sortie avec le grade écho - normalement, ce serait afficher dans le navigateur, mais depuis le script PHP est en cours d'exécution "dans les coulisses," la chaîne de production est tout simplement retourné à l'JavaScript qui a appelé. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page basically must be set to text/xml . Si vous avez besoin de données structurées, d'un document XML serait sortie avec un écho dans la déclaration la même façon, mais le type de contenu de la page de sortie doit en principe être mis à text / xml.

What the user sees is this: She/He types their essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving him/her a final grade on the essay. Qu'est-ce que l'utilisateur voit est la suivante: il / elle types leur essai dans la zone de texte dans le navigateur, clics Proposer, dans les instants et une alerte boîte apparaît en lui donnant une note définitive sur la dissertation. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP elves, and inevitably returned with a grade, without ever having to reload the page. Invisible, l'essai a été envoyé au serveur, lu et évalué par une équipe de PHP elfes, et inévitablement retourné avec un grade, sans jamais avoir à recharger la page. The user can modify her essay and resubmit it continuously. L'utilisateur peut modifier son essai et de le renvoyer en continu.

And that’s the general substance of the almost magical XMLHttpRequest object! Et que le général de la substance presque magique objet XMLHttpRequest! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever . L'exemple est assez simple et droite, en avant, mais les utilisations de l'objet peut être très, multi intelligent.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit Pour plus d'inspiration et un exemple de l'ingéniosité des applications Ajax, vous pouvez momentanément éviter de visite et SimpleHelp.Net iGoogle iGoogle , , Pageflakes Pageflakes , , Netflix Netflix and et Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. Toutefois, les données et les fonctions que Ajax et envoie des actes est tout simplement à vous.