Ajax si colloca piuttosto in alto sui principali motivi per utilizzare jQuery. Non solo jQuery risolve i problemi cross-browser, ma rende la sintassi molto facile da usare e da capire.
In questo video proviamo a spiegare cos'è l'Ajax. Esaminiamo un elemento del modulo, che quando inviato, esegue una richiesta GET o POST (come determinato dall'attributo del metodo) all'URL specificato (come determinato dall'attributo action). Questo è solo HTML, nessun codice di backend o JavaScript che si trova lì. Ma l'invio farà cambiare la pagina, letteralmente ricaricando il nuovo URL, proprio come fare clic su un collegamento.
Ajax ci consente di effettuare quella richiesta GET o POST in background, senza ricaricare la pagina. In fondo, questo è il punto centrale dell'Ajax. Ed è molto potente. È in gran parte responsabile del motivo per cui i siti Web moderni funzionano e si sentono come funzionano.
Ajax era solito "stare per" JavaScript e XML asincrono, ma oggigiorno questo è largamente ignorato perché non significa molto. Anche da qui la decapitalizzazione. A volte potresti anche vedere "XHR" che è l'abbreviazione di XMLHttpRequest, che è la tecnologia di base nativa di Ajax.
La differenza tra GET e POST è essenzialmente: GET serve per ottenere informazioni e non dovrebbe essere responsabile della modifica dei dati e POST è specifico per la modifica dei dati. Sentiti libero di leggere di più su questo in questo thread StackOverflow.
Fare una richiesta GET in jQuery è sorprendentemente facile:
$.get( "URL", function(data) ( // do something with data )); ));
L'URL è il luogo da cui speri di ottenere i dati. Il secondo parametro è la funzione di callback che viene eseguita quando la richiesta Ajax ha avuto successo. Il parametro più importante è il primo, data, che contiene le informazioni che ha ottenuto dalla richiesta.
Le richieste Ajax a volte possono fallire. Uno dei motivi di tale errore potrebbe essere il browser stesso e le sue politiche di sicurezza. Gli stessi browser sono regole su dove è possibile richiedere il contenuto. Le richieste possono sempre essere effettuate allo stesso dominio da cui proviene la richiesta. Ma se è coinvolto un dominio diverso, quel dominio diverso dovrà consentirlo in modo specifico.
Puoi leggere tutto su questo su enable-cors.org. CORS sta per "Cross-Origin Resource Sharing". Guardiamo un esempio in cui CORS non è abilitato e la richiesta Ajax fallisce. Un modo semplice e standard per risolverlo, supponendo che il server sia Apache, è impostare un'intestazione che consenta specificamente CORS attraverso il file .htaccess:
Header set Access-Control-Allow-Origin "*"
Nel video, spostiamo semplicemente la richiesta Ajax su CodePen, che gestisce bene Ajax per impostazione predefinita.
Formaggio facile:
Vedi Pen fBInl di Chris Coyier (@chriscoyier) su CodePen