Share
Această serie de tutori își propune să familiarizeze designerii de la front-end cu noii dezvoltatori cu AJAX, o tehnologie esențială a front-end-ului.
În acest prim tutorial, vom acoperi elementele de bază ale AJAX. Vom începe să explorăm diferite lucruri legate de el, să învățăm exact ce este, cum funcționează și unde limitele sale se află. Sa incepem!
Notă: Această serie presupune că sunteți familiarizat cu tehnologiile de bază de bază, precum HTML și CSS.
AJAX înseamnă "Asynchronous JavaScript and XML". Nu este o singură tehnologie, nici o tehnologie nouă. De fapt, este vorba de un grup de tehnologii existente (adică HTML, CSS, JavaScript, XML, etc.) care se reunesc pentru a construi aplicații web moderne.
Cu AJAX, un client (adică un browser) comunică cu un server web și solicită date. Apoi, procesează răspunsul serverului și efectuează modificări asupra paginii fără a îl reîncărca complet.
Să distrugem acronimul AJAX:
"Asincron" înseamnă că atunci când un client solicită date de la un server web, acesta nu îngheață până când serverul nu răspunde. Dimpotrivă, utilizatorul poate naviga în continuare pe pagini. De îndată ce serverul returnează un răspuns, o funcție relevantă manipulează datele returnate din spatele scenei.
"JavaScript" este limba care instantează o solicitare AJAX, analizează răspunsul AJAX corespunzător și în final actualizează DOM.
Un client utilizează API XMLHttpRequest sau XHR pentru a face o cerere către un server. Gândiți-vă la API (Application Programming Interface) ca un set de metode care specifică regulile de comunicare între cele două părți interesate. Cu toate acestea, rețineți că datele primite dintr-o solicitare AJAX pot fi în orice format și nu numai în XML format.
Pentru a obține o idee inițială despre cum funcționează AJAX, aruncați o privire la următoarea vizualizare:
Această vizualizare descrie un scenariu tipic condus de AJAX:
Utilizatorul dorește să vadă mai multe articole, așa că face clic pe butonul țintă. Acest eveniment declanșează un apel AJAX.
Se trimite o solicitare serverului. Împreună cu solicitarea pot fi transmise și alte date. Cererea poate indica un fișier static (de ex. example.json) care este stocată pe server. Alternativ, este posibil să executați un script dinamic (de ex. functions.php), moment în care scriptul discută cu baza de date (sau cu alt sistem) pentru a prelua date.
Baza de date trimite înapoi articolele solicitate serverului. Apoi serverul le trimite la browser.
JavaScript parsează răspunsul și actualizează anumite părți ale DOM (structura paginii). Aici, de exemplu, numai bara laterală este actualizată. Celelalte părți ale paginii nu se modifică.
Având în vedere acest lucru, puteți înțelege de ce AJAX este un concept important pentru web-ul modern. Prin dezvoltarea aplicațiilor AJAX, putem controla cantitatea de date descărcate de pe server.
AJAX este peste tot. Pentru ao demonstra, să menționăm pe scurt câteva site-uri populare care profită de acestea.
Mai întâi, luați în considerare modul în care funcționează Facebook și Twitter. În timp ce derulați în jos, apare conținut nou datorită AJAX. În al doilea rând, atunci când actualizați sau micșorați o întrebare sau un răspuns la Stack Overflow, este declanșat un apel AJAX. În cele din urmă, de îndată ce căutați ceva pe Google sau pe YouTube, sunt executate mai multe solicitări AJAX.
În plus, dacă vrem, putem monitoriza cererile. De exemplu, în consola Chrome, faceți clic dreapta și verificați Log XMLHttpRequests opțiune.
După cum sa menționat mai sus, pentru a configura o solicitare AJAX, folosim API-ul XMLHttpRequest. În plus, jQuery, cea mai populară bibliotecă JavaScript, oferă mai multe funcții și metode legate de Ajax.
De-a lungul acestei serii, vom trece prin diferite exemple care folosesc JavaScript simplu și jQuery pentru a trimite o cerere către un server.
Când preluăm datele de pe un server web, acestea pot fi în diferite formate. XML, JSON, JSONP, text simplu și HTML sunt posibile formate de date.
XML (Language Markup eXtensible) este unul dintre cele mai populare formate pentru schimbul de date între aplicații. Similar cu HTML, XML utilizează etichete pentru a defini structura sa. Cu toate acestea, rețineți că XML nu vine cu tag-uri predefinite, de fapt, am creat un document XML prin specificarea propriilor etichete. Un exemplu al structurii sale este prezentat mai jos:
Mike Mathew australian Engleză Spaniolă limba franceza Rusă
Există mulți editori online care pot fi utilizați pentru a construi documente XML. Editorul meu favorit este:
Pe baza acestui editor, exemplul nostru va fi vizualizat după cum urmează:
JSON (JavaScript Object Notation) este un alt format popular de schimb de date. Folosind JSON, structura XML menționată mai sus ar arăta astfel:
"nume": "Mike", "nume": "Mathew", "naționalitate": "australian", "limbi"
Din nou, puteți găsi mulți editori online JSON pe web. Iată editoarele pe care îmi place să le folosesc:
Bazat pe instrumentul JSON Editor Online, exemplul anterior arată astfel:
Înainte de a începe efectiv utilizarea AJAX, este important să înțelegeți limitările sale. Mai precis, vom menționa două probleme comune.
Mai întâi, ia în considerare următoarea eroare care apare în consola Chrome:
Această eroare apare atunci când solicitarea noastră indică un fișier local. Aici am încercat să accesăm datele stocate într-un fișier local (de ex. Demo.json) și nu într-un server. Pentru a depăși această problemă, putem instala un server local (de exemplu, configurați XAMPP ca mediu de dezvoltare locală) și stocați fișierul țintă în el.
În al doilea rând, uitați-vă la următorul mesaj de eroare:
Acest lucru se întâmplă când solicităm datele aflate pe un alt domeniu în raport cu pagina noastră (cunoscută sub numele de restricție privind politica de origine identică). Aici, de exemplu, datele sunt stocate pe un server local, în timp ce pagina este stocată pe serverul Codepen. Din fericire însă, există soluții la această restricție.
O soluție este de a profita de mecanismul CORS (Cross-Origin Sharing Resource) propus de W3C. Rețineți că acest mecanism necesită efectuarea unor modificări în fișierele de configurare ale serverului nostru. De exemplu, această pagină descrie modul în care putem personaliza serverul web Apache.
O altă opțiune este folosirea tehnicii JSONP (JSON with Padding).
Această prezentare generală ar fi trebuit să vă dau o idee bună despre ceea ce este AJAX, unde ați putea fi deja întâlnit și unde există unele probleme potențiale. De asemenea, a examinat rapid cele mai populare formate de schimb de date. În următorul tutorial vom sari într-un exemplu de lucru. Ne vedem acolo!
Dacă doriți să aflați mai multe despre AJAX și Codepen, asigurați-vă că verificați următoarele resurse:
Accentsconagua