Javascript - Ajax Cross Domain

javascript-dom

AJAX / XHR / Cross Domain:
http://www.sitepoint.com/guide-vanilla-ajax-without-jquery
http://www.sitepoint.com/an-in-depth-look-at-cors/
http://css-tricks.com/thinking-async/
http://docs.kendoui.com/howto/use-cors-with-all-modern-browsers
Easier Cross-Origin AJAX with CORS
http://easyxdm.net/wp/
XHR2
http://coding.smashingmagazine.com/2010/02/10/some-things-you-should-know-about-ajax/
How to combat cross-domain POST problems when using AJAX
Problems and Mistakes When Developing With AJAX
AJAX Annoyances to Avoid
Secure Cross-Domain Communication in the browser
Cross-domain Ajax with Cross-Origin Resource Sharing
AJAX Tools
24 Best Practices for AJAX Implementations
Hijax
http://www.sitepoint.com/working-around-origin-policy/

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
} else {
  throw new Error("Ajax is not supported by this browser.");
}
Methods Description
abort() Causes the currently executing requests to be cancelled.
getAllResponseHeaders() Returns a single string containing the names and values of all response headers
getResponseHeader(name) Return the value of the named response header
open(method, url, async, username, password) Sets the method and destination URL of the request. Optionally, the request can be declared asynchronous, and a username and password can be supplied for requests requiring container-based authentication
send(content) Initiates the request with the specified (optional) body content.
setRequestHeader(name,value) Sets a request header using the specified name and value.
Properties Description
onreadystatechange Assigns the event handler used when the state of the request changes
readyState An integer value that indicates the state of the request as follows: (0: unitiated, 1: loading, 2: loaded, 3: interactive, 4: complete)
responseText The body content returned in the response
responseXML If the body content is XML, the XML DOM created from the body content.
status cell-content
cell-content Response status code returned from the server. For example, 200 for success or 404 for not found.
statusText The status text message returned by the response.

How can we make an Ajax request?

function makeAjaxCall(options) {
  var httpMethod = options.httpMethod || 'GET';
  var url = options.url;
  var async = options.async || true;
  var successCallback = options.success || function(){};
  var failureCallback = options.failure || function(){};
  var requestBody = options.body || null;
  var xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } else {
    throw new Error("Ajax is not supported by this browser.");
  }
  xhr.open(httpMethod, url, async);  // This does not actually send the request.
  // We can set additional flags util we invoke xhr.send.

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if ((xhr.status >=200) && (xhr.status < 300)) {
        // success
        success();
      } else {
        failure();
      }
    }
  }
  xhr.send(requestBody);
}

An XHR instance informs us of its progress through the ready state handler. This handler is established by assigning a reference to the function to serve as the ready handler to the onreadystatechange property of the XHR instance. Once the request is initiated via the send() method, this callback will be invoked numerous times as the request makes transitions through its various states. The current state of the request is available as a numeric call in the readyState property.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License