XMLHttpRequest : EventTarget

constructor

XMLHttpRequest is used to make an http request to a server. It can be used to download data by making a GET request (pass 'GET' as the method when calling open()) or to send data to the server by making a POST request (send 'POST' as the method when calling open()). See also fetch.

Spec

Constructors

new XMLHttpRequest() : XMLHttpRequest

Creates a new XMLHttpRequest object. Use open() to specify the url of the resource to request and send() to begin the request.

Example:

var request = new XMLHttpRequest();
request.open('GET', '/', /* async = */ false);
request.send();
console.log('response head: ' + request.responseText.substring(0, 15) + '...');

Run

Results:

Instance Properties

readyState : Number readonly

The current state of this. Will be one of UNSENT, OPENED, HEADERS_RECEIVED, LOADING, or DONE.

Example:

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
  console.log('readyStatechange:  ' + request.readyState);
};
console.log('Before open: ' + request.readyState);
request.open('GET', '/');
request.send();
console.log('After send: ' + request.readyState);

Run

Results:

response : Object readonly

Returns the response from the server in the type specified by responseType. Only valid after the load event fires.

Example:

var request = new XMLHttpRequest();
request.responseType = 'arraybuffer';
request.open('GET', '/');
request.onload = function() {
  console.log(request.response);
  console.log(request.response.byteLength);
};
request.send();

Run

Results:

responseText : String readonly

Returns the response from the server as a string. Only valid after the load event fires and if responseType is set to '' (the default) or 'text'.

Example:

var request = new XMLHttpRequest();
request.open('GET', '/', /* async = */ false);
request.send();
console.log(request.responseText.substring(0, 150));
console.log('...');

Run

Results:

responseType : String

Determines the type returned by response. Must be set to one of the following:

`responseType`	`response` returns
`''` (default)	Same as `'text'`
`'text'`	`String`
`'arraybuffer'`	`ArrayBuffer`
`'blob'`	`Blob`
`'document'`	`Document`
`'json'`	`Object`

Must be set before readyState reaches LOADING.

Example:

var request = new XMLHttpRequest();
request.responseType = 'arraybuffer';
request.open('GET', '/');
request.onload = function() {
  console.log(request.response);
  console.log(request.response.byteLength);
};
request.send();

Run

Results:

responseXML : Document readonly

status : Number readonly

The http status code for the request. See statusText for a description of the code.

Example:

var request = new XMLHttpRequest();
request.open('GET', '/', /* async = */ false);
request.send();
console.log('status code: ' + request.status);

request = new XMLHttpRequest();
request.open('GET', 'NonExistentPage/', /* async = */ false);
request.send();
console.log('status code: ' + request.status);

Run

Results:

statusText : String readonly

A description of the status return code.

Example:

var request = new XMLHttpRequest();
request.open('GET', '/', /* async = */ false);
request.send();
console.log('status: ' + request.statusText);

request = new XMLHttpRequest();
request.open('GET', 'NonExistentPage/', /* async = */ false);
request.send();
console.log('status: ' + request.statusText);

Run

Results:

timeout : Number

upload : XMLHttpRequestUpload readonly

Returns an XMLHttpRequestUpload object associated with this XMLHttpRequest that can be used to track the upload status of the send() call.

withCredentials : Boolean

Instance Methods

abort() : undefined

getAllResponseHeaders() : String

Returns a string containing all header value pairs from the response.

Example:

var request = new XMLHttpRequest();
request.open('GET', '/', /* async = */ false);
request.send();
console.log(request.getAllResponseHeaders());

Run

Results:

getResponseHeader(header : String) : String

Returns the value for the specified header. Returns null if the headers do not contain a value for header.

Example:

var request = new XMLHttpRequest();
request.open('GET', '/', /* async = */ false);
request.send();
console.log(request.getResponseHeader('content-type'));

Run

Results:

open(method : String, url : String, [async = true : Boolean, [user : String, [password : String]]]) : undefined

Specifies the url to read from and the http method ('GET', 'POST', 'PUT', 'DELETE', etc) to use when reading the url. If async is true, the request will be asynchronous and you should provide an onload callback to be called when the read completes. In general, it is best to use the asynchronous request so the browser remains responsive while the request is in progress. Call send() to begin the request.

Example:

var syncRequest = new XMLHttpRequest();
syncRequest.open('GET', '/', /* async = */ false);
syncRequest.send();

console.log('sync status code: ' + syncRequest.status);
console.log('sync response length: ' + syncRequest.responseText.length);
console.log('sync response head: ' + syncRequest.responseText.substring(0, 15) + '...');
console.log('');

var asyncRequest = new XMLHttpRequest();
asyncRequest.open('GET', '/', true);
asyncRequest.onload = function() {
  console.log('async status code: ' + asyncRequest.status);
  console.log('async response length: ' + asyncRequest.responseText.length);
  console.log('async response: ' + asyncRequest.responseText.substring(0, 15) + '...');
};
asyncRequest.send();

Run

Results:

overrideMimeType(mime : String) : undefined

send 6 variants

send() : undefined

send(data : ArrayBuffer) : undefined

Sends the specified data to the server.

send(data : Blob) : undefined

Sends the specified Blob to the server.

send(data : Document) : undefined

Sends the specified document to the server.

send(data : String) : undefined

Sends the specified string to the server.

send(data : FormData) : undefined

Sends the specified FormData to the server.

Example:

<form id='test-form'>
  Input1: <input name='input1'><br>
  Input2: <input name='input2'><br>
  <input type='submit'>
</form>
<script>
  var testForm = document.getElementById('test-form');
  testForm.onsubmit = function(event) {
    event.preventDefault();

    var request = new XMLHttpRequest();
    // POST to httpbin which returns the POST data as JSON
    request.open('POST', 'https://httpbin.org/post', /* async = */ false);

    var formData = new FormData(document.getElementById('test-form'));
    request.send(formData);

    console.log(request.response);
  }
</script>

Run

Results:

setRequestHeader(header : String, value : String) : undefined

Instance Events

onabort / 'abort' event

listener(event : ProgressEvent) : undefined

onerror / 'error' event

listener(event : ProgressEvent) : undefined

onload / 'load' event

listener(event : ProgressEvent) : undefined

onloadend / 'loadend' event

listener(event : ProgressEvent) : undefined

onloadstart / 'loadstart' event

listener(event : ProgressEvent) : undefined

onprogress / 'progress' event

listener(event : ProgressEvent) : undefined

onreadystatechange / 'readystatechange' event

listener(event : Event) : undefined

ontimeout / 'timeout' event

listener(event : ProgressEvent) : undefined

XMLHttpRequest Properties

DONE : Number readonly value = 4

HEADERS_RECEIVED : Number readonly value = 2

LOADING : Number readonly value = 3

OPENED : Number readonly value = 1

UNSENT : Number readonly value = 0

home license contribute feedback toggle light/dark mode