Share
După ce ați urmat cele trei cursuri anterioare, ar fi trebuit să dobândiți o bună înțelegere a AJAX. În acest tutorial final, vom încheia lucrurile prin lucrul cu un exemplu mai implicat.
Pentru a obține o idee despre structura acestui exemplu, luați în considerare următorul marcaj:
Marcajul pentru principal este prezentat mai jos:
Cadre front-end populare
Faceți clic pe fiecare pentru a încărca detaliile prin AJAX.
Bootstrap Fundația UIkit Semantic UI Skeleton Material Design Lite
Observați legăturile de text. Acestea corespund diferitelor cadre frontale. Așa cum vom vedea în secțiunea următoare, de fiecare dată când facem clic pe link-uri, o cerere AJAX va fi executată. Apoi, elementul cu clasa lui modal va apărea și conținutul său va fi actualizat cu datele preluate din răspuns.
Iată cum principal elementul arata ca:
Următorul pas este să examinăm structura modalului nostru. Iată codul HTML:
- Cadru
- Versiune curentă
- Numărul de stele Github
- Pagina Oficială
După cum puteți vedea, modulul conține câteva elemente goale. Am plasat cele în HTML, deoarece textul lor se va schimba în funcție de linkul pe care faceți clic și de răspunsul pe care îl preluăm.
Imaginea de mai jos arată cum apare inițial modalul:
În mod implicit, modalul este ascuns. În plus, vom ascunde încărcătorul. Aceasta va apărea numai atunci când cererea AJAX este declanșată.
Aruncați o privire la regulile CSS corespunzătoare:
.modal opacitate: 0; .loader display: none;
Rețineți că folosim opacitate proprietate (și nu afişa proprietate) pentru a ascunde modal deoarece această proprietate aparține proprietăților CSS animabile. În acest fel, vom putea să tranziționăm stările modale (adică stările deschise și cele închise).
În scopul acestui exemplu, vom alege să ne construim răspunsul JSON. Mai exact, răspunsul așteptat (adică mesajul Demo.json fișier) va fi o serie de obiecte. Fiecare obiect va conține detalii cu privire la cadrele front-end conexe.
Mai mult decât atât, valoarea Nume proprietatea se va potrivi cu legăturile text ale principal element (a se vedea secțiunea anterioară). În acest sens, structura răspunsului arată astfel:
"url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "actualVersion": "3.3.5", "nume": "Bootstrap", "url" "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "name": "Foundation", // 4 mai multe obiecte aici]
Notă: valorile pe care le-am folosit pentru numberOfStars și Versiune curentă proprietățile sunt fals și pur în scopul demonstrației.
Similar cu exemplele anterioare din această serie, vom folosi AJAX pentru a solicita un fișier static. Cu toate acestea, dacă vrem să încorporăm conținut provenit de la alte site-uri (de ex. Google Maps, Flickr), trebuie să citim documentația API și, dacă este necesar, să aplicăm pentru o cheie API.
În plus, datele noastre țintă trăiesc pe același server ca pagina demo. Prin urmare, vom evita limitările care pot apărea atunci când interacționăm cu serviciile unor terțe părți (consultați secțiunea "Limitările solicitărilor AJAX" din primul tutorial).
În această secțiune, vom folosi jQuery ajax funcția de inițializare a unei solicitări AJAX. Înainte de a face acest lucru, să definim mai întâi variabilele noastre prin cache-ul celor mai frecvent utilizate selectori jQuery:
Accentsconagua
var $ list = $ ('.m-info'), var $ mesaj = $ ('.m-message'); var $ modal = $ (". modal"); var $ încărcător = $ ("încărcător"); var $ frame; Acum, este timpul să examinăm codul responsabil pentru executarea cererii:
$ ('. boxes' a)) pe ('click', funcția (e) e.preventDefault () , dataType: 'json', inainteSend: functie () $ loader.show ();)) executata (successFunction) .fail (errorFunction) .always (alwaysFunction);); Veți observa sintaxa pentru ajax funcționează după cum urmează:
$ .Ajax ([Setări])
setări parametru este un obiect de configurare care conține informații despre solicitarea noastră. Numărul proprietăților pe care acest obiect le poate avea este foarte lung (aproximativ 34 de proprietăți). Din motive de simplitate, vom discuta doar despre cele folosite în acest demo. Mai exact:
| Proprietate | Descriere |
|---|---|
| URL-ul | Un șir care conține adresa URL la care este trimisă solicitarea. |
| dataType | Formatul datelor de răspuns (de ex. JSON, xml, html). |
| beforeSend | O funcție de retur care este executată înainte de a trimite cererea. Aici, această funcție declanșează codul care arată încărcătorul. |
Înainte de a merge mai departe, merită menționate trei lucruri:
ajax funcţie: $ .ajax (url [, setări]) setări parametrii sunt opționali.OBȚINE. ajax funcția returnează obiectul jQuery XMLHttpRequest sau jqXHR. Acest obiect implementează interfața Promise și, astfel, conține toate proprietățile, metodele și comportamentul unei promisiuni.
În acest exemplu, folosim următoarele metode Promise:
Terminateșuamereu Terminat metoda este declanșată dacă cererea este reușită. Acesta primește unul sau mai multe argumente, toate acestea putând fi fie o singură funcție, fie o serie de funcții. De exemplu, în demonstrația noastră, successFunction () este trecut ca argument.
Funcția de apel invers (de ex. successFunction ()) acceptă trei argumente. În primul rând, datele returnate. În al doilea rând, un șir clasificând starea solicitării (vedeți articolul precedent pentru valorile posibile). În cele din urmă, obiectul jqXHR.
eșua metoda se numește dacă cererea eșuează. Acesta primește unul sau mai multe argumente, toate acestea putând fi fie o singură funcție, fie o serie de funcții. De exemplu, în demonstrația noastră, errorFunction () este trecut ca argument.
Funcția de apel invers (de ex. errorFunction ()) acceptă trei argumente: obiectul jqXHR, un șir clasificând starea solicitării și un alt șir care specifică eroarea rezultată. Această eroare primește partea textuală a stării HTTP, cum ar fi Nu a fost gasit sau Interzis.
mereu metoda este executată atunci când cererea se încheie, indiferent de succes (adică Terminat metoda este executată) sau eșec (adică eșua metoda este executată). Din nou, primește ca argument o singură funcție sau o serie de funcții. De exemplu, în demonstrația noastră, alwaysFunction () este trecut ca argument.
Starea solicitării specifică argumentele funcției. În cazul unei cereri de succes, apelul invers (de ex. alwaysFunction ()) primește aceleași argumente ca și callback-ul Terminat metodă. Dimpotrivă, în cazul în care cererea nu reușește, acceptă aceleași argumente ca apelul invers eșua metodă.
Notă: In loc de Terminat, eșua, și mereu Metode de promisiune care sunt utilizate în acest exemplu, am putut folosi în mod egal succes, eroare, și complet funcții de apel invers. Aceste funcții sunt definite în setări parametru.
În cazul în care cererea este reușită, suntem în stare să preluăm datele de răspuns. Apoi, o manipulăm astfel încât să populeze elementele goale ale modalului.
Luați în considerare codul pentru successFunction suna inapoi:
Funcția successFunction (data) if (lungime de date> 0) pentru (var i = 0; i < data.length; i++) if ($framework === data[i].name) $list.show(); $message.hide(); $list.find('li:nth-of-type(2)').text($framework); $list.find('li:nth-of-type(4)').text(data[i].currentVersion); $list.find('li:nth-of-type(6)').text(data[i].numberOfStars); $list.find('li:nth-of-type(8)').html('' + data[i].url + ''); break; else $list.hide(); $message.show().text('No data received for this framework!'); else $list.hide(); $message.text('No data received from your respose!'); Deși am actualizat conținutul modalului nostru, acest lucru este încă ascuns. Ea devine vizibilă și încărcătorul dispare atunci când cererea termină. Numai atunci, alwaysFunction apelul de apel este executat:
funcția alwaysFunction () $ loader.hide (); $ Modal.addClass ( 'activ');
activ clasa arată astfel:
.activ opacitate: 1; z-index: 10; transformare: scară (1);
Mai jos puteți vedea aspectul așteptat al modalului dacă faceți clic pe bootstrap link text:
Este important să înțelegeți codul care este executat în anumite circumstanțe. Să acoperim două scenarii comune:
Nume proprietatea nu se potrivește cu legăturile text ale principal element. De exemplu, să presupunem că definim o adresă URL unde valoarea lui Nume proprietatea obiectului care are legătură cu cadrul Fundației este Foundation2 in loc de fundație. Într-un astfel de caz, dacă dăm clic pe fundație text, va apărea modalitatea de mai jos:
Deci, am acoperit codul care a fost concediat atunci când cererea a reușit. Dar ce se întâmplă dacă cererea nu reușește? În cazul unei solicitări nereușite, ascundem lista și afișăm un mesaj personalizat.
Iată codul failFunction () care demonstrează că acest comportament:
funcția failFunction (cerere, textStatus, errorThrown) $ list.hide (); $ message.text ('A apărut o eroare în timpul solicitării dvs.:' + request.status + '+ textStatus +' + errorThrown); Pentru a ne familiariza cu acest cod, specificăm o adresă URL care nu există. Prin urmare, eșua metoda va fi declanșată și modalitatea de mai jos va fi afișată:
Notă: Din nou, mesajul de eroare poate fi diferit dacă executați acest exemplu local.
Iată demo-ul codificat încorporat:
În acest tutorial am încheiat examinarea AJAX de la o perspectivă a designerului web - bine făcută pentru urmărirea acesteia! Sper că ați găsit această serie utilă și ați învățat noi abilități.
Ca o etapă următoare, vă încurajez să examinați următoarele lucruri:
$ .getJSON metodă).