AJAX - Sunucu Yanıtı
onreadystatechange Özelliği
ReadyState özelliği, XMLHttpRequest'in durumunu tutar .
onreadystatechange özelliği, readyState değiştiğinde yürütülecek bir işlevi tanımlar .
status özelliği ve statusText özelliği, XMLHttpRequest nesnesinin durumunu tutar.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds 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" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
ReadyState her değiştiğinde onreadystatechange işlevi çağrılır.
ReadyState 4 ve status 200 olduğunda, yanıt hazırdır:
Örnek
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Yukarıdaki örnekte kullanılan "ajax_info.txt" dosyası basit bir metin dosyasıdır ve şöyle görünür:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
onreadystatechange olayı, readyState'deki her değişiklik için bir kez olmak üzere dört kez (1-4) tetiklenir.
Geri Arama İşlevi Kullanma
Geri arama işlevi, başka bir işleve parametre olarak geçirilen bir işlevdir.
Bir web sitesinde birden fazla AJAX göreviniz varsa, XMLHttpRequest nesnesini yürütmek için bir işlev ve her AJAX görevi için bir geri çağırma işlevi oluşturmalısınız.
İşlev çağrısı, URL'yi ve yanıt hazır olduğunda hangi işlevin çağrılacağını içermelidir.
Örnek
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Sunucu Yanıtı Özellikleri
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Sunucu Yanıt Yöntemleri
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
ResponseText Özelliği
ResponseText özelliği , sunucu yanıtını bir JavaScript dizesi olarak döndürür ve buna göre kullanabilirsiniz:
Örnek
document.getElementById("demo").innerHTML = xhttp.responseText;
tepkiXML Özelliği
XML HttpRequest nesnesinin yerleşik bir XML ayrıştırıcısı vardır.
ResponseXML özelliği, sunucu yanıtını bir XML DOM nesnesi olarak döndürür .
Bu özelliği kullanarak yanıtı bir XML DOM nesnesi olarak ayrıştırabilirsiniz:
Örnek
cd_catalog.xml dosyasını isteyin ve yanıtı ayrıştırın:
xmlDoc = xhttp.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;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
Bu öğreticinin DOM bölümlerinde XML DOM hakkında çok daha fazlasını öğreneceksiniz.
getAllResponseHeaders() Yöntemi
getAllResponseHeaders () yöntemi, sunucu yanıtından tüm başlık bilgilerini döndürür.
Örnek
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
getResponseHeader() Yöntemi
getResponseHeader() yöntemi , sunucu yanıtından belirli başlık bilgilerini döndürür.
Örnek
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();