AJAX - Sunucuya İstek Gönder
XMLHttpRequest nesnesi, bir sunucuyla veri alışverişi yapmak için kullanılır.
Bir Sunucuya İstek Gönder
Bir sunucuya istek göndermek için XMLHttpRequest nesnesinin open() ve send() yöntemlerini kullanırız:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
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.
GET İstekleri
Basit bir GET isteği:
Örnek
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Yukarıdaki örnekte, önbelleğe alınmış bir sonuç alabilirsiniz. Bunu önlemek için URL'ye benzersiz bir kimlik ekleyin:
Örnek
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
GET yöntemiyle bilgi göndermek istiyorsanız, bilgileri URL'ye ekleyin:
Örnek
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POST İstekleri
Basit bir POST isteği:
Örnek
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
HTML formu gibi verileri POST yapmak için setRequestHeader() ile bir HTTP başlığı ekleyin. Send() yönteminde göndermek istediğiniz verileri belirtin:
Örnek
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
url - Sunucudaki Bir Dosya
open() yönteminin url parametresi, sunucudaki bir dosyanın adresidir:
xhttp.open("GET", "ajax_test.asp", 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ı?
Sunucu istekleri eşzamansız olarak gönderilmelidir.
open() yönteminin zaman uyumsuz parametresi true olarak ayarlanmalıdır:
xhttp.open("GET", "ajax_test.asp", true);
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 olduktan sonra yanıtla ilgilenin
onreadystatechange Özelliği
XMLHttpRequest nesnesiyle, istek bir yanıt aldığında yürütülecek bir işlev tanımlayabilirsiniz.
İşlev, XMLHttpResponse nesnesinin onreadystatechange özelliğinde tanımlanır :
Örnek
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>
Daha sonraki bir bölümde onreadystatechange hakkında daha fazla bilgi edineceksiniz.
Senkron İstek
Eşzamanlı bir istek yürütmek için open() yöntemindeki üçüncü parametreyi false olarak değiştirin:
xhttp.open("GET", "ajax_info.txt", false);
Bazen hızlı test için async = false kullanılır. Ayrıca eski JavaScript kodunda senkronize istekleri de bulacaksınız.
Kod sunucunun tamamlanmasını bekleyeceğinden, onreadystatechange işlevine gerek yoktur:
Örnek
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Eşzamanlı XMLHttpRequest (async = false) önerilmez çünkü JavaScript, sunucu yanıtı hazır olana kadar çalışmayı durduracaktır. Sunucu meşgul veya yavaşsa, uygulama askıda kalacak veya duracaktır.
Senkronize XMLHttpRequest, web standardından kaldırılma sürecindedir, ancak bu işlem uzun yıllar alabilir.
Modern geliştirici araçlarının, eşzamanlı istekleri kullanma konusunda uyarmaları önerilir ve bu gerçekleştiğinde bir InvalidAccessError istisnası oluşturabilir.