Revision 627571 of XDomainRequest

<p>{{non-standard_header}}</p>
<h2 id="Summary">Summary</h2>
<p>XDomainRequest is an implementation of&nbsp;<a href="/en-US/docs/HTTP/Access_control_CORS">HTTP access control (CORS) </a>that worked in Internet Explorer 8 and 9. It was removed in Internet Explorer 10 in favor of using&nbsp;<a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest </a>with proper CORS.</p>
<p>This interface can send both GET and POST requests.</p>
<h2 id="Syntax">Syntax</h2>
<pre>
var xdr = new XDomainRequest();</pre>
<p>Returns a new <code>XDomainRequest</code> object, which can then be used to make and manage these requests.</p>
<h2 id="Properties">Properties</h2>
<dl>
 <dt>
  {{domxref("XDomainRequest.timeout")}}</dt>
 <dd>
  Gets or sets the amount of time until a request times out.</dd>
 <dt>
  {{domxref("XDomainRequest.responseText")}}</dt>
 <dd>
  Gets the response body as a string.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<dl>
 <dt>
  {{domxref("XDomainRequest.open")}}</dt>
 <dd>
  Opens the request, specifing the method (GET/POST) and URL.</dd>
 <dt>
  {{domxref("XDomainRequest.send")}}</dt>
 <dd>
  Sends the request. POST data is specified in this method.</dd>
 <dt>
  {{domxref("XDomainRequest.abort")}}</dt>
 <dd>
  Aborts the request.</dd>
</dl>
<h2 id="Event_Handlers">Event handlers</h2>
<dl>
 <dt>
  {{domxref("XDomainRequest.onprogress")}}</dt>
 <dd>
  A handler for when the request has made progress between the send method call and the onload event.</dd>
 <dt>
  {{domxref("XDomainRequest.ontimeout")}}</dt>
 <dd>
  A handler for when the request times out.</dd>
 <dt>
  {{domxref("XDomainRequest.onerror")}}</dt>
 <dd>
  A handler for when a request has errored.</dd>
 <dt>
  {{domxref("XDomainRequest.onload")}}</dt>
 <dd>
  A handler for when the full response has been received from the server.</dd>
</dl>
<h2 id="Example">Example</h2>
<pre class="brush: js">
if(window.XDomainRequest){
  var xdr = new XDomainRequest();

  xdr.open("get", "https://example.com/api/method");

  xdr.onprogress = function () {
    //Progress
  };

  xdr.ontimeout = function () { 
    //Timeout
  };

  xdr.onerror = function () { 
    //Error Occured
  };

  xdr.onload = function() {
    //success(xdr.responseText);
  }

  setTimeout(function () {
    xdr.send();
  }, 0);
}</pre>
<div>
 &nbsp;</div>
<div class="note">
 <p><strong>Note:</strong> The <code>xdr.send()</code> call is wrapped in a timeout (see {{domxref("window.setTimeout()")}} to prevent an issue with the interface where some requests are lost if multiple <code>XDomainRequest</code>s are being sent at the same time.</p>
</div>
<h2 id="Security">Security</h2>
<p>The XDomainRequest is built to be secure in multiple ways.</p>
<ul>
 <li>The origin's security protocol must match that of the requested URL. (http to http, https to https). If these do not match, the request will error "Access is Denied".</li>
 <li>The requested URL's server must have the <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> header set to either all ("*") or to include the origin of the request.</li>
</ul>
<h2 id="Specification">Specification</h2>
<p>This interface and its methods are non-standard.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>XDomainRequest</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>8.0-9.x</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>XDomainRequest</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<section id="Quick_Links">
 <ol>
  <li><a href="#"><strong>Properties</strong></a>
   <ol>
    <li>{{domxref("XDomainRequest.timeout")}}</li>
    <li>{{domxref("XDomainRequest.responseText")}}</li>
   </ol>
  </li>
  <li><a href="#"><strong>Methods</strong></a>
   <ol>
    <li>{{domxref("XDomainRequest.open()")}}</li>
    <li>{{domxref("XDomainRequest.send()")}}</li>
    <li>{{domxref("XDomainRequest.abort()")}}</li>
   </ol>
  </li>
  <li><a href="#">Event handlers</a>
   <ol>
    <li>{{domxref("XDomainRequest.onprogress")}}</li>
    <li>{{domxref("XDomainRequest.ontimeout")}}</li>
    <li>{{domxref("XDomainRequest.onerror")}}</li>
    <li>{{domxref("XDomainRequest.onload")}}</li>
   </ol>
  </li>
 </ol>
</section>