Tüm modern tarayıcılarda bir sunucudan veri istemek için yerleşik bir XMLHttpRequest nesnesi var.
Bütün büyük tarayıcılar erişmek ve XML işlemek için yerleşik bir XML ayrıştırıcı var.
XMLHttpRequest nesnesi
XMLHttpRequest nesnesi, bir web sunucusu veri istemek için kullanılabilir.
XMLHttpRequest nesnesi olan a developers dream çünkü yapabilirsin,:
- sayfayı yenilemeden bir web sayfasını güncelleme
- bir sunucudan istek verileri - sayfa yüklendikten sonra
- Bir sunucudan veri alma - sayfa yüklendikten sonra
- Bir sunucuya veri gönderme - Arka planda
XMLHttpRequest Örnek
Aşağıdaki giriş alanına bir karakter yazdığınızda, bir XMLHttpRequest sunucusuna gönderilir ve bazı isim önerileri döndürülür (from the server) :
Örnek
Start typing a name in the input field below:
Suggestions:
Bir XMLHttpRequest gönderme
Tüm modern tarayıcılar yerleşik bir XMLHttpRequest nesnesi var.
bunu kullanarak için yaygın bir JavaScript sözdizimi böyle çok görünür:
Örnek
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(); Kendin dene " XMLHttpRequest Nesnesi Oluşturma
Örneğin ilk satır, bir XMLHttpRequest Nesneyi oluşturur:
var xhttp = new XMLHttpRequest();
onreadystatechange Olay
ReadyState özelliği XMLHttpRequest durumunu tutar.
Onreadystatechange olay her seferinde readyState değişiklikler tetiklenir.
Bir sunucu isteği sırasında, readyState 0'dan 4'e kadar değiştirir:
0: başlatılmamış İsteği
1: sunucu bağlantısı kuruldu
2: isteği alındı
3: işlem isteği
4: bitmiş talep ve tepki hazırdır
readyState değiştirdiğinde onreadystatechange mülkünde, yürütülecek bir işlev belirtin:
xhttp.onreadystatechange = function()
readyState 4'tür ve durum 200 olduğunda, yanıt hazır:
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest özellikleri ve yöntemleri
| Yöntem | Açıklama |
|---|---|
| new XMLHttpRequest() | Yeni bir XMLHttpRequest nesnesi oluşturur |
| open( method, url, async ) | İsteğe türünü belirtir method : istek tipi: GET veya POST url : dosya yeri async : true (asynchronous) veya false (synchronous) |
| send() | Sunucuya bir istek gönderir (used for GET) |
| send( string ) | Sunucuya bir istek dizesini gönderir (used for POST) |
| onreadystatechange | Bir fonksiyon çağrılacak zaman readyState özelliği değişiklikleri |
| readyState | XMLHttpRequest durumu 0: başlatılmamış İsteği 1: sunucu bağlantısı kuruldu 2: isteği alındı 3: işlem isteği 4: bitmiş talep ve tepki hazırdır |
| status | 200: Tamam 404 Sayfa Bulunamadı |
| responseText | bir dize olarak yanıt verileri |
| responseXML | XML veri olarak yanıt verileri |
Alanlar Arası Erişim
Güvenlik nedeniyle, modern tarayıcılar etki alanları arasında erişime izin vermez.
Bu web sayfası ve yüklenmeye çalışıyor XML dosyası ikisinin birden aynı sunucuda bulunması gerektiği anlamına gelir.
w3ii üzerine örnekler w3ii etki alanında bulunan tüm açık XML dosyaları.
Eğer kendi web sayfalarından birinde yukarıdaki örneği kullanmak isterseniz, yüklemek XML dosyaları kendi sunucusunda yer almalıdır.
responseText Mülkiyet
responseText özelliği bir dize olarak yanıt verir.
Bir metin dizesi olarak yanıt kullanmak istiyorsanız, responseText özelliğini kullanın:
responseXML Mülkiyet
responseXML özelliği bir XML DOM nesnesi olarak yanıt verir.
Bir XML DOM nesnesi olarak yanıt kullanmak istiyorsanız, responseXML özelliğini kullanın:
Örnek
Dosya isteğinde cd_catalog.xml ve bir XML DOM nesnesi olarak yanıt kullanmak:
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; Kendin dene " GET veya POST?
GET basit ve POST daha hızlıdır ve çoğu durumda kullanılabilir.
Ancak, her zaman zaman POST isteklerini kullanın:
- Bir önbelleğe dosya bir seçenek değildir (update a file or database on the server)
- sunucusuna veri büyük miktarda gönderme (POST bir boyut sınırlamaları vardır)
- Kullanıcı girişini gönderme (which can contain unknown characters) , POST GET daha sağlam ve güvenli
url - Server 'da Bir Dosya
Url parametresi open() yöntemiyle, bir sunucuda bir dosyaya bir adres:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
dosya .asp ve (geri yanıt göndermeden sunucuda eylemleri gerçekleştirebilirsiniz) php gibi .txt ve .xml veya sunucu komut dosyası dosyaları gibi her türlü dosya olabilir.
Asenkron - Doğru veya Yanlış?
Uyumsuz isteği göndermek için, bir zaman uyumsuz parametresi open() yöntemine true ayarlanmış olması gerekir:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
uyumsuz istekleri gönderme web geliştiricileri için büyük bir gelişme olduğunu. sunucuda gerçekleştirilen görevlerin çoğu edilmesi çok zaman alır.
uyumsuz göndererek, JavaScript sunucu yanıtı için beklemek zorunda değildir, ancak bunun yerine can vermez:
- Sunucu yanıt beklenirken diğer komut yürütmek
- yanıtı hazır olduğunda tepki ile uğraşmak
Zaman uyumsuz = true
Gerçek zaman uyumsuz = kullanırken, tepki onreadystatechange olay hazır olduğunda yürütmek için bir işlev belirtin:
Örnek
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(); Kendin dene " Zaman uyumsuz = false
Uyumsuz kullanmak için = false, üçüncü parametre değiştirmek open() false yöntem:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
= False uyumsuz kullanarak tavsiye edilmez, ancak birkaç küçük istekleri için bu Tamam olabilir.
sunucu yanıtı hazır olana kadar JavaScript, yürütmeye devam DEĞİL unutmayın. Sunucu meşgul veya yavaşsa, uygulama askıda veya duracaktır.
Note: Eğer zaman uyumsuz = false kullandığınızda, bir onreadystatechange fonksiyon yazmak değil - hemen sonra kod koymak send() deyimi:
Örnek
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Kendin dene " XML Ayrıştırıcı
Tüm modern tarayıcılar yerleşik bir XML ayrıştırıcı var.
XML Belge Nesne Modeli (the XML DOM) erişmek için yöntem ve düzenleme XML bir sürü içerir.
Bir XML belge erişilebilir önce Ancak, bir XML DOM nesnesine yüklenmelidir.
Bir XML çözümleyici düz metin okuma ve XML DOM nesnesi haline dönüştürebilir.
Bir Metin Dizesi Ayrıştırma
Bu örnek bir XML DOM nesnesine bir metin dizesi ayrıştırır ve JavaScript ile ondan bilgi ayıklar:
Örnek
<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>
Kendin dene " Eski Tarayıcılar (IE5 and IE6)
Internet Explorer'ın eski sürümleri (IE5 and IE6) XMLHttpRequest nesnesini desteklemez.
IE5 ve IE6 işlemek için tarayıcı XMLHttpRequest nesnesini destekleyip desteklemediğini kontrol, ya da başka bir ActiveXObject oluşturun:
Örnek
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Kendin dene " Internet Explorer'ın eski sürümleri (IE5 and IE6) DOMParser nesnesi desteklemez.
IE5 ve IE6 işlemek için tarayıcı DOMParser nesneyi destekleyip desteklemediğini kontrol, ya da başka bir ActiveXObject oluşturun:
Örnek
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);
}
Kendin dene " 
Diğer Örnekler
Ile başlık bilgilerini almak getAllResponseHeaders()
Bir kaynağın başlık bilgilerini al (file) .
Ile belirli bir başlık bilgileri almak getResponseHeader()
Bir kaynağın belirli başlık bilgilerini al (file) .
ASP dosyasının içeriğini alma
Bir web sayfası bir giriş alanına bir kullanıcı tipi karakterleri ise bir web sunucusu ile iletişim nasıl.
Bir veritabanındaki içeriği Al
Nasıl bir web sayfası XMLHttpRequest nesnesi ile bir veritabanından bilgileri alabilmesi.
XML dosyasının içeriğini al
XML dosyasından veri almak ve bir HTML tablosundaki verileri görüntülemek için bir XMLHttpRequest oluşturun.