Introducere în apelurile Ajax

Publicat: 2021-11-01

Bine ați venit la Introducere în Ajax! În acest articol vom prezenta elementele de bază ale Ajax și cum este utilizat într-un exemplu din lumea reală. Ne vom uita, de asemenea, la un exemplu de apel Ajax-PHP. Deși am făcut tot posibilul pentru a simplifica acest tutorial, cunoștințele de lucru despre Javascript, PHP și WordPress sunt foarte importante pentru a înțelege pe deplin ceea ce urmează. Având în vedere acest lucru, să începem!

Ce este Ajax?

Ajax înseamnă JavaScript asincron și XML.

Ajax nu este un limbaj de programare, ci o serie de tehnici care combină tehnologiile web existente pentru a crea aplicații web mai bune.

Îmbunătățirea site-urilor web cu Ajax

Ajax are o gamă largă de utilizări. Printre acestea, una dintre funcțiile de top sunt apelurile Ajax. Apelurile Ajax permit unui site web să actualizeze o parte din conținutul său la o acțiune a utilizatorului, fără a fi nevoie să reîncarce pagina. Ca atare, spre deosebire de o solicitare HTTP normală, nu trebuie să așteptăm răspunsul serverului pentru a continua să interacționeze cu site-ul web.

În mod tradițional, cererile HTTP sunt făcute către un server web și, după ce sunt procesate, serverul returnează rezultatul actualizat într-o nouă încărcare a paginii. Într-o solicitare Ajax, această secvență de acțiuni se întâmplă în culise, în mod asincron, astfel încât utilizatorul să nu fie întrerupt. Acest lucru îmbunătățește interactivitatea și receptivitatea și face site-ul web mai dinamic.

Cum funcționează un apel Ajax?

Un apel Ajax începe cu utilizatorul final care efectuează o acțiune pe front-end-ul unui site web (de exemplu, făcând clic pe un buton). Când acea acțiune este efectuată, un eveniment Javascript este declanșat și ascultătorul său apelează o funcție.

În interiorul funcției, apelul Ajax este declanșat și, cu ajutorul XML, informațiile sunt împachetate și cererea este trimisă către un script de server.

NOTĂ: În zilele noastre, în aproape toate ocaziile, JSON este preferat față de XML, deoarece este mai rapid, mai ușor de citit și de programat și mai mult.

În interiorul scriptului, cererea este procesată cu ajutorul unui limbaj de scriptare de pe server precum PHP, Java, Ruby, Python etc.

Răspunsul este trimis înapoi către client, iar o funcție de apel invers actualizează partea de conținut corespunzătoare cu datele primite.

Să aruncăm o privire la cum funcționează acest lucru într-un exemplu

Un exemplu simplu de apel Ajax

Să creăm o aplicație de căutare care vă permite să vedeți rezultatele căutării în timp real atunci când căutați printr-o listă de titluri de articole.

Vom folosi PHP ca limbaj de scripting la nivelul serverului și vă vom ghida prin aceasta, din punctul de vedere al utilizatorilor finali.

Pasul 1: Formularul HTML

În primul rând, avem nevoie de o casetă de text pe care utilizatorul o va umple cu text și undeva unde să afișeze rezultatul. Deci, să creăm un formular HTML simplu și un element care va afișa rezultatele.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Pasul 2: Funcția Javascript

Când un utilizator introduce text, dorim să vedem rezultate în timp real, dacă sunt disponibile. Vom folosi evenimentul onkeyup Javascript care declanșează o funcție atunci când utilizatorul eliberează o tastă de pe tastatură.

Funcția va trebui să obțină textul curent ca parametru pentru a continua procesul.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Să completăm funcția.

Pasul 3: Cererea

În interiorul funcției, trebuie mai întâi să creăm un obiect XMLHttpRequest pentru a interacționa cu serverul și apoi să apelăm o altă funcție care va face ceva cu valoarea transmisă în funcția noastră foundArticles() .

În procesul descris mai sus, interacțiunea cu serverul se realizează prin utilizarea unui handler de evenimente Javascript XMLHttpRequest.onready statechange, care este apelat atunci când proprietatea readyState este schimbată. Să clarificăm mai departe acești pași:.

  • Proprietatea readyState returnează starea în care se află XMLHttpRequest un client.
  • Ori de câte ori readyState se modifică, evenimentul readystatechange este declanșat.
  • Proprietatea onreadystatechange conține handlerul de evenimente care trebuie apelat atunci când evenimentul readystatechange este declanșat.

Pasul 4: Ce să faci cu cererea

Acum, trebuie să facem ceva când operațiunea este completă și, după ce consultăm ce stări sunt disponibile, setăm aceasta la starea 4.

Deci, când operația este completă, textul din interiorul elementului HTML cu id txtHint ar trebui înlocuit cu răspunsul serverului. Acesta este momentul în care trebuie să folosim proprietatea responseText , care returnează textul primit de la server după ce cererea este trimisă.

Acum să adăugăm codul în interiorul funcției foundArticles() care corespunde cu ceea ce tocmai am descris mai sus.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

NOTĂ: Trebuie să subliniem aici că redarea HTML astfel, fără a scăpa de el, este o practică proastă din punct de vedere al securității și facem asta doar de dragul acestui tutorial, pentru ca codul să fie cât mai simplu posibil. Doar pentru a fi în siguranță, nu utilizați niciunul dintre codurile furnizate în acest articol pentru utilizarea în lumea reală!

În continuare trebuie să trimitem cererea către server și să folosim datele care sunt returnate.

Pasul 5: Datele

În acest exemplu, datele vor fi stocate într-un fișier PHP. Creăm un fișier data.php sub același folder și includem următorul cod:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Nu vă confundați cu $req = $_REQUEST["req"]; linia. Acesta este modul în care scriptul preia interogarea din fișierul custom.js pe care îl vom analiza în scurt timp.

Pasul 6: Metode de solicitare

Vom folosi metoda open() a obiectului nostru XMLHttpRequest pentru a inițializa cererea și metoda send() pentru a face schimb de date cu serverul.

Parametrii pe care îi folosim pentru metoda open() sunt:

  • Metoda. Adică metoda de solicitare HTTP ( „GET”, „POST”, „PUT”, „DELETE” etc).
  • Adresa URL la care trimiteți solicitarea.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

După cum puteți vedea, metoda open() inițializează o solicitare GET la „data.php?req=” + str URL.

URL-ul va fi apoi folosit de $req = $_REQUEST[“req”]; variabilă din fișierul data.php pentru a prelua valoarea.

Să ne uităm la o imagine a cererii exemplu:

În acest moment, formularul ar trebui să funcționeze corect. Dacă introduceți, să spunem cuvântul „curs”, rezultatul ar trebui să fie:

„Curs de limbă C”,
„Curs C++”,
„Curs CSS3”,
„Curs JAVA”.

Concluzie

Acesta a fost un exemplu de exemplu foarte simplu de solicitare Ajax, care este o tehnică foarte populară de utilizat la construirea site-urilor web. Deși este simplu, sperăm că v-am apropiat de înțelegerea rutei în astfel de solicitări, iar acest lucru vă poate ajuta să începeți să vă codificați propria voastră. Într-un articol următor, vom revedea Ajax, într-un mediu WordPress, așa că rămâneți pe fază!