Accentsconagua

Comment faire des demandes AJAX avec Javascript brut

Code
Share

Les frameworks Javascript ont transformé des fonctions AJAX simples en une seule ligne. C'est assez incroyable, compte tenu du fait qu'il en faudrait plus de vingt pour accomplir la même chose avec du Javascript brut. Néanmoins, il est important d'apprendre ce qui est "sous le capot".


Screencast

Script final

Ceci est un script relativement simple qui vous permettra de demander des pages de manière asynchrone en utilisant une fonction "load (URL), CALLBACK)".

 // Notre fonction "load" simplifiée accepte les paramètres URL et CALLBACK. load ('test.txt', fonction (xhr) document.getElementById ('conteneur'). innerHTML = xhr.responseText;); fonction load (url, callback) var xhr; if (typeof XMLHttpRequest! == 'undefined') xhr = new XMLHttpRequest (); else var versions = ["MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp"] pour (var i = 0) , len = versions.length; i < len; i++)  try  xhr = new ActiveXObject(versions[i]); break;  catch(e)  // end for  xhr.onreadystatechange = ensureReadiness; function ensureReadiness()  if(xhr.readyState < 4)  return;  if(xhr.status !== 200)  return;  // all is well if(xhr.readyState === 4)  callback(xhr);   xhr.open('GET', url, true); xhr.send(");  // or with jQuery… $('#container').load('test.txt');

Quelques notes à considérer en regardant

onstateystatechange se déclenche cinq fois lorsque votre page spécifiée est demandée.

  • 0: non initialisé
  • 1: chargement
  • 2: chargé
  • 3: interactif
  • 4: Achevée

Nous recherchons une valeur de "4". Une fois atteint, nous savons que nous sommes libres d'effectuer une action avec les données renvoyées..

XMLHttpRequest et ActiveXObject

Les navigateurs modernes utilisent l'objet "XMLHttpRequest" pour effectuer des requêtes asynchrones. Cela signifie que si vous souhaitez ignorer IE6, vous êtes libre de supprimer la vérification ActiveXObject - cette section.

 if (typeof XMLHttpRequest! == 'undefined') xhr = new XMLHttpRequest (); else var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]]; pour (var i = 0, len = versions.length; i < len; i++)  try  xhr = new ActiveXObject(versions[i]); break;  catch(e)  // end for

Au lieu de cela, vous pourriez simplement écrire "var xhr = new XMLHttpRequest ();". Soyez prudent avec cette méthode. Une fois abstraite à sa propre fonction "load", il est facile de garder le contrôle IE tel quel..

Sortez de l'espace global

Si vous faites plusieurs demandes, vous pouvez envisager de déplacer votre code dans son propre objet. Ensuite, plutôt que d’appeler directement la fonction "load", vous utilisez "myObject.load ();". Une ligne directrice de base pour accomplir cela serait:

 var ajax = load: function () // coller ici, otherMethod: someFunction () // coller ici ajax.load ();

Conclusion

Je ne doute pas que certains d'entre vous laisseront un commentaire énonçant quelque chose du genre: "Pourquoi devrais-je faire cela alors que cela peut être fait avec une seule ligne de jQuery?" La réponse est parce que vous avez besoin d'apprendre ce qu'il y a sous le capot de votre voiture, pour ainsi dire. Des frameworks tels que Mootools et jQuery ont rendu le Javascript incroyablement accessible aux concepteurs. Si vous tombez dans cette catégorie, je vous recommande fortement de vous procurer également un livre Javascript brute. À mon avis, il n'y a rien de mal à apprendre les deux simultanément. Assurez-vous d’apprendre à la fois!


Cela ressemble à travailler avec WordPress si vous ne connaissez pas PHP. Bien sûr, c'est possible - mais voudriez-vous vraiment?

Espérons que cela devrait vous permettre de démarrer! J'aimerais entendre vos pensées! Passe un bon weekend. Rendez-vous lundi ou sur Twitter!

  • Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.


Code
×