AJAX - XMLHttpRequest

XMLHttpRequest nesnesi, sunucu ile veri alışverişinde kullanılır.

Sunucuya istek gönderin

Sunucuya istek göndermek için, XMLHttpRequest nesnesinin open() ve send() Yöntem：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Yöntem Açıklama
open(method, url, async)

İstek türünü belirler

  • method：İstek türü: GET mi yoksa POST mu
  • url：Sunucu (dosya) konumu
  • async：true（asenkron）veya false（senkron）
send() Sunucuya istek gönderin (GET için kullanılır)
send(string) Sunucuya istek gönderin (POST için kullanılır)

GET mi POST mu？

GET, POST'e göre daha basit ve hızlıdır, çoğu durumda kullanılabilir.

Ancak, aşağıdaki durumlarda her zaman POST kullanın：

  • Önbellek dosyası seçenek değildir (sunucudaki dosya veya veritabanını güncelleme)
  • Sunucuya büyük miktarda veri gönderin (POST, boyut sınırlaması yok)
  • Kullanıcı girdisini gönderirken (bilinmeyen karakterler içerebilir), POST GET'e göre daha güçlü ve güvenlidir

GET istemi

Basit bir GET istemi：

Örnek

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Kendi Kendine Deneyin

Yukarıdaki örnekte, bir önbellek sonucu elde edebilirsiniz. Bu durumu önlemek için, URL'ye benzersiz bir ID ekleyin：

Örnek

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Kendi Kendine Deneyin

GET yöntemi ile bilgi göndermek istiyorsanız, bu bilgileri URL'ye ekleyin：

Örnek

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Kendi Kendine Deneyin

POST istemi

Basit bir POST istemi：

Örnek

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Kendi Kendine Deneyin

HTML formu gibi POST verileri göndermek istiyorsanız, aşağıdaki şekilde setRequestHeader() Bir HTTP başlığı ekleyin. Aşağıda belirtilen send() 方法中 belirtilen verileri göndermeniz gerekiyor：

Örnek

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Kendi Kendine Deneyin

Yöntem Açıklama
setRequestHeader(header, value)

İsteklere HTTP başlığı ekler

  • header：Başlık adını belirler
  • value：Başlık değerini belirler

url - Sunucudaki dosya

open() yönteminin url parametre, sunucudaki dosyanın adresidir:

xhttp.open("GET", "ajax_test.asp", true);

Bu dosya herhangi bir tür olabilir, .txt ve .xml gibi veya sunucu betik dosyaları, .asp ve .php (onlar sunucuda cevap göndermeden önce işlem görebilirler).

Asenkron - true veya false?

Eşzamanlı olarak göndermek içinopen() tarzı async parametreler true:

xhttp.open("GET", "ajax_test.asp", true);

Asenkron olarak gönderme, web geliştiriciler için büyük bir ilerlemedir. Sunucuda被执行的许多任务都非常耗时。AJAX öncesi, bu işlem uygulamayı askıya alabilir veya durdurabilir.

Asenkron olarak gönderilmesiyle, JavaScript sunucu cevabını beklemek zorunda kalmaz, aksine:

  • Sunucu cevabı beklerken diğer betikleri çalıştırır
  • Cevap hazır olduğunda işlem yapar

onreadystatechange özelliği

XMLHttpRequest nesnesi aracılığıyla, istek alındığında hangi fonksiyonun çalışacağını tanımlayabilirsiniz.

Bu fonksiyon, XMLHttpResponse nesnesinin onreadystatechange Özellikte tanımlanan:

Ö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();

Kendi Kendine Deneyin

onreadystatechange hakkında daha fazla bilgiyi sonraki bölümlerde öğreneceksiniz.

Eşzamanlı İstek

Eşzamanlı istekleri gerçekleştirmek için lütfen open() Metodun üçüncü parametresi olarak ayarlanır false:

xhttp.open("GET", "ajax_info.txt", false);

Bazen async = false hızlı testler için kullanılır. Eşzamanlı istekleri daha eski JavaScript kodlarında da görebilirsiniz.

Kodun sunucunun tamamlanmasını beklediği için onreadystatechange fonksiyonu gerekmez:

Örnek

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Kendi Kendine Deneyin

Eşzamanlı XMLHttpRequest (async = false) önerilmez, çünkü JavaScript sunucu yanıtını beklemeden çalışmayı durdurur. Sunucu yoğun veya yavaşsa, uygulama askıya alınabilir veya durabilir.

Eşzamanlı XMLHttpRequest Web Standartları'ndan kaldırılmakta, ancak bu süreç yıllar sürebilir.

Eşzamanlı istek kullanımı uyarılır ve bu durumda InvalidAccessError hatası fırlatabilir.