Înțelegerea AJAX cu jQuery

AJAX Acesta cuprinde un set de tehnici și tehnologii care ne permit să stabilim comunicații asincrone între ceea ce vede clientul pe web și informațiile care există pe partea serverului unei pagini web.
Una dintre caracteristicile principale pe care le putem evidenția este că se bazează pe diferite metode HTTP Ce POST, GET, PUT sau STIRI pentru a putea trimite datele necesare aplicațiilor de pe server.
În stadiul incipient al dezvoltării cu AJAX apelurile trebuiau construite folosind Javascript plat, care a generat o mulțime de cod pentru noi, totuși jQuery ne ajută să simplificăm lucrurile aducând adoptarea acestei tehnici și tehnologii în masă, totul în beneficiul dezvoltatorului și al utilizatorului.
Ce este AJAX?AJAX corespunde la Javascript asincron și XML și anume Javascript Da XML asincron, ceea ce înseamnă, de asemenea, că este ceva care nu depinde de o structură fixă, cum ar fi un script PHP unde instrucțiunile sunt executate secvențial, salvând desigur apelurile la metodele și funcțiile claselor și obiectelor.
Cele explicate mai sus ne oferă posibilitatea de a încărca informații sau de a le trimite fără a fi nevoie să reîncărcați sau să faceți o cerere „completă” către server, le punem în ghilimele, deoarece apelurile AJAX Acestea sunt solicitări normale, pur și simplu nu este necesar să reîmprospătați pagina în întregime dacă nu este comportamentul dorit.
Folosirea acestor tehnici și tehnologii reprezintă unele avantaje pe care nu mulți le conștientizează existența, de multe ori le folosim doar pentru o chestiune de tendință, dar dacă îi înțelegem beneficiile, vom putea ști la ce proiecte îl putem aplica. cel mai mult din el. Să vedem mai jos câteva dintre cele mai importante avantaje ale utilizării AJAX:
Reducerea utilizării lățimii de bandăObținem acest lucru datorită cererilor secțiunilor în special, cu aceasta putem realiza, de exemplu, să nu fie nevoie să reîncărcăm stiluri generale sau imagini dacă ceea ce dorim este să reîmprospătăm textul.
Experiență mai bună pentru utilizatorPrin creșterea vitezei aplicației web, utilizatorul are o îmbunătățire notabilă a utilizării, pe lângă faptul că ne oferă posibilitatea ca dezvoltatori de a crește gradul de interacțiune cu elementele pe care le-am aranjat.
Eliminați dependența browseruluiAtunci când se utilizează jQuery este eliminată necesitatea de a scrie cod care depinde de browser, ceea ce ne ajută să îmbunătățim viteza de dezvoltare și productivitatea timpului nostru.
Deoarece nimic nu este perfect, atunci când utilizați AJAX De asemenea, trebuie să înțelegem că există unele dezavantaje care ne pot face să reflectăm și să ne gândim dacă este cea mai bună opțiune pentru proiectul nostru. În continuare vom vedea câteva dintre aceste puncte pentru a avea o imagine mai completă înainte de a începe partea tehnică a tutorialului.
DependențăDacă un client sau utilizator folosește un browser foarte vechi sau folosește Javascript dezactivată, aplicația noastră poate avea sau nu funcționează, ceea ce ne dă obligația de a face cazuri speciale atunci când nu putem folosi AJAX.
Scrieți cod suplimentarConform aplicației noastre, trebuie să scriem cod suplimentar pentru a putea integra răspunsurile pe care le primim din cereri AJAX, cum ar fi răspunsurile care vin cu HTML Da CSS.
Desigur, în prezent, este foarte dificil să găsești un browser care nu este compatibil cu Javascript Da jQueryCu toate acestea, în funcție de zona noastră, putem găsi câteva cazuri care pot îngreuna viața.
O cerere AJAX din jQuery trebuie să aibă o structură de bază, unde trebuie să stabilim câțiva parametri necesari cadrului, trebuie să stabilim metoda HTTP a cererii, ruta către care se va face cererea, formatul răspunsului și, în cele din urmă, ce ar trebui făcut în cazul în care solicitarea are succes sau când apare o eroare. Să vedem în următorul cod nefuncțional cum putem vedea acest lucru:

 $ .ajax ({type: "Metodă HTTP", // POST, GET, PUT, DELETE url: "Cerere cale", // http: / / www.example.com/request dataType: "Tipul de date", / / html, xml, json success: funcție la succes, eroare: funcție la eroare}); 

Vedem că fiecare dintre secțiunile pe care le-am descris sunt parametri pe care îi primește solicitarea noastră și că se realizează prin metodă $ .ajax () care este furnizat de jQuery direct, și este o mască pentru cod Javascript plan care corespunde fiecărui motor al fiecărui browser acceptat, care în acest moment sunt aproape toate cele mai recente reclame precum Chrome, Firefox, Opera, Safari Internet Explorer, și cele derivate din motoarele acestora pe care le-am menționat.
Acum vom pune în practică ceea ce am văzut în secțiunea anterioară atunci când facem o cerere AJAX dintr-o pagină HTML pe care o vom construi în următorul exemplu. Trebuie să știm că vom solicita cea mai recentă versiune de jQuery îl putem obține, totuși îl putem folosi pe cel pe care îl stochează în CDN, vom avea nevoie, de asemenea, de un mic server web pentru a putea direcționa fișierele pe care le vom obține asincron, pentru aceasta putem folosi WAMP în Windows, sau o instalare LAMPĂ în sisteme Linux, cu privire la platformele MAC pe care le putem folosi XAMP sau asemănător.
În următorul cod vom include mai întâi jQuery, apoi vom crea o etichetă în corp cu un id unic în care vom plasa conținutul răspunsului la cererea noastră, iar aproape de sfârșitul documentului vom face o etichetă scenariu unde vom genera codul pentru a face cererea, în atributul url vom face cererea la indexul folderului în care se află fișierele noastre, facem acest lucru pentru a arăta funcționarea codului nostru, cu toate acestea, modalitatea de a face acest lucru este să solicităm un alt fișier care să servească răspunsul de care avem nevoie, haideți vezi codul:

 Exemplu de solicitare AJAXProcesați AJAX 

În imaginea următoare vedem cum a funcționat totul, unde putem vedea un răspuns de succes din codul nostru.

Să vedem ce se întâmplă când schimbăm calea cererii pentru una inexistentă pentru a forța o eroare, reîmprospătați și apăsați butonul Procesați AJAX:

Putem vedea că ceea ce am plasat în codul de eroare este declanșat. Dar cel mai interesant lucru este că tipul de eroare al HTTP, în acest caz a fost o resursă care nu a fost găsită sau 404, cu puțină abilitate, poate îl putem capta și îmbunătăți gestionarea erorilor, acesta rămâne un subiect de cercetare pentru cei interesați.
Unul dintre lucrurile care jQuery Vreau să nu pierdem timpul și codul făcând lucrurile mult, de aceea ne oferă comenzi rapide pentru apeluri AJAX cele mai comune metode precum OBȚINE Da POST, deci folosind comanda rapidă salvăm câteva linii de cod și astfel putem reduce greutatea aplicației noastre.
Pentru aceasta în documentația oficială a jQuery Avem toate cazurile existente, cu toate acestea vom reface exemplul anterior folosind în acest caz comanda rapidă, dar înainte de a vedea codul funcțional, să vedem exemplul nefuncțional:

$ .get (cale, date, SuccessFunction, ResponseType);

După cum am observat, acest apel este mult mai mic, ceea ce ne ajută să avem un cod mai curat și mai ușor, acum aplicând acest lucru exemplului nostru anterior ar fi după cum urmează:

 Exemplu de solicitare AJAXProcesați AJAX 

Vedem că numărul de linii și caractere a fost redus semnificativ, ceea ce ar îmbunătăți transmiterea datelor noastre utilizând o lățime de bandă mai mică. Dacă vom rula totul în browser, ne-ar oferi următorul răspuns:

Cu aceasta am terminat acest tutorial, apoi am văzut cum într-un mod simplu am explicat ce reprezintă AJAX și aplicațiile sale de bază cu jQueryDe acum înainte, rămâne doar să continuăm cercetarea și încercarea de a încorpora această tehnică de dezvoltare ori de câte ori avantajele acesteia sunt adecvate aplicațiilor noastre.