Folosind jquery și php pentru a crea pagini Web ajax

Majoritatea dezvoltatorilor PHP au învățat această limbă veche, începând cu definirea și construirea de pagini simple PHP și conectarea lor la tabele simple MySQL. Mai târziu, după ce au dobândit o varietate de experiențe, au învățat să creeze funcții din ce în ce mai complexe în PHP, să combine tabelele în MySQL și să rezolve alte probleme complexe.







Abrevieri utilizate frecvent

  • CSS: foaia de stil cascadă
  • HTML: limbaj de marcare hipertext
  • XHTML: limbaj extensibil de marcare hipertext
  • XML: limbaj extensibil de marcare

Pentru unii, Ajax rămâne un mister în spatele a șapte peceți. Ei nu au timp, răbdare sau cunoștințe pentru ao stăpâni în mod corespunzător. Este un păcat, pentru că mulți clienți au funcția de tip Ajax, ceea ce face ușor să lucreze cu aplicații Web. După ce ați citit acest articol, veți învăța suficient pentru a deveni un adevărat Ajax pro.

Ce este Ajax?

Cea mai bună modalitate de a descrie Ajax este să o comparați cu ceea ce deja știți. Cele mai multe pagini Web și aplicații funcționează în mod sincron. Faceți clic pe linkul sau pe butonul Trimitere din formularul de căutare și cererea este transmisă serverului care o procesează și returnează un răspuns. Acest model este denumit cel mai corect: "presat, așteptat, văzut". Acest ciclu infinit de reînnoire-repetare este bine cunoscut tuturor. Cu alte cuvinte, pentru a afișa constant informații actualizate pe pagină, trebuie fie să introduceți un mecanism de actualizare automată, fie să oferiți utilizatorului posibilitatea de a face clic pe link.

Cu Ajax, nu e așa. Primul A din cuvântul Ajax înseamnă asincron. Ajax vă permite să creați pagini în orice limbaj de programare și apoi să populați diferite părți ale acestor pagini cu informații din baza de date sau din orice alt proces centralizat de pe server. De exemplu, aveți un site de comerț electronic unde puteți vedea produsele vândute. Pe pagina fiecărui produs există elemente obișnuite: titluri, descrierea mărfurilor, fotografia, cantitatea de mărfuri din depozit.

Să presupunem că doriți să păstrați vizitatorii informați de cât de multe elemente rămase în stoc. Puteți adăuga funcția Ajax, care va rula o pagină PHP separat cu MySQL interogare, iar apoi transmite aceste informații la pagina inițială fără nici o acțiune de către utilizator și fără nici un fel de secventa de evenimente sincron împins-a așteptat-a văzut.

Și ultimele două litere din titlu: a și x. Înseamnă și XML, deși partea XML nu este cu adevărat folosită. Multe aplicații Ajax funcționează bine și fără cod XML: ele transmit doar cod HTML sau chiar text neformatat. Poate ar fi mai precis să decriptați x ca XMLHttpRequest. deoarece acest obiect este folosit pentru a extrage date în fundal, adică fără interferențe cu afișarea sau comportamentul unei pagini existente.

Ce este jQuery?

După descărcarea jQuery, îl puteți adăuga la orice fișier HTML sau PHP prin includerea unei etichete simple



Listing 2. Codul SQL pentru crearea tabelului de directoare

Acum trebuie să completați tabelul nostru. Pentru a introduce nume și numere, puteți utiliza utilitarul phpMyAdmin sau linia de comandă. De asemenea, puteți utiliza următoarea secvență de comandă SQL:

Listing 3. Comenzi SQL pentru a popula tabelul

Când sunt introduse valorile, verificați dacă lista este tipărită tastând selectați * din linia de comandă din directorul de lucru sau făcând clic pe Browse în phpMyAdmin.

Crearea fișierului index.php

Apoi, creați o pagină de pornire simplă pentru aplicația noastră. Acesta este un fișier PHP numit index.php, dar până acum conține mai mult cod HTML. Când vom crea fișierul find.php (în pasul următor), vom reveni la această parte și vom termina.

Până acum, tot ce avem nevoie este un fișier HTML de bază cu un formular. Fiecare element de formular conține un identificator unic, deoarece trebuie să putem defini fiecare element utilizând jQuery.

Listarea 4. Un fișier HTML cu un formular

Două lucruri sunt imediat evidente. În primul rând, nu există acțiuni asociate formularului. Acest lucru este normal: rețineți că acest formular nu ar trebui să urmeze schema tradițională sincronă "a făcut clic, a așteptat, a văzut". În schimb, adăugăm funcții care vor monitoriza acțiunile utilizatorului în câmpul search_term.

Cel de-al doilea lucru pe care ar trebui să îl observați este elementul search_results al elementului DOM - un element gol aflat chiar sub formular. Acesta va conține rezultatele căutării. Cu toate acestea, înainte de a merge mai departe, creați pagina find.php.

Crearea fișierului find.php

Fișierul find.php este locul unde se desfășoară întreaga acțiune. Conectează aplicația la baza de date și execută interogarea în tabel.

