Cum se face o cerere AJAX cu jQuery pentru HTML5 si CSS3 Programare

Scopul principal al unei biblioteci AJAX ca jQuery este simplificarea cererilor AJAX pentru programatorii HTML5 și CSS3. E greu de crezut cât de ușor poate fi acest lucru cu jQuery.

Cum să includeți un fișier text cu AJAX

Verificați acest cod curat:

ajax. html $ (document). gata (getAJAX); funcția getAJAX () {$ ("output"). încărcați ("hello.txt");}

HTML-ul este foarte curat. Pur și simplu creează o div divizată numită ieșire.

Acest exemplu folosește AJAX, deci dacă nu funcționează, este posibil să vă amintiți câteva detalii despre cum funcționează AJAX. Un program care utilizează AJAX ar trebui să fie rulat printr-un server web, nu doar dintr-un fișier local. De asemenea, fișierul citit ar trebui să se afle pe același server ca și programul care face cererea AJAX.

Mecanismul de încărcare () descris aici este potrivit pentru o situație de bază în care doriți să încărcați un fragment de text simplu sau un fragment HTML în paginile dvs.

Construirea unui CMS pentru un bărbat săraci cu AJAX

AJAX și jQuery pot fi o modalitate foarte utilă de a construi site-uri web eficiente, chiar și fără programarea de la server. Frecvent, un site web se bazează pe o serie de elemente mai mici care pot fi schimbate și reutilizate. Puteți utiliza AJAX pentru a construi un cadru care să permită reutilizarea și modificarea ușoară a conținutului web.

Deși nimic nu este tot ce șochează despre pagină din perspectiva utilizatorului, o privire la cod poate arăta câteva surprize:

CMS Utilizarea AJAX $ (init); funcția init () {$ ("# heading"). încărcare ("cap. html"); $ ("# Meniul"). încărcare ("meniu. html"); $ ("# Conținut1"). încărcare ("story1. html"); $ ("# Content2"). încărcare ("story2. html"); $ ("# Subsol"). încărcare ("footer. html");}; 
Priviți codul și puteți vedea aceste caracteristici interesante:


Pagina nu are conținut! Toate divs sunt goale. Niciunul dintre textele afișate în ecranul de ecran nu este prezent în acest document, dar toate sunt trase dinamic din fișiere mai mici.


Pagina conține numere goale numite. Mai degrabă decât un anumit conținut, pagina este alcătuită din substituenți cu ID-uri.


Utilizează jQuery. Biblioteca jQuery este utilizată pentru a simplifica foarte mult încărcarea datelor prin apeluri AJAX.


Întregul conținut este în fișiere separate. Uitați-vă în director și vedeți fișiere HTML foarte simple care conțin părți mici ale paginii. De exemplu, povestea1. html arata astfel:
Cartea I - Crearea fundatiei HTML

Fonturi HTML Sound
Validarea
Alegerea instrumentelor
Managementul informatiilor cu liste si tabele
Adăugarea imaginilor
Crearea formularelor




Metoda init () rulează pe document.gata . Când documentul este gata, pagina rulează metoda init ().


Metoda init () folosește apelurile AJAX pentru încărcarea dinamică a conținutului. Nu este altceva decât o serie de metode de încărcare jQuery ().


Această abordare poate părea o mulțime de lucruri, dar are câteva caracteristici foarte interesante:


Dacă construiți un site mare cu mai multe pagini, de obicei doriți să proiectați aspectul vizual o dată și să reutilizați același șablon în mod repetat.


De asemenea, veți avea probabil unele elemente care vor fi consecvente în mai multe pagini. Puteți crea un document implicit, copiați-l și inserați-l pentru fiecare pagină, însă această abordare devine dezordonată. Ce se întâmplă dacă ați creat 100 de pagini conform unui șablon și apoi trebuie să schimbați antetul? Trebuie să faceți schimbarea pe 100 de pagini diferite.


Avantajul abordării în stil șablon este reutilizarea codului. La fel ca utilizarea unui stil extern vă permite să multiplicați o foaie de stil în sute de documente, proiectarea unui șablon fără conținut vă permite să stocați fragmente de cod în fișiere mai mici și să le reutilizați. Toate cele 100 de pagini indică același fișier de meniu, deci dacă doriți să modificați meniul, schimbați un fișier și totul se schimbă odată cu acesta.
Iată cum folosiți acest tip de abordare:


Creați un singur șablon pentru întregul dvs. site.
Creați cod HTML și CSS de bază pentru a gestiona aspectul și simțul general pentru întregul site. Nu vă îngrijorați încă de conținut. Doar construiți locații pentru toate componentele paginii dvs. Asigurați-vă că dați fiecărui element un ID și scrieți CSS pentru a vă poziționa lucrurile așa cum doriți.


Adăugați suport jQuery.
Creați un link către biblioteca jQuery și faceți o metodă implicită init (). Introduceți codul pentru a gestiona popularea acelor părți ale paginii care vor fi mereu consecvente.


Duplicați șablonul.
După ce ați simțit cum va funcționa șablonul, faceți o copie pentru fiecare pagină a site-ului dvs.


Personalizați fiecare pagină modificând funcția init () .
Singura parte a șablonului care se modifică este funcția init (). Toate paginile dvs. vor fi identice, cu excepția faptului că au funcții personalizate init () care încarcă conținut diferit.


Încărcați conținut personalizat în divs cu AJAX.
Utilizați funcția init () pentru a încărca conținutul în fiecare div.


Aceasta este o modalitate excelentă de gestionare a conținutului, dar nu este un sistem complet de gestionare a conținutului. Chiar și AJAX nu vă permite să stocați conținutul pe web. Sistemele complexe de gestionare a conținutului folosesc și baze de date, mai degrabă decât fișiere pentru a gestiona conținutul. Veți avea nevoie de un program de server-side (cum ar fi PHP) și, de obicei, de o bază de date (ca mySQL) pentru a rezolva acest tip de muncă.