Familiaritatea cu ajax

Să începem! Vă rugăm să rețineți: se presupune că știți deja tehnologiile de bază front-end, cum ar fi HTML si CSS.

Ce este AJAX?

client (browser) comunică cu serverul, și solicită datele sale folosind AJAX. Răspunsul rezultat este prelucrat, și un sat modificată fără repornire completă. Să luăm în considerare acronimul AJAX:

„Asincron“ înseamnă că, atunci când un client cere date de la server, browser-ul nu se congela până când primește un răspuns. Utilizatorul poate naviga prin paginile dimpotrivă. După ce serverul returnează un răspuns, răspunsul în fundal începe să proceseze funcțiile corespunzătoare.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

Pentru a trimite o cerere către server client folosind XMLHttpRequest sau API-ul XHR. API (application programming interface) este un set de metode, care definesc regulile de comunicare între cele două părți implicate. Cu toate acestea, provenind de la un cerere de date AJAX poate fi în orice format, și nu numai în XML.

Cum AJAX

Pentru a înțelege principiul de lucru de bază, să ne uităm la imaginea de mai jos:

In imagine descrisă de script-ul standard de AJAX:

Utilizatorul dorește să vadă toate intrările, și el sau ea face clic pe un buton. Acest eveniment declanșează un apel AJAX.

Cererea este trimisă la server. La cerere, este posibil să se transmită date diferite. Cererea poate fi trimisă la imaginea statică (de exemplu, example.php), stocate pe server. De asemenea, este posibil să se efectueze script-uri dinamice (functions.php), la fiecare pas, care va fi comunicarea cu o bază de date (sau alt sistem) pentru a prelua informațiile solicitate.

Baza de date trimite înapoi articolul solicitat pe server. Un server trimite la browser.

Cu aceasta în minte, veți înțelege de ce Ajax este atât de important în tehnologia de Internet de astăzi. Dezvoltarea de aplicatii pentru controlul AJAX putem controla cantități mari de date descărcate de pe server.

Un exemplu viu al AJAX

AJAX acum peste tot. Pentru a va convinge de acest lucru, ne uităm pe scurt la câteva site-uri populare care fac folosesc această tehnologie.

În primul rând, ia în considerare principiile Facebook și Twitter. Când derulați în josul paginii AJAX încarcă noul conținut. De asemenea, dacă pariați place sau întrebări și răspunsuri dizlayk pe Stack Overflow, din nou AJAX funcționează. Odată ce sunt impinse in ceva bara de căutare pe Google sau YouTube, a declanșat mai multe cereri AJAX.

Mai mult decât atât, dacă vrem, vom putea urmări aceste cereri. De exemplu, consola Chrome poate face acest lucru, făcând clic pe butonul din dreapta al mouse-ului și activarea funcției Log xmlhttprequest.

Cum de a crea o interogare

Am spus deja că, pentru a crea o interogare folosind XMLHttpRequest API. În plus față de jQuery, cel mai popular biblioteca JS are o varietate de funcții și metode Ajax. Într-o serie de articole ne vom uita la diferite exemple din JS pur și JQuery pentru a trimite cererea la server.

Cerere de management

Trageți datele de pe server pot fi stocate în diferite formate. XML, JSON, JSONP, text simplu și HTML.

XML (Extensible Markup Language) - una dintre cele mai populare formate pentru schimbul de date între aplicații. Formatul este similar cu HTML, și ca structură folosite etichete. Etichetarea Cu toate acestea, XML nu este terminat, vom face să le cerem. Structura EXEMPLU de mai jos:

Restricții privind cererile de AJAX

Înainte de a începe să utilizați AJAX, trebuie să știți despre restricțiile. Considerăm că doar două probleme.
Prima - o eroare în consolă Chrome:

Eroarea se produce atunci când interogarea face referire la un fișier local. În acest exemplu, dorim să acceseze datele dintr-un fișier local (Demo.json), care nu este stocat pe server. Pentru a rezolva această problemă, puteți instala un server și stoca fișierele locale acolo. A doua problemă:

Eroarea se produce atunci când datele din interogare sunt stocate pe un alt domeniu în ceea ce privește pagina noastră (bug-ul cunoscut sub numele de politica de aceeași origine). În exemplul nostru, datele sunt stocate pe un server local, iar pagina este stocată pe serverul Codepen. Din fericire, aceste greșeli eliminate.

O modalitate este prin CORS W3C. Dar acest mecanism necesită schimbări în fișierele de configurare pe server. De exemplu, cum să configurați un server Apache pe aceasta pagina. O altă modalitate este JSONP (JSON cu umplutură).

concluzie

Această revizuire a dat o idee despre ce AJAX, în cazul în care trebuie să se ocupe cu ea poate, și care sunt potențiale probleme. Am analizat, de asemenea, cele mai populare formate de schimb de date. În următorul articol ne vom uita la un exemplu de lucru. Vedeți tine!

Revizie: Echipa webformyself.

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram