Latest web development tutorials

AJAX - wysłanie żądania do serwera

Obiekt XMLHttpRequest do wymiany danych z serwerem.

Wysyła żądanie do serwera

Aby wysłać żądanie do serwera, używamy otworzyć obiekt XMLHttpRequest jest () i send () Metoda:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

sposób opis
open(metoda, url, asynchroniczny)

Rodzaj wniosku, określa adres URL i czy asynchroniczne przetwarzanie żądań.

  • Metoda:typ zgłoszenia; GET lub POST
  • url:lokalizacja pliku na serwerze
  • asynchroniczny: true (asynchroniczny)lub fałsz (synchroniczne)
send(string)

Wysyła żądanie do serwera.

  • Łańcuch:tylko dla żądań POST

GET lub POST?

W porównaniu z POST, GET łatwiej i szybciej, a w większości przypadków mogą być użyte.

Jednak w następujących przypadkach, należy użyć żądania POST:

  • Nie można korzystać z plików pamięci podręcznej (pliki lub zaktualizować bazę danych na serwerze)
  • Wysyłanie dużych ilości danych (poczta nie ogranicza ilość danych) do serwera
  • Po wysłaniu danych wprowadzanych przez użytkownika zawiera nieznane postacie, POST jest bardziej stabilny i bardziej niezawodny niż GET

żądania GET

Proste żądanie GET:

Przykłady

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

Spróbuj »

W powyższym przykładzie, można uzyskać buforowane wyniki.

Aby tego uniknąć, należy dodać unikatowy identyfikator do adresu URL:

Przykłady

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

Spróbuj »

Jeśli chcesz wysłać informacje za pomocą metody GET, dodaj informację do adresu URL:

Przykłady

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

Spróbuj »

żądanie POST

Prosty żądanie POST:

Przykłady

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

Spróbuj »

Jeśli trzeba, że ​​dane jako HTML Formularz POST, należy setRequestHeader (), aby dodać nagłówki HTTP. Następnie określ, że chcesz wysłać dane w send () metodę:

Przykłady

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

Spróbuj »

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

URL - pliki na serwerze

urlargumentem open () metoda jest adres serwera plików:

xmlhttp.open("GET","ajax_test.html",true);

Plik może być dowolnego typu pliku, na przykład .txt i .xml lub skryptów serwerowych, takich jak .asp i .php (przed powrotem odpowiedź, do wykonywania zadań na serwerze).

Asynchroniczne - Prawda czy fałsz?

AJAX oznacza Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).

Jeśli chcesz korzystać z obiektu XMLHttpRequest AJAX, a następnie parametr asynchroniczny, którego open () metoda ta musi być ustawiona na wartość true:

xmlhttp.open("GET","ajax_test.html",true);

Dla programistów, wysyłać żądanie asynchroniczne jest ogromnym krokiem naprzód. Na serwerze do wykonania wiele zadań są bardzo czasochłonne. Przed AJAX wystąpić, co może spowodować, że aplikacja do zawieszenia lub zatrzymania.

Dzięki AJAX, JavaScript, nie czekając na odpowiedź serwera, ale:

  • Inne skrypty wykonać podczas oczekiwania na odpowiedź serwera
  • Gdy reakcja jest gotowy do odpowiedzi na przetwarzanie

Async = true

Podczas korzystania asynchronicznie = true, proszę przepisy w odpowiedzi na wydarzenia w onreadystatechange gotowość do wykonywania funkcji:

Przykłady

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

Spróbuj »

Dowiesz się więcej o zawartości onreadystatechange w późniejszym rozdziale.

Asynchroniczny = false

Aby korzystać z async = false ustawić otwartą metodę () w trzeciej parametru na false: 

xmlhttp.open("GET","test1.txt",false);

Nie zaleca się używanie asynchronicznych = false, ale z jakiegoś małego wniosek, jest również możliwe.

Pamiętaj, JavaScript będzie czekać, aż odpowiedź serwera jest gotowy, aby kontynuować. Jeśli serwer jest zajęty lub wolny, lub zatrzymać zawieszeń.

Uwaga: W przypadku korzystania z asynchronicznie = false, proszę nie pisać onreadystatechange funkcji - umieścić kod do send () z powrotem do stwierdzenia:

Przykłady

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

Spróbuj »