En son web geliştirme öğreticiler
 

AJAX - Bir sunucuya bir istek gönderin


XMLHttpRequest nesnesi bir sunucu ile veri alışverişi için kullanılır.


Bir sunucuya bir istek gönderin

Bir sunucuya bir istek göndermek için, kullandığımız open() ve send() XMLHttpRequest nesnesinin yöntemleri:

xhttp. open("GET", "ajax_info.txt" , true) ;
xhttp. send() ;
Yöntem Açıklama
open( method, url, async ) İsteğe türünü belirtir

method : istek tipi: GET veya POST
url : Sunucu (file) konum
async : true (asynchronous) veya false (synchronous)
send() Sunucuya istek gönderir (used for GET )
send( string ) Sunucuya istek gönderir (used for POST )

GET veya POST ?

GET basit ve hızlıdır POST , ve çoğu durumda kullanılabilir.

Ancak, her zaman kullanmak POST zaman istekleri:

  • Bir önbelleğe dosya bir seçenek değildir (update a file or database on the server) .
  • Sunucusuna veri büyük miktarda gönderme ( POST bir boyut sınırlamaları vardır).
  • Kullanıcı girişini gönderme (which can contain unknown characters) , POST daha sağlam ve güvenli olduğunu GET .

GET İstekleri

Basit GET isteği:

Örnek

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

Yukarıdaki örnekte, önbelleğe alınmış bir sonuç alabilirsiniz. Bunu önlemek için, benzersiz eklemek ID to the URL: ID to the URL:

Örnek

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

Birlikte bilgi göndermek istiyorsanız GET yöntemi URL'ye bilgileri ekleyin:

Örnek

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Kendin dene "

POST İstekler

Basit bir POST isteği:

Örnek

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

Için POST , bir HTML form gibi verileri, bir ekleme HTTP header ile setRequestHeader() . Eğer göndermek istediğiniz verileri belirtin send() yöntemi:

Örnek

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

Yöntem Açıklama
setRequestHeader( header, value ) İsteğe HTTP başlıklarını ekler

header : Başlık adını belirtir
value : başlık değerini belirtir

url - Server 'da Bir Dosya

url parametresi open() yöntemiyle, bir sunucuda bir dosyaya bir adres:

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

dosya .asp ve (geri yanıt göndermeden sunucuda eylemleri gerçekleştirebilirsiniz) php gibi .txt ve .xml veya sunucu komut dosyası dosyaları gibi her türlü dosya olabilir.


Asenkron - True ya False ?

AJAX Asynchronous JavaScript ve XML için duruyor ve XMLHttpRequest nesnesi AJAX gibi davranmaya için async bir parametresi open() yöntemine true ayarlanmış olması gerekir:

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

asenkron istekleri gönderme web geliştiricileri için büyük bir gelişme olduğunu. sunucuda gerçekleştirilen görevlerin çoğu edilmesi çok zaman alır. AJAX önce bu operasyon asmak veya uygulamayı durmaya neden olabilir.

AJAX ile JavaScript sunucusu yanıtı için beklemek zorunda değildir, ancak bunun yerine can vermez:

  • Sunucu yanıt beklenirken diğer komut yürütmek
  • tepki ile başa zaman tepki hazır

Async=true

Zaman uyumsuz = true class = "notranslate" kullanırken, tepki onreadystatechange olay hazır olduğunda yürütmek için bir işlev belirtin:

Örnek

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Kendin dene "

Bir sonraki bölümde onreadystatechange hakkında daha fazla bilgi edineceksiniz.


Async=false

Kullanmak için async=false , üçüncü parametre değiştirmek open() false yöntem:

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

Kullanımı async=false tavsiye edilmez, ancak birkaç küçük istekleri için bu Tamam olabilir.

sunucu yanıtı hazır olana kadar JavaScript, yürütmeye devam DEĞİL unutmayın. Sunucu meşgul veya yavaşsa, uygulama askıda veya duracaktır.

Note: Eğer kullandığınız zaman async=false , bir onreadystatechange fonksiyon yazmak değil - hemen sonra kod koymak send() deyimi:

Örnek

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