Όνυμα XMLHttpRequest

Το αντικείμενο XMLHttpRequest παρέχει μεθόδους επικοινωνίας με τον διακομιστή μετά την φόρτωση της σελίδας.

Τι είναι το αντικείμενο XMLHttpRequest;

Το αντικείμενο XMLHttpRequest είναιThe dream of developersbecause 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.

Creating 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();
  }
άλλως αν (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);
  }
άλλως
  {
  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...
    }
  άλλως
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

TIY

Comments:onreadystatechange is an 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;

Η παράδειγμα μας χρησιμοποιεί "true" ως τρίτο παράμετρο στον open().

Αυτός ο παράμετρος καθορίζει αν η αίτηση θα χειριστεί ασynchronously.

Το όνομα "true" σημαίνει ότι το σενάριο θα συνεχιστεί μετά το send() χωρίς να περιμένει απάντηση από τον διακομιστή.

Το συμβάν onreadystatechange διπλασιάζει τη σύνθετη του κώδικα. Ωστόσο, αυτό είναι η πιο ασφαλής μέθοδος για να αποτρέψετε τον κώδικα από το να σταματήσει χωρίς απάντηση από τον διακομιστή.

Αποστέλλοντας αυτόν τον παράμετρο ως "false", μπορείτε να παραλείψετε επιπλέον κώδικες onreadystatechange. Αν η εκτέλεση του υπόλοιπου κώδικα δεν είναι σημαντική όταν η αίτηση αποτύχει, μπορείτε να χρησιμοποιήσετε αυτήν την παράμετρο.

TIY

Περισσότερες παραδείξεις

Φόρτωση ενός αρχείου textfile σε ένα στοιχείο div μέσω XML HTTP

Εκτέλεση HEAD αίτησης μέσω XML HTTP

Εκτέλεση συγκεκριμένης HEAD αίτησης μέσω XML HTTP

Εμφάνιση δεδομένων του αρχείου XML μέσω XML HTTP

XML / ASP

Μπορείτε επίσης να ανοίξετε το XML έγγραφο και να το στείλετε στον ASP σελίδα του διακομιστή, να αναλύσετε την αίτηση και στη συνέχεια να επιστρέψετε τα αποτελέσματα.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  // κώδικας για Internet Explorer 7, Firefox, Opera, κ.λπ.
  xmlHttp=new XMLHttpRequest();
  }
άλλως αν (window.ActiveXObject)
  // κώδικας για Internet Explorer 6, Internet Explorer 5
  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);
  }
άλλως
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP 页面，由 VBScript 编写：

<%
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)
%>

通过使用 response.write 属性把结果传回客户端。

TIY

XMLHttpRequest 对象是 W3C 的标准吗？

任何 W3C 推荐标准均未规定 XMLHttpRequest 对象。

不过，W3C DOM Level 3 的 "Load and Save" 规范包含了一些相似的功能性，但是还没有任何浏览器实现它们。

参阅

XML DOM 参考手册: XMLHttpRequest 对象