Share
În primul articol din această serie, am acoperit fundamentele AJAX. În al doilea rând, am analizat un exemplu de lucru care utilizează JavaScript de la vanilla.
În acest tutorial, vom trece prin câteva dintre funcțiile și metodele legate de jQuery AJAX. Mai precis, vom examina mai îndeaproape stenograma sarcină metodă și generic ajax funcţie.
Accentsconagua
sarcină Metodălui jQuery sarcină este o metodă simplă și totuși puternică pentru preluarea datelor de la distanță. Mai jos puteți vedea sintaxa sa:
$ (selector) .load (url [, date] [, completare])
Tabelul următor prezintă parametrii posibili:
| Parametru | Descriere | Necesar |
|---|---|---|
| URL-ul | Un șir care conține adresa URL la care este trimisă solicitarea. | da |
| date | Datele (ca un șir sau obiect simplu) care sunt trimise la server cu cererea. | Nu |
| complet | O funcție de apel invers care se execută atunci când cererea se încheie, fie cu succes, fie fără succes. | Nu |
Iată parametrii funcției de apel invers:
| Parametru | Descriere |
|---|---|
| responseText | Datele preluate din solicitare. |
| textStatus | Un șir clasificând starea solicitării. |
| jqXHR | Obiectul jQuery XMLHttpRequest (jqXHR), care este un superset al obiectului nativ XMLHttpRequest (XHR) al browserului. |
Următoarea listă rezumă posibilele valori ale textStatus parametru:
- succes - nemodificat - nocontent - eroare - timeout - abort - parsererror
Pentru a înțelege mai bine cum sarcină metoda de lucru, să revedem exemplul discutat în tutorialul anterior.
Încă o dată, uitați-vă la această structură HTML directă:
Iată cum arată:
Rețineți că vrem să actualizăm conținutul #bio element cu datele de răspuns, de îndată ce se face clic pe buton.
Iată codul jQuery necesar:
var $ btn = $ ('# solicitare'); var $ bio = $ ('# bio'); $ btn.on ('click', functie () $ (aceasta) .hide (); $ bio.load ('Bio.txt', completeFunction);); funcția completeFunction (răspunsText, textStatus, cerere) $ bio.css ('border', '1px solid # e8e8e8'); if (textStatus == 'error') $ bio.text ('A apărut o eroare în timpul solicitării:' + request.status + '+ request.statusText); Presupunând că cererea are succes (adică când textStatus este succes sau notmodified), rezultatul final ar arata astfel:
De asemenea, luați în considerare următoarea vizualizare care descrie o solicitare de succes:
Partea din stânga a acestei vizualizări arată obiectul XHR pe măsură ce acesta este tipărit în consola browserului dacă folosim JavaScript pur (vedeți tutorialul anterior) pentru a face cererea. Pe de altă parte, partea dreaptă afișează obiectul jqXHR respectiv pe măsură ce este imprimat dacă folosim sarcină metodă.
În cazul unei cereri nereușite, cu toate acestea, ar trebui să apară un mesaj corespunzător. Pentru a face acest lucru, monitorizăm valoarea textStatus și afișați un mesaj de eroare:
Notă: Dacă executați exemplul din mediul dvs. local (și stocați Bio.txt fișier în el), mesajul de eroare va fi probabil diferit. De exemplu, este posibil să vedeți următorul rezultat:
În cele din urmă, merită menționat faptul că, în mod implicit, sarcină metoda folosește HTTP OBȚINE , cu excepția cazului în care trimitem date ca un obiect la server. Numai atunci, POST metoda este invocată.
Vedeți demo-ul Codepen relevant:
Acum, să modificăm formatul fișierului pe care îl solicităm de la server. În mod specific, pentru acest exemplu, datele dorite sunt incluse în Bio.html fișier în loc de Bio.txt fişier. De remarcat, de asemenea, că fișierul țintă conține două paragrafe.
Dacă presupunem că vom încărca doar primul paragraf, va trebui să actualizăm codul inițial după cum urmează:
$ btn.on ('click', funcția () // această linie modifică numai $ bio.load ('Bio.html p: first-child', completeFunction);); Iată cum arată:
Și aici este demo Codepen:
În acest tutorial, am demonstrat cum puteți utiliza AJAX cu jQuery. Pentru a face lucrurile mai interesante, am lucrat și cu câteva exemple practice. În ultimul tutorial rămas din această serie vom încheia lucrurile prin colaborarea cu un exemplu mai implicat.
