Toate browserele moderne au un obiect încorporat XMLHttpRequest pentru a solicita date de la un server.
Toate browserele principale au un parser built-in XML pentru a accesa și manipula XML.
XMLHttpRequest Obiectul
Obiectul XMLHttpRequest poate fi utilizat pentru a solicita date de la un server web.
Obiectul XMLHttpRequest este a developers dream de a developers dream , pentru că puteți:
- Actualizați o pagină web fără a reîncărca pagina
- Date de solicitare de la un server - după încărcarea paginii
- Primirea de date de la un server - după încărcarea paginii
- Trimiteți date la un server - în fundal
XMLHttpRequest Exemplu
Când introduceți un caracter în câmpul de introducere de mai jos, un XMLHttpRequest este trimis la server, iar unele sugestii de nume sunt returnate (from the server) :
Exemplu
Start typing a name in the input field below:
Suggestions:
Trimiterea unui XMLHttpRequest
Toate browserele moderne au un obiect XMLHttpRequest built-in.
O sintaxă comună JavaScript pentru a utiliza un aspect mult ca acest lucru:
Exemplu
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Încearcă - l singur » Crearea unui obiect XMLHttpRequest
Prima linie din exemplul de mai sus creează un objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Evenimentul onreadystatechange
Proprietatea readyState deține statutul de XMLHttpRequest.
Evenimentul onreadystatechange este declanșat de fiecare dată când se modifică readyState.
În timpul unei cereri server, readyState schimbă 0 - 4:
0: să nu solicite inițializat
1: conectare la server stabilit
2: cerere primită
3: cerere de prelucrare
4: cerere terminat și răspunsul este gata
În proprietatea onreadystatechange, specificați o funcție care urmează să fie executată atunci când schimbă readyState:
xhttp.onreadystatechange = function()
Când readyState este 4 și statutul este de 200, răspunsul este gata:
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest Proprietăți și metode
| Metodă | Descriere |
|---|---|
| new XMLHttpRequest() | Creează un nou obiect XMLHttpRequest |
| open( method, url, async ) | Specifică tipul de cerere method : tipul de cerere: GET sau POST url : locația fișierului async : true (asynchronous) sau fals (synchronous) |
| send() | Trimite o cerere către server (used for GET) |
| send( string ) | Trimite un șir de caractere cerere către server (used for POST) |
| onreadystatechange | O funcție care urmează să fie numit în cazul în care modificările de proprietate readyState |
| readyState | Statutul de XMLHttpRequest 0: să nu solicite inițializat 1: conectare la server stabilit 2: cerere primită 3: cerere de prelucrare 4: cerere terminat și răspunsul este gata |
| status | 200: OK 404 Pagina nu a fost găsită |
| responseText | Datele de răspuns ca un șir de caractere |
| responseXML | Datele de răspuns sub formă de date XML |
Accesul pe mai multe domenii
Din motive de securitate, browserele moderne nu permit accesul în domenii diferite.
Acest lucru înseamnă că atât pagina web, iar fișierul XML încearcă să se încarce, trebuie să fie situate pe același server.
Exemplele de pe w3ii toate fișierele XML deschise situate pe domeniul w3ii.
Dacă doriți să utilizați exemplul de mai sus pe una din propriile pagini web, fișierele XML pe care le încărcați trebuie să fie amplasat pe propriul server.
ResponseText Proprietatea
Proprietatea responseText returnează răspunsul ca un șir de caractere.
Dacă doriți să utilizați răspunsul ca un șir de caractere de text, utilizați proprietatea responseText:
ResponseXML Proprietatea
Proprietatea responseXML returnează răspunsul ca un obiect XML DOM.
Dacă doriți să utilizați răspunsul ca un obiect XML DOM, utilizați proprietatea responseXML:
Exemplu
Cerere fișierul cd_catalog.xml și de a folosi răspunsul ca un obiect XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; Încearcă - l singur » 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 cereri POST 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
Adresa URL - un fișier de pe un server
Parametrul URL - ul a open() metoda, este o adresă a unui fișier de pe un server:
xmlhttp.open("GET", "xmlhttp_info.txt", 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ă - Adevărat sau fals?
Pentru a trimite solicitarea asincronă, parametrul async a open() metoda trebuie să fie setat la true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Trimiterea cere o îmbunătățire este asincronă mare pentru dezvoltatori web. Multe dintre sarcinile îndeplinite pe server sunt foarte consumatoare de timp.
Prin trimiterea asincronă, 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 este gata
Async = true
Când se utilizează = true async, specificați o funcție pentru a executa atunci când răspunsul este gata, în cazul onreadystatechange:
Exemplu
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Încearcă - l singur » Async = false
Pentru a utiliza async = false, modificați al treilea parametru în open() metoda de fals:
xmlhttp.open("GET", "xmlhttp_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 asincronă = false, nu scrie o funcție onreadystatechange - trebuie doar să introduceți codul după send() Declarație:
Exemplu
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Încearcă - l singur » parser XML
Toate browserele moderne au un parser XML încorporat.
Document Object Model XML (the XML DOM) conține o mulțime de metode pentru a accesa și edita XML.
Cu toate acestea, înainte de un document XML poate fi accesat, acesta trebuie să fie încărcate într-un obiect XML DOM.
Un parser XML poate citi text simplu și de ao transforma într-un obiect XML DOM.
Parsarea un șir de text
Acest exemplu Analizează un șir de text într-un obiect DOM XML, și extrage informațiile din ea cu JavaScript:
Exemplu
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Încearcă - l singur » Vechile Browsere (IE5 and IE6)
Versiunile vechi de Internet Explorer (IE5 and IE6) nu suportă obiectul XMLHttpRequest.
Pentru a gestiona IE5 și IE6, verificați dacă browser-ul acceptă obiectul XMLHttpRequest, sau a crea un ActiveXObject:
Exemplu
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Încearcă - l singur » Versiunile vechi de Internet Explorer (IE5 and IE6) nu suportă obiectul DOMParser.
Pentru a gestiona IE5 și IE6, verificați dacă browser-ul acceptă obiectul DOMParser, sau a crea un ActiveXObject:
Exemplu
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Încearcă - l singur » 
Mai multe exemple
Preluarea informațiilor antet cu getAllResponseHeaders()
Preluați informații de antet a unei resurse (file) .
Preluarea informațiilor specifice cu antet getResponseHeader()
Preluați informații specifice de antet a unei resurse (file) .
Preia conținutul unui fișier ASP
Cum o pagină web poate comunica cu un server web în timp ce un utilizator de caractere de tip într-un câmp de introducere.
Preluarea conținutului dintr - o bază de date
Cum o pagină web poate prelua informații dintr-o bază de date cu obiectul XMLHttpRequest.
Preluați conținutul unui fișier XML
Creați un XMLHttpRequest pentru a prelua date dintr-un fișier XML și afișa datele într-un tabel HTML.