Hur man gör AJAX-förfrågningar med Raw Javascript

Javascript-ramar har gjort enkla AJAX-funktioner till en-linjer. Det här är ganska otroligt, med tanke på att det skulle kräva mer än tjugo för att uppnå samma sak med rå Javascript. Ändå är det viktigt att lära sig vad som är "under huven".

screencast

Final Script

Detta är ett relativt enkelt skript som låter dig asynkront begära sidor genom att använda en "load (URL, CALLBACK)" funktion.

 // Vår förenklade "load" -funktion accepterar en URL- och CALLBACK-parameter. ladda ('test.txt', funktion (xhr) document.getElementById ('container'). innerHTML = xhr.responseText;); funktionsbelastning (url, återuppringning) var xhr; om (typ av XMLHttpRequest! == 'undefined') xhr = nytt XMLHttpRequest (); annars var versions = ["MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp"] för (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');

Några anmärkningar att överväga när du tittar

onreadystatechange kommer att elda fem gånger när din angivna sida begärs.

• 0: oinitialiserad
• 1: läser in
• 2: lastad
• 3: interaktiv
• 4: komplett

Ett värde på "4" är det vi söker. När det har uppnåtts vet vi att vi är fria att utföra en åtgärd med de returnerade uppgifterna.

XMLHttpRequest och ActiveXObject

Moderna webbläsare använder "XMLHttpRequest" -objektet för att göra asynkrona förfrågningar. Det betyder att om du vill ignorera IE6 är du fri att ta bort ActiveXObject-kontrollen - det här avsnittet.

 om (typ av XMLHttpRequest! == 'undefined') xhr = nytt XMLHttpRequest (); annars var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; för (var i = 0, len = versions.length; i < len; i++)  try  xhr = new ActiveXObject(versions[i]); break;  catch(e)  // end for 

Istället kan du bara skriva "var xhr = new XMLHttpRequest ();". Var försiktig med denna metod. När den en gång har abstraherats till sin egen "load" -funktion är det enkelt att hålla IE-kontrollen som den är.

Gå ut ur det globala rymden

Om du gör flera förfrågningar kan du överväga att flytta din kod till sitt eget objekt. Sedan använder du "myObject.load ();" istället för att direkt ringa funktionen "load". En grundläggande riktlinje för att uppnå detta skulle vara:

 var ajax = ladda: funktion () // klistra in här, annanMetod: someFunction () // klistra in här ajax.load ();

Slutsats

Jag har ingen tvekan om att några av er kommer att lämna en kommentar som säger något i linje med, "Varför skulle jag någonsin göra det när det kan ske med bara en rad jQuery?" Svaret är att du måste lära dig vad som står under din bils huv, så att säga. Ramar som Mootools och jQuery har gjort Javascript otroligt tillgängligt för designers. Om du hamnar i denna kategori rekommenderar jag starkt att du hämtar en rå Javascript-bok också. Det är inget fel, enligt min mening, att lära sig båda samtidigt. Var bara säker på att du lära dig båda!

Det liknar att du arbetar med WordPress om du inte känner till PHP. Visst är det möjligt - men skulle du verkligen vilja?

Förhoppningsvis bör detta få dig igång! Jag skulle gärna höra dina tankar! Ha en bra helg. Vi ses på måndag eller på Twitter!

• Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.