AJAX - XMLHttpRequest

Ang XMLHttpRequest object ay ginamit para sa pag-alinlangan ng datos sa server.

Magpadala ng request sa server

Kung gusto mong magpadala ng request sa server, gamit namin ang XMLHttpRequest object ng: open() at send() mga paraan:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
xhttp.send("fname=Bill&lname=Gates"); method
open(method, url, asyncsetRequestHeader(

tumutukoy sa uri ng request

  • method：uri ng request: GET o POST
  • url：posisyon ng server (file)
  • async：true（asynkrone）o false（sinyokrone）
send() Magpadala ng request sa server (ginamit sa GET)
send(stringsetRequestHeader( Magpadala ng request sa server (ginamit sa POST)

GET o POST?

Ang GET ay mas madaling gamitin at mas mabilis kaysa POST, maaring gamitin sa karamihan ng sitwasyon.

Gayunman, mangyaring gamitin ang POST sa mga sumusunod na sitwasyon:

  • Ang pinagkukunan ng file ay hindi opsyon (pag-update ng file o database sa server)
  • Magpadala ng malaking dami ng datos sa server (walang limitasyon ang laki ng POST)
  • Magpadala ng input ng user (maaring kasama ang hindi kilalang character), POST ay mas malakas at mas ligtas kaysa GET

GET request

Isang simple na GET request:

Example

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

Try It Yourself

Sa mga halimbawa sa itaas, maaring makakakuha ka ng isang pinagkukunan na resulta. Upang maiwasan ito, magdagdag ng isang natatanging ID sa URL:

Example

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

Try It Yourself

Kung kailangan mong magpadala ng mensahe gamit ang GET method, magdagdag ng mga mensahe sa URL:

Example

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

Try It Yourself

POST request

Isang simple na POST request:

Example

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

Try It Yourself

Kung gusto mong magpadala ng datos sa pamamagitan ng POST tulad ng HTML form, gamitin ang: setRequestHeader() Magdagdag ng isang HTTP header. Mangyaring i-set ang: send() Mga nakatakdang datos na kailangan mong ipagpadala sa method:

Example


xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Try It Yourself

xhttp.send("fname=Bill&lname=Gates"); method
description), :setRequestHeader(

,

  • )Magdagdag ng HTTP header sa kahiling
  • ::

url - Ang file sa server

ng method na open() url Ang parameter, ay ang address ng file sa server:

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

Ang file na ito ay maaaring anumang uri ng file, tulad ng .txt at .xml, o server script file, tulad ng .asp at .php (maaaring magsagawa ng operasyon sa server bago ito magpadala ng sagot).

Ano ang asynchronous - true o false?

Kung gusto mong magpadala ng kahiling na asynchronous,open() method async Ang mga parameter ay dapat itala: true:

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

Ang pagpadala ng kahiling na asynchronous ay isang malaking pag-unlad para sa mga web developer. Maraming gawain na ginagawa ng server ay napapansin. Bago ang AJAX, ang ganoong operasyon ay maaring magdulot ng paghinto o paghinto ng application.

Sa pamamagitan ng pagpapadala ng asynchronous, hindi kailangan maghintay ang JavaScript sa sagot ng server, kundi maaari:

  • Ipagawa ang ibang script habang naghihintay ang sagot ng server
  • Ipagawa ang response kapag handa na ang response

onreadystatechange attribute

Sa pamamagitan ng XMLHttpRequest object, madaling maisagawa ng iyong function kapag natanggap na ang kahiling.

Ang function na ito ay nasa XMLHttpResponse object. onreadystatechange Na tinukoy sa mga:

Example

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

Try It Yourself

Makikita mo sa mga susunod na kabanata ang mas maraming kaalaman tungkol sa onreadystatechange.

Pagkakaisa na kahiling

Kung gusto mong magsagawa ng pagkakaisa na kahiling, mangyaring ilagay open() The third parameter in the method is set to false:

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

Sometimes async = false is used for quick testing. You will also see synchronous requests in older JavaScript code.

Since the code will wait for the server to complete, there is no need for the onreadystatechange function:

Example

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

Try It Yourself

We do not recommend synchronous XMLHttpRequest (async = false) because JavaScript will stop executing until the server response is ready. If the server is busy or slow, the application may hang or stop.

Synchronous XMLHttpRequest is being removed from Web standards, but this process may take many years.

Modern development tools are encouraged to issue warnings for synchronous requests, and an InvalidAccessError exception may be thrown when this situation occurs.