Objeto ng XMLHttpRequest

Ang XMLHttpRequest object ay nagbibigay ng mga paraan para makipagkonsensiya sa server pagkatapos mapaladlad ang pahina.

Ano ang XMLHttpRequest?

Ang XMLHttpRequest ay isangPangarap ng Developer, dahil kay makakaya ka ng:

  • I-update ang pahina ng walang pag-reload ng pahina
  • Hilingin ang data mula sa server pagkatapos na load ang pahina
  • Tumanggap ng data mula sa server pagkatapos na load ang pahina
  • Magpadala ng data sa server sa likod

Lahat ng modernong browser ay sumusuporta sa XMLHttpRequest object.

Sample:Magkakommunikasyon sa server kapag nagsusulat ng teksto.

Makapag-gawa ng XMLHttpRequest object

Sa pamamagitan ng isang simple na JavaScript code, maaring gumawa tayo ng XMLHttpRequest object.

Sa lahat ng modernong browser (kasama ang IE 7):

xmlhttp=new XMLHttpRequest()

Sa Internet Explorer 5 at 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Sample

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Ang iyong browser ay hindi sumusuporta sa XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

TIY

Komentaryo:onreadystatechange ay isang event handler. Ang halaga nito (state_Change) ay ang pangalan ng isang function, na kapag nagbago ang estado ng XMLHttpRequest object, ito ay magpapasadya ng function. Ang estado ay mula 0 (uninitialized) hanggang 4 (complete) na nagbabago. Tanging kapag ang estado ay 4, kami ay aalisin ang code.

Bakit gamitin ang Async=true?

Ang aming halimbawa ay gumagamit ng "true" sa ikatlong parameter ng open().

Ang parameter na ito ay nangangahulugan kung ang kahilingan ay magiging asynchronous o hindi.

True ay nangangahulugan na ang script ay magpatuloy sa pagpapatuloy pagkatapos ng send() method, walang paghihintay ng tugon mula sa server.

Ang onreadystatechange event ay nagiging mas kumplikado ang code. Ngunit ito ang pinakamalaking paraan upang maiwasan na ang code ay huminto kahit walang tugon mula sa server.

Sa pamamagitan ng pagtatakda ng parameter na "false", maaari mong iwasan ang karagdagang onreadystatechange code. Kung ang ibang code ay hindi mahalaga kapag may pagkabigo ang kahilingan, maaari mong gamitin ang parameter na ito.

TIY

Higit pang mga halimbawa

I载 ng XML HTTP ang isang textfile sa isang div element

Gumawa ng HEAD kahilingan gamit ang XML HTTP

Gumawa ng natukoy na HEAD kahilingan gamit ang XML HTTP

Ilista ng XML HTTP ang mga datos sa XML file

XML / ASP

Maaari ka ring buksan ang XML dokumento at ipapadala sa ASP pahina sa server, analisa ang kahilingan, at ibalik ang resulta.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Ang iyong browser ay hindi sumusuporta sa XMLHTTP.");
  }
</script>
</body>
</html>

Pahina ng ASP, na isinulat ng VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
para sa bawat x sa xmldoc.documentElement.childNodes
   kung x.NodeName = "to" ato name=x.text
next
response.write(name)
%>

Ihatid ang resulta pabalik sa client sa pamamagitan ng paggamit ng attribute ng response.write.

TIY

Ang XMLHttpRequest objekto ay standard ng W3C ba?

Wala sa anumang W3C na rekomendadong pamantayan ang nagsasabing XMLHttpRequest objekto.

Gayunpaman, ang "Load and Save" na rehimen ng W3C DOM Level 3 ay naglalaman ng ilang katulad na功能性, ngunit wala pang browser ang nagtataglay ng mga ito.

Tingnan

XML DOM Tagapagpasalita ng Rehimen: XMLHttpRequest objekto