Prima parte a fișierului find.php conține informații despre conexiune. Pentru exemplul nostru, am introdus aceste informații direct în fișier. Pentru majoritatea dintre dvs., acesta va fi conținut în fișierul inclus sau solicitat sau ca parte a unui mediu mult mai mare.

5. Crearea fișierului find.php

Din formularul index.php va veni termenul de căutare. Înainte de a introduce această valoare în baza de date, trebuie să efectuați niște procesări simple pe aceasta. Eu folosesc funcțiile strip_tags () și substr () pentru a elimina toate etichetele HTML din termenul de căutare și pentru a reduce dimensiunea. O astfel de procesare nu doare niciodată - nu puteți avea încredere în ceea ce intră utilizatorul.

La curățarea termenului de căutare, vom efectua un pas suplimentar sub forma procedurii mysql_escape_string (). care va elimina toate celelalte glitches (cum ar fi mărcile simple) care pot pune bazele de date într-un capăt mort.

Listing 6. Crearea unei instrucțiuni SQL
Listare 7. Imprimarea unui ecou de linie de comandă

Desigur, această funcționalitate PHP este în sine extrem de utilă, dar până acum nu este vizibilă. Este necesar ca într-un fel să intrăm în acest scenariu termenul de căutare propriu-zis. Vom face acest lucru în secțiunea următoare.

Adăugarea jQuery la index.php

Până acum, avem doar o pereche de pagini PHP inofensive și o tabelă simplă MySQL. Prin adăugarea jQuery, această aplicație blândă se va transforma într-un program bazat pe Ajax, care funcționează ca o aplicație de căutare desktop, cum ar fi Spotlight în Mac OS X sau Google Desktop Search.

Deschideți fișierul index.php și adăugați apelul la fișierul jquery.js încărcat proaspăt.

Listarea 8. Crearea unei funcții pentru a preveni comportamentul tipic al formularului de căutare

Observați modul în care funcția slideUp () este folosită pentru a ascunde temporar elementul search_results al elementului DOM. Pentru a accesa acest element după nume, utilizați funcția $ (). Pentru cei familiarizați cu CSS, abordarea jQuery va părea, de asemenea, familiarizată. De exemplu, avem un element DOM cu un identificator unic search_results. și pentru a accesa acesta vom folosi $ ("# search_results"). Este foarte simplu.

Funcția ajax_search () este foarte simplu. Trebuie să arate search_results element DOM (vă amintiți, mai întâi l-am ascuns), introduceți o valoare în câmpul search_term de intrare. trece-l să funcționeze ($ .post ()), care efectuează asincronă fișier find.php, și așteptați un răspuns. Când vor apărea răspunsul (așa cum vă amintiți, am făcut acest lucru pentru a find.php returnează un răspuns în orice caz, chiar și în cazul în care nu se potrivesc este găsit), jQuery pune răspunsul în search_results element DOM.

Listing 9. Funcția ajax_search ()

Acum, că toate elementele sistemului există, puteți introduce o interogare și puteți vedea cum funcționează motorul de căutare în timp real, extragând înregistrări la fiecare eveniment de apăsare de taste. Funcționează și când faceți clic pe butonul Trimitere. De exemplu, în figura 1, litera a este introdusă în câmpul de căutare. iar cererea a returnat dosarele lui Jeanne și Sarah Smith, în numele cărora este scrisă această scrisoare.

Figura 1. Căutare Ajax în acțiune

Folosind jquery și php pentru a crea pagini Web ajax

concluzie

Desigur, puteți lucra la această aplicație. De exemplu, adăugați un câmp de cuvinte cheie și permiteți căutarea după cuvânt cheie. Sau faceți fiecare înregistrare să conțină etichete sau cuvinte cheie legate de diferite domenii de activitate. De asemenea, puteți adăuga o căutare a resurselor pentru a căuta persoane care ar putea ajuta în anumite proiecte. În cele din urmă, puteți adăuga câmpuri de e-mail, date de naștere și orice altceva, apoi extindeți parametrii de căutare.

Faptul este că pentru partea jQuery a acestei aplicații nu contează ce se întâmplă în interior. Pur și simplu trece termenul de căutare într-un fișier numit find.php. Fișierul find.php nu știe sau nu-i pasă de instrucțiunile pe care le primește de la funcția jQuery. Pentru el, termenul de căutare provine dintr-o formă obișnuită și utilizează aceste date pentru a executa interogarea și apoi returnează înregistrări care corespund acestui termen.

Obțineți produse și tehnologii

  • Îmbunătățiți-vă următorul proiect pentru a dezvolta software open source cu software-ul de încercare IBM. care pot fi descărcate pe Internet sau comandate pe DVD.
  • Descărcați versiunile de evaluare a produselor IBM și să încerce instrumente de dezvoltare de aplicatii si produse middleware de la nivel DB2®, Lotus®, Rational, Tivoli® și WebSphere®. (RO)






Articole similare

Trimiteți-le prietenilor: