Share
I framework Javascript hanno trasformato semplici funzioni AJAX in one-liner. Questo è abbastanza incredibile, considerando il fatto che sarebbe necessario più di venti per realizzare la stessa cosa con Javascript non elaborato. Tuttavia, è importante imparare cosa c'è "sotto il cofano".
Questo è uno script relativamente semplice che ti consentirà di richiedere le pagine in modo asincrono utilizzando una funzione "load (URL, CALLBACK)".
Accentsconagua
// La nostra funzione "load" semplificata accetta un parametro URL e CALLBACK. load ('test.txt', function (xhr) document.getElementById ('container'). innerHTML = xhr.responseText;); function 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"] per (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'); 
onreadystatechange sparerà cinque volte quando viene richiesta la pagina specificata.
Un valore di "4" è quello che stiamo cercando. Una volta raggiunto, sappiamo che siamo liberi di eseguire un'azione con i dati restituiti.
I browser moderni utilizzano l'oggetto "XMLHttpRequest" per creare richieste asincrone. Ciò significa che se desideri ignorare IE6, sei libero di rimuovere il controllo ActiveXObject, questa sezione.
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"]; per (var i = 0, len = versions.length; i < len; i++) try xhr = new ActiveXObject(versions[i]); break; catch(e) // end for
Invece, potresti semplicemente scrivere "var xhr = new XMLHttpRequest ();". Sii cauto con questo metodo. Una volta estratto dalla sua funzione "carica", è facile mantenere il controllo IE così com'è.
Se si fanno richieste multiple, si potrebbe prendere in considerazione lo spostamento del codice nel proprio oggetto. Quindi, anziché chiamare direttamente la funzione "load", si utilizza "myObject.load ();". Una linea guida di base per realizzare questo sarebbe:
var ajax = load: function () // incolla qui, otherMethod: someFunction () // incolla qui ajax.load ();
Non ho dubbi che alcuni di voi lasceranno un commento affermando qualcosa del tipo: "Perché dovrei mai farlo quando può essere fatto con una sola riga di jQuery?" La risposta è perché devi imparare cosa c'è sotto il cofano della tua macchina, per così dire. Framework come Mootools e jQuery hanno reso Javascript incredibilmente accessibile ai progettisti. Se rientri in questa categoria, ti consiglio vivamente di prendere anche un libro in Javascript. Non c'è niente di sbagliato, secondo me, nell'apprendimento di entrambi contemporaneamente. Basta essere sicuro che impari entrambi!
È simile a lavorare con WordPress se non conosci PHP. Certo, è possibile, ma vorresti davvero?
Spero che questo ti faccia funzionare! Mi piacerebbe sentire i tuoi pensieri! Buon fine settimana. Ci vediamo lunedì o su Twitter!
