Accentsconagua

Hvordan lage AJAX-forespørsler med rå Javascript

Kode
Share

Javascript rammer har gjort enkle AJAX-funksjoner til en-liners. Dette er ganske utrolig, med tanke på at det ville kreve mer enn tjue for å oppnå det samme med rå Javascript. Likevel er det viktig å lære hva som er "under hetten".


screen~~POS=TRUNC

Final Script

Dette er et relativt enkelt skript som lar deg asynkront be om sider ved hjelp av en "load (URL, CALLBACK)" -funksjon.

 // Vår forenklet "load" -funksjon aksepterer en URL- og CALLBACK-parameter. last ('test.txt', funksjon (xhr) document.getElementById ('container'). innerHTML = xhr.responseText;); funksjonsbelastning (url, tilbakeringing) var xhr; hvis (type XMLHttpRequest! == 'undefined') xhr = ny XMLHttpRequest (); ellers 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');

Et par notater å vurdere når du ser på

onreadystatechange vil brann fem ganger ettersom den angitte siden er forespurt.

  • 0: initialisert
  • 1: lasting
  • 2: lastet
  • 3: interaktiv
  • 4: fullstendig

En verdi på "4" er det vi søker etter. Når det er nådd, vet vi at vi er fri til å utføre en handling med de returnerte dataene.

XMLHttpRequest og ActiveXObject

Moderne nettlesere benytter "XMLHttpRequest" -objektet for å lage asynkrone forespørsler. Det betyr at hvis du vil ignorere IE6, er du fri til å fjerne ActiveXObject-sjekken - denne delen.

 hvis (type XMLHttpRequest! == 'undefined') xhr = ny XMLHttpRequest (); ellers 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

I stedet kan du bare skrive "var xhr = ny XMLHttpRequest ();". Vær forsiktig med denne metoden. Når det er abstrakt til sin egen "load" -funksjon, er det enkelt å holde IE-sjekken som den er.

Komme ut av det globale rommet

Hvis du gjør flere forespørsler, kan du vurdere å flytte koden til sitt eget objekt. Deretter bruker du "myObject.load ();", i stedet for å ringe "load" -funksjonen direkte. En grunnleggende retningslinje for å oppnå dette ville være:

 var ajax = last: funksjon () // lim inn her, annenMetode: someFunction () // lim inn her ajax.load ();

Konklusjon

Jeg har ingen tvil om at noen av dere vil legge igjen en kommentar som sier noe i tråd med, "Hvorfor skulle jeg noen gang gjøre dette når det kan gjøres med bare en linje av jQuery?" Svaret er fordi du trenger å lære hva som er under panseret til bilen din, så å si. Rammer som Mootools og jQuery har gjort Javascript utrolig tilgjengelig for designere. Hvis du faller inn i denne kategorien, anbefaler jeg på det sterkeste at du også henter en rå Javascript-bok. Det er ingenting galt, etter min mening, med å lære begge samtidig. Bare vær sikker på at du lærer begge deler!


Det ligner på å jobbe med WordPress hvis du ikke kjenner PHP. Jo, det er mulig - men vil du virkelig ha det?

Forhåpentligvis bør dette få deg i gang! Jeg vil gjerne høre dine tanker! Ha en fin helg. Se deg på mandag eller på Twitter!

  • Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.


Kode
×