JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

AJAX - The XMLHttpRequest Object

The XMLHttpRequest object is used to exchange data with a server.


The XMLHttpRequest Object

All modern browsers (Chrome, Firefox, IE7+, Edge, Safari, Opera) have a built-in XMLHttpRequest object.

XMLHttpRequest allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.

You can retrieve data from a URL without having to do a full page refresh.

This enables a Web page to update just part of a page without disrupting what the user is doing.


Create an XMLHttpRequest Object

Before you perform AJAX communication between client and server, the first thing you must do is to instantiate an XMLHttpRequest object, as shown below:

Syntax:
var request = new XMLHttpRequest();
Run code

Cross-site XMLHttpRequest

For security reasons, modern browsers do not allow access across domains.

This means that both the web page and the requested file it tries to load, must be located on the same server.

The examples on Parrot-tutorial all open requested files located on the Parrot-tutorial domain.

If you want to use the example above on one of your own web pages, the requested files must be located on your own server.



Older Browsers (For IE 6 and older)

Old versions of Internet Explorer (6 and older) use an ActiveX object instead of the XMLHttpRequest object.

Syntax:
var request = new ActiveXObject("Microsoft.XMLHTTP");

To handle IE6 and older, check if the browser supports the XMLHttpRequest object, or else create an ActiveX object:

Run code

XMLHttpRequest Object Properties

The following table list all properties of the XMLHttpRequest Object:

Property Description
onreadystatechange Defines a function to be called when the readyState property changes
readyState Holds the status of the XMLHttpRequest:

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number of a request:

200: "OK"
403: "Forbidden"
404: "Not Found"

For a complete list go to the HTTP Status Codes Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

XMLHttpRequest Object Methods

The following table list all methods of the XMLHttpRequest Object:

Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method, url, async) Specifies the request

method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server
Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader(header, value) Sets HTTP headers to the request

header: specifies the header name
value: specifies the header value