Obiectul XMLHttpRequest este folosit pentru a face schimb de date cu un server.
Trimite o cerere de la un server
Pentru a trimite o cerere la un server, folosim open() și send() metode ale obiectului XMLHttpRequest:
xhttp. open("GET", "ajax_info.txt" , true) ;
xhttp. send() ;| Metodă | Descriere |
|---|---|
| open( method, url, async ) | Specifică tipul de cerere method : tipul de cerere: GET sau POST url : serverul (file) locație async : true (asynchronous) sau false (synchronous) |
| send() | Trimite cererea către serverul (used for GET ) |
| send( string ) | Trimite cererea către serverul (used for POST ) |
GET sau POST ?
GET este mai simplă și mai rapidă decât POST , și poate fi folosit în cele mai multe cazuri.
Cu toate acestea, utilizați întotdeauna POST cereri atunci când:
- Un fișier din memoria cache nu este o opțiune (update a file or database on the server) de (update a file or database on the server) de (update a file or database on the server) .
- Trimiterea o cantitate mare de date către server ( POST nu are limite de dimensiune).
- Trimiterea de intrare de utilizator (which can contain unknown characters) , POST este mai robust și sigur decât GET .
GET Cereri
Un simplu GET cerere:
In exemplul de mai sus, s-ar putea obține un rezultat din cache. Pentru a evita acest lucru, se adaugă un unic ID to the URL: ID to the URL:
Exemplu
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send(); Încearcă - l singur » Dacă doriți să trimiteți informații cu GET metoda, adăugați informațiile la adresa URL:
Exemplu
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Încearcă - l singur » POST Cereri
Un simplu POST cerere:
Pentru a POST date ca un formular HTML, adăugați un HTTP header cu setRequestHeader() . Specificați datele pe care doriți să o trimiteți în send() metoda:
Exemplu
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Încearcă - l singur » | Metodă | Descriere |
|---|---|
| setRequestHeader( header, value ) | Adauga headere HTTP la cererea header : specifică numele antet value : specifică valoarea antet |
Adresa URL - un fișier de pe un server
url - open() url parametru al open() metoda, este o adresă a unui fișier de pe un server:
xhttp. open("GET", "ajax_test.asp" , true) ;Fișierul poate fi orice tip de fișier, cum ar fi .txt și .xml, sau fișiere de server scripting cum ar fi asp și .php (care se pot efectua acțiuni pe server înainte de a trimite înapoi răspunsul).
Asincronă - True sau False ?
AJAX vine de la Asynchronous JavaScript si XML, precum și pentru obiectul XMLHttpRequest să se comporte ca AJAX, The async parametrul a open() metoda trebuie să fie setat la true:
xhttp. open("GET", "ajax_test.asp" , true) ;Trimiterea de cereri asincrone este o mare imbunatatire pentru dezvoltatori web. Multe dintre sarcinile îndeplinite pe server sunt foarte consumatoare de timp. Înainte de AJAX, această operațiune ar putea provoca cererea de a închide sau a opri.
Cu AJAX, JavaScript nu trebuie să aștepte răspunsul serverului, dar poate în schimb:
- executa alte script-uri în timp ce așteaptă răspuns de la server
- a face cu răspunsul atunci când răspunsul gata
Async=true
Când se utilizează class = „notranslate“ = true asin, specificați o funcție pentru a executa atunci când răspunsul este gata , în cazul onreadystatechange:
Exemplu
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Încearcă - l singur » Vei afla mai multe despre onreadystatechange într-un capitol ulterior.
Async=false
Pentru a utiliza async=false , modificați al treilea parametru în open() metoda de fals:
xhttp. open("GET", "ajax_info.txt" , false) ;Folosind async=false nu este recomandată, dar pentru câteva cereri mici , acest lucru poate fi ok.
Amintiți-vă că JavaScript nu va continua să execute, până când răspunsul serverului este gata. Dacă serverul este ocupat sau lent, aplicația se va închide sau opri.
Note: Când utilizați async=false , nu scrie o funcție onreadystatechange - trebuie doar să introduceți codul după send() Declarație:
Exemplu
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Încearcă - l singur »