Accentsconagua

Hoe AJAX-verzoeken te doen met Raw Javascript

Code
Share

Javascript-frameworks hebben eenvoudige AJAX-functies omgezet in oneliners. Dit is vrij ongelooflijk, gezien het feit dat het meer dan twintig zou vereisen om hetzelfde te doen met onbewerkt Javascript. Toch is het belangrijk om te leren wat 'onder de motorkap' zit.


screencast

Laatste script

Dit is een relatief eenvoudig script waarmee u asynchroon naar pagina's kunt vragen met behulp van een "load (URL, CALLBACK)" -functie.

 // Onze vereenvoudigde "load" -functie accepteert een URL en een CALLBACK-parameter. load ('test.txt', function (xhr) document.getElementById ('container'). innerHTML = xhr.responseText;); functie laden (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"] for (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');

Een paar opmerkingen om te overwegen tijdens het kijken

onreadystatechange zal vijf keer schieten als uw opgegeven pagina wordt gevraagd.

  • 0: uninitialized
  • 1: bezig met laden
  • 2: loaded
  • 3: interactieve
  • 4: compleet

Een waarde van "4" is waarnaar we op zoek zijn. Zodra het is bereikt, weten we dat we vrij zijn om een ​​actie uit te voeren met de geretourneerde gegevens.

XMLHttpRequest en ActiveXObject

Moderne browsers gebruiken het "XMLHttpRequest" -object om asynchrone verzoeken te doen. Dat betekent dat, als u IE6 wilt negeren, u de ActiveXObject-controle kunt verwijderen - dit gedeelte.

 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"]; for (var i = 0, len = versions.length; i < len; i++)  try  xhr = new ActiveXObject(versions[i]); break;  catch(e)  // end for

In plaats daarvan zou je gewoon "var xhr = new XMLHttpRequest ();" kunnen schrijven. Wees voorzichtig met deze methode. Eenmaal geabstraheerd naar zijn eigen "load" -functie, is het eenvoudig om de IE-controle zo te houden.

Kom uit de globale ruimte

Als u meerdere verzoeken doet, kunt u overwegen om uw code naar een eigen object te verplaatsen. In plaats van de functie "laden" rechtstreeks te gebruiken, gebruikt u "myObject.load ();". Een basisrichtlijn om dit te bereiken zou zijn:

 var ajax = load: function () // hier plakken, otherMethod: someFunction () // hier plakken ajax.load ();

Conclusie

Ik twijfel er niet aan dat sommigen van jullie een reactie achterlaten met iets in de trant van: "Waarom zou ik dit ooit doen wanneer het met slechts één regel jQuery kan worden gedaan?" Het antwoord is omdat je moet leren wat er onder de motorkap van je auto zit, om zo te zeggen. Frameworks zoals Mootools en jQuery hebben Javascript ongelofelijk toegankelijk gemaakt voor ontwerpers. Als u in deze categorie valt, raad ik u ten zeerste aan ook een raw Javascript-boek op te halen. Er is naar mijn mening niets mis mee om beide tegelijk te leren. Wees alleen zeker dat je beide leert!


Het lijkt op werken met WordPress als je PHP niet kent. Natuurlijk, het is mogelijk - maar zou je echt willen?

Hopelijk moet u hiermee aan de slag gaan! Ik zou graag je gedachten horen! Fijn weekend. Tot maandag of op Twitter!

  • Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.


Code
×