XMLHttpRequest Nesnesi _
Tüm modern tarayıcılarda, bir sunucudan veri istemek için yerleşik bir XMLHttpRequest nesnesi bulunur.
Tüm büyük tarayıcılarda, XML'e erişmek ve bunları işlemek için yerleşik bir XML ayrıştırıcısı bulunur.
XMLHttpRequest Nesnesi
XMLHttpRequest nesnesi, bir web sunucusundan veri istemek için kullanılabilir.
XMLHttpRequest nesnesi bir geliştiricinin hayalidir çünkü şunları yapabilirsiniz:
- Sayfayı yeniden yüklemeden bir web sayfasını güncelleyin
- Bir sunucudan veri iste - sayfa yüklendikten sonra
- Bir sunucudan veri alın - sayfa yüklendikten sonra
- Bir sunucuya veri gönder - arka planda
XMLHttpRequest Örneği
Aşağıdaki giriş alanına bir karakter yazdığınızda, sunucuya bir XMLHttpRequest gönderilir ve bazı ad önerileri (sunucudan) döndürülür:
Örnek
Start typing a name in the input field below:
Suggestions:
XMLHttpRequest Gönderme
Tüm modern tarayıcılarda yerleşik bir XMLHttpRequest nesnesi bulunur.
Bunu kullanmak için yaygın bir JavaScript sözdizimi şuna benzer:
Örnek
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Bir XMLHttpRequest Nesnesi Oluşturma
Yukarıdaki örnekteki ilk satır bir XMLHttpRequest nesnesi oluşturur:
var xhttp = new XMLHttpRequest();
onreadystatechange olayı
ReadyState özelliği, XMLHttpRequest'in durumunu tutar .
onreadystatechange olayı, readyState her değiştiğinde tetiklenir .
Bir sunucu isteği sırasında readyState 0'dan 4'e değişir:
0: istek başlatılmadı
1: sunucu bağlantısı kuruldu
2: istek alındı
3: istek işleniyor
4: istek tamamlandı ve yanıt hazır
onreadystatechange özelliğinde, readyState değiştiğinde yürütülecek bir işlev belirtin:
xhttp.onreadystatechange = function()
ReadyState 4 ve status 200 olduğunda, yanıt hazırdır:
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest Özellikleri ve Yöntemleri
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Etki Alanları Arasında Erişim
Güvenlik nedeniyle, modern tarayıcılar etki alanları arasında erişime izin vermez.
Bu, hem web sayfasının hem de yüklemeye çalıştığı XML dosyasının aynı sunucuda bulunması gerektiği anlamına gelir.
W3Schools'daki örnekler, W3Schools etki alanında bulunan tüm açık XML dosyalarıdır.
Yukarıdaki örneği kendi web sayfalarınızdan birinde kullanmak istiyorsanız yüklediğiniz XML dosyalarının kendi sunucunuzda bulunması gerekir.
ResponseText Özelliği
ResponseText özelliği, yanıtı bir dize olarak döndürür.
Yanıtı bir metin dizesi olarak kullanmak istiyorsanız, answerText özelliğini kullanın:
Örnek
document.getElementById("demo").innerHTML = xmlhttp.responseText;
tepkiXML Özelliği
ResponseXML özelliği, yanıtı bir XML DOM nesnesi olarak döndürür.
Yanıtı bir XML DOM nesnesi olarak kullanmak istiyorsanız, answerXML özelliğini kullanın:
Örnek
cd_catalog.xml dosyasını isteyin ve yanıtı bir XML DOM nesnesi olarak kullanın:
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;
GET veya POST?
GET, POST'tan daha basit ve daha hızlıdır ve çoğu durumda kullanılabilir.
Ancak, aşağıdaki durumlarda her zaman POST isteklerini kullanın:
- Önbelleğe alınmış dosya bir seçenek değildir (sunucudaki bir dosyayı veya veritabanını güncelleyin)
- Sunucuya büyük miktarda veri gönderme (POST'un boyut sınırlaması yoktur)
- Kullanıcı girişi göndererek (bilinmeyen karakterler içerebilir), POST, GET'den daha sağlam ve güvenlidir
url - Sunucudaki Bir Dosya
open() yönteminin url parametresi, sunucudaki bir dosyanın adresidir:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Dosya, .txt ve .xml gibi herhangi bir dosya türü veya .asp ve .php gibi sunucu komut dosyası dosyaları olabilir (yanıtı geri göndermeden önce sunucuda eylemler gerçekleştirebilir).
Eşzamansız - Doğru mu Yanlış mı?
İsteği eşzamansız olarak göndermek için, open() yönteminin eşzamansız parametresi true olarak ayarlanmalıdır:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Eşzamansız istek göndermek, web geliştiricileri için büyük bir gelişmedir. Sunucuda gerçekleştirilen görevlerin çoğu çok zaman alıcıdır.
Eşzamansız olarak gönderildiğinde, JavaScript'in sunucu yanıtını beklemesi gerekmez, bunun yerine şunları yapabilir:
- sunucu yanıtını beklerken diğer komut dosyalarını yürütün
- yanıt hazır olduğunda yanıtla ilgilen
zaman uyumsuz = doğru
async = true kullanırken, onreadystatechange olayında yanıt hazır olduğunda yürütülecek bir işlev belirtin:
Örnek
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
zaman uyumsuz = yanlış
async = false kullanmak için open() yöntemindeki üçüncü parametreyi false olarak değiştirin:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
async = false kullanılması önerilmez, ancak birkaç küçük istek için bu uygun olabilir.
Sunucu yanıtı hazır olana kadar JavaScript'in yürütülmeye DEVAM ETMEYECEĞİNİ unutmayın. Sunucu meşgul veya yavaşsa, uygulama askıda kalacak veya duracaktır.
Not: async = false kullandığınızda, bir onreadystatechange işlevi YAZMAYIN - kodu send() ifadesinden sonra koymanız yeterlidir:
Örnek
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML Ayrıştırıcı
Tüm modern tarayıcıların yerleşik bir XML ayrıştırıcısı vardır.
XML Belge Nesne Modeli (XML DOM), XML'e erişmek ve XML'i düzenlemek için birçok yöntem içerir.
Ancak, bir XML belgesine erişilebilmesi için önce bir XML DOM nesnesine yüklenmesi gerekir.
Bir XML ayrıştırıcı, düz metni okuyabilir ve onu bir XML DOM nesnesine dönüştürebilir.
Bir Metin Dizesini Ayrıştırma
Bu örnek, bir metin dizesini bir XML DOM nesnesine ayrıştırır ve ondan JavaScript ile bilgileri çıkarır:
Ö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>
Eski Tarayıcılar (IE5 ve IE6)
Internet Explorer'ın eski sürümleri (IE5 ve IE6), XMLHttpRequest nesnesini desteklemez.
IE5 ve IE6'yı işlemek için tarayıcının XMLHttpRequest nesnesini destekleyip desteklemediğini kontrol edin veya 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");
}
Internet Explorer'ın eski sürümleri (IE5 ve IE6) DOMParser nesnesini desteklemez.
IE5 ve IE6'yı işlemek için tarayıcının DOMParser nesnesini destekleyip desteklemediğini kontrol edin veya 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);
}
Daha fazla örnek
başlık bilgilerini alın Bir kaynağın (dosya) başlık bilgilerini alın.
belirli başlık bilgilerini alın Bir kaynağın (dosya) belirli başlık bilgilerini alın.
Kullanıcı bir giriş alanına karakterleri yazarken bir web sayfası bir web sunucusuyla nasıl iletişim kurabilir.
Bir web sayfası XMLHttpRequest nesnesiyle bir veritabanından nasıl bilgi alabilir.
alın Bir XML dosyasından veri almak ve verileri bir HTML tablosunda görüntülemek için bir XMLHttpRequest oluşturun.