XMLHttpRequest-objekti

XMLHttpRequest-objekti tarjoaa tapoja kommunikoida palvelimen kanssa sivun lataamisen jälkeen.

Mikä on XMLHttpRequest-objekti?

XMLHttpRequest-objekti onThe developer's dream, because you can:

  • Update the web page without reloading the page
  • Request data from the server after the page has loaded
  • Receive data from the server after the page has loaded
  • Send data to the server in the background

All modern browsers support the XMLHttpRequest object.

Example:Communicate with the server when typing text.

Create an XMLHttpRequest object

We can create an XMLHttpRequest object with a single line of JavaScript code.

In all modern browsers (including IE 7):

xmlhttp=new XMLHttpRequest()

In Internet Explorer 5 and 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Example

<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("Your browser does not support 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

Note:onreadystatechange on event handler. Its value (state_Change) is the name of a function that is triggered when the state of the XMLHttpRequest object changes. The state changes from 0 (uninitialized) to 4 (complete). We only execute the code when the state is 4.

为什么使用 Async=true ?

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

TIY

更多实例

通过 XML HTTP 把一个 textfile 载入一个 div 元素中

通过 XML HTTP 进行 HEAD 请求

通过 XML HTTP 进行指定的 HEAD 请求

通过 XML HTTP 列出 XML 文件中的数据

XML / ASP

您也可以把 XML 文档打开并发送到服务器上的 ASP 页面，分析此请求，然后传回结果。

<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("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP-sivu, joka on kirjoitettu VBScriptillä:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Palauta tulokset asiakkaalle response.write -ominaisuuden avulla.

TIY

Onko XMLHttpRequest objekti W3C:n standardi?

Mikään W3C:n suositeltu standardi ei määrittele XMLHttpRequest objektia.

W3C DOM Level 3:n "Load and Save" -standardi sisältää joitakin samankaltaisia toiminnallisuuksia, mutta niitä ei ole vielä toteutettu missään selaimessa.

Katso

XML DOM viittausopas: XMLHttpRequest objekti