Share
În urma introducerii la AJAX, iată un exemplu care utilizează API-ul XMLHttpRequest pentru a inițializa o solicitare AJAX.
Aruncați o privire la următoarea structură de bază:
De asemenea, luați în considerare vizualizarea asociată:
Iată ce vrem să se întâmple: când faceți clic pe buton, va fi executată o solicitare AJAX. Apoi, elementul cu bio va apărea idul și conținutul său va fi populate cu datele de răspuns. Aceste date sunt statice și sunt stocate în Bio.txt fişier.
Notă: fișierul este încărcat pe serverul Codepen. În acest fel, evităm problemele de origine transversală care pot apărea.
Mai jos este codul AJAX necesar:
Accentsconagua
var btn = document.getElementById ("cerere"); var bio = document.getElementById ("bio"); var request = nou XMLHttpRequest (); request.onreadystatechange = funcția () if (request.readyState === 4) bio.style.border = '1px solid # e8e8e8'; dacă (request.status === 200) bio.innerHTML = request.responseText; altceva bio.innerHTML = 'A apărut o eroare în timpul solicitării:' + request.status + '+ request.statusText; request.open (' Get ',' Bio.txt '); btn.addEventListener (' faceți clic pe ', funcția () this.style.display =' none '; request.send ();); Să descriem acum pașii pentru această solicitare:
Creați un obiect XMLHttpRequest.
Scrieți funcția care va fi rulată când serverul trimite datele de răspuns înapoi. Obiectul XMLHttpRequest are onreadystatechange proprietate care stochează această funcție. De fiecare dată când starea solicitării se schimbă, această funcție de apel invers este executată.
Monitorizați câteva alte proprietăți ale obiectului XMLHttpRequest. În primul rând, readyState proprietatea specifică starea solicitării noastre. De-a lungul apelului AJAX, valoarea se modifică și poate primi valori de la 0 la 4 (de exemplu, valoarea 4 înseamnă că datele de răspuns sunt disponibile pentru noi). În al doilea rând, stare proprietatea indică dacă cererea are succes sau nu (de exemplu, valoarea 200 definește o cerere de succes). În acest exemplu, presupunând că vom prelua datele de răspuns și apelul AJAX are succes, actualizăm conținutul elementului țintă. În caz contrar, afișăm un mesaj cu informații extrase din obiectul XMLHttpRequest.
Specificați tipul cererii utilizând deschis metodă. Această metodă acceptă doi parametri necesari și trei opționali. Primul parametru necesar definește metoda HTTP (de ex. OBȚINE sau POST). Cel de-al doilea determină adresa URL la care vom trimite solicitarea. Opțional, trecem un al treilea parametru boolean care indică dacă cererea este asincronă (adică implicită Adevărat valoare) sau sincron. Ceilalți doi parametri opționali pot fi utilizați în scopuri de autentificare.
Trimiteți solicitarea când faceți clic pe butonul prin trimite metodă. În plus, în acest moment ascundem butonul.
Notă: Dacă într-adevăr trebuie să sprijiniți versiuni foarte vechi ale Internet Explorer (adică IE6 și mai jos), trebuie să creați o instanță a ActiveXObject obiect (vezi secțiunea Pasul 1).
Următoarea vizualizare arată corpul solicitării noastre, deoarece este imprimată în consola browserului.
Demo-ul final arată astfel:
Pe de altă parte, dacă solicităm un fișier care nu există, vom vedea un mesaj similar cu următorul:
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:
Iată demo-ul codificat încorporat:
În acest tutorial am explorat modul în care putem implementa o cerere directă AJAX folosind JavaScript de vanilie.
În următoarea parte a acestei serii, ne vom concentra pe funcțiile și metodele legate de jQuery AJAX. Apoi, în partea finală a seriei, vom lucra cu un exemplu mai complicat. Rămâneți aproape!
