Accentsconagua

Cum de a face AJAX cererile cu Javascript Raw

Cod
Share

Cadrele Javascript au transformat funcțiile simple AJAX într-o singură linie. Acest lucru este incredibil, având în vedere faptul că ar fi nevoie de mai mult de douăzeci de ani pentru a realiza același lucru cu Javascript brut. Cu toate acestea, este important să aflați ce este "sub capota".


screencast

Script final

Acesta este un script relativ simplu care vă va permite să solicitați pagini asincrone utilizând o funcție de încărcare (URL, CALLBACK).

 Funcția noastră de încărcare simplificată acceptă un parametru URL și parametru CALLBACK. încărcați ('test.txt', funcția (xhr) document.getElementById ('container') innerHTML = xhr.responseText;); încărcarea funcției (url, apel invers) var xhr; dacă (typeof XMLHttpRequest! == 'undefined') xhr = nou XMLHttpRequest (); altfel var versions = "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp"] pentru (var i = , 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');

Câteva note de luat în considerare în timpul vizionării

onreadystatechange se va declanșa de cinci ori pe măsură ce se solicită pagina dvs. specificată.

  • 0: neinitializate
  • 1: se incarca
  • 2: încărcat
  • 3: interactiv
  • 4: complet

O valoare de "4" este ceea ce căutăm. După ce a fost atins, știm că suntem liberi să efectuăm o acțiune cu datele returnate.

XMLHttpRequest și ActiveXObject

Browserele moderne utilizează obiectul "XMLHttpRequest" pentru a face cereri asincrone. Aceasta înseamnă că, dacă doriți să ignorați IE6, aveți libertatea de a elimina verificarea ActiveXObject - această secțiune.

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

În schimb, puteți scrie "var xhr = new XMLHttpRequest ();". Fiți precauți cu această metodă. Odată ce sa abținut de la propria sa funcție "încărcare", este ușor să păstrați verificarea IE așa cum este.

Ieșiți din spațiul global

Dacă faceți mai multe solicitări, vă recomandăm să vă mutați codul în propriul obiect. Apoi, mai degrabă decât să apelați direct funcția "încărcare", utilizați "myObject.load ();". O orientare de bază pentru a realiza acest lucru ar fi:

 var ajax = load: function () // pastă aici, otherMethod: someFunction () // inserați aici ajax.load ();

Concluzie

Nu am nici o îndoială că unii dintre voi vor lăsa un comentariu care să arate ceva de genul: "De ce aș face asta când se poate face doar cu o singură linie de jQuery?" Răspunsul este pentru că trebuie să învățați ceea ce se află sub capota mașinii dvs., ca să spunem așa. Cadrele ca Mootools și jQuery au făcut Javascript incredibil de accesibil pentru designeri. Dacă vă încadrați în această categorie, vă recomandăm cu insistență să ridicați și o carte bruta Javascript. Nu este nimic greșit, după părerea mea, prin învățarea simultană. Asigurați-vă că învățați pe amândouă!


Este similar cu lucrul cu WordPress dacă nu știți PHP. Sigur, este posibil - dar ați dori cu adevărat?

Sperăm că asta ar trebui să te ridice și să fugi! Mi-ar plăcea să vă aud gândurile! Sa ai un weekend frumos. Ne vedem luni sau pe Twitter!

  • Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.


Cod
×