AJAX - XMLHttpRequest
XMLHttpRequest nesnesi, bir sunucudan veri istemek için kullanılır.
Bir Sunucuya İstek Gönder
Bir sunucuya istek göndermek için XMLHttpRequestnesnenin 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) |
url - Sunucudaki Bir Dosya
Yöntemin url parametresi, open()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
async parametresinin varsayılan değeri async = true'dur.
Üçüncü parametreyi kodunuzdan güvenle kaldırabilirsiniz.
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.
GET veya POST?
GET'den daha basit ve hızlıdır POSTve ç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 GETistek:
Örnek
xhttp.open("GET", "demo_get.asp");
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());
xhttp.send();
Yöntem ile bilgi göndermek istiyorsanız GET, bilgileri URL'ye ekleyin:
Örnek
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Sunucunun girişi nasıl kullandığı ve sunucunun bir isteğe nasıl yanıt verdiği daha sonraki bir bölümde açıklanmaktadır.
POST İstekleri
Basit bir POSTistek:
Örnek
xhttp.open("POST", "demo_post.asp");
xhttp.send();
HTML formu gibi POST verileri için, setRequestHeader(). send()Yöntemde göndermek istediğiniz verileri belirtin :
Örnek
xhttp.open("POST", "ajax_test.asp");
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 |
Senkron İstek
Eşzamanlı bir istek yürütmek için open()yöntemdeki üçüncü parametreyi şu şekilde değiştirin false:
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, bir onreadystatechange
işleve 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.
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.