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 Handling Server Response

The XMLHttpRequest object lets you define a function to be executed to handle the response.

The response function is defined in the onreadystatechange property of the XMLHttpRequest object.

Run code

The onreadystatechange property defines a function to be executed when the readyState changes.

The readyState property holds the status of the XMLHttpRequest object.

The status property holds the status code of the XMLHttpRequest object.

The statusText property holds the status text 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
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")


Server Response Properties

The following table list the server response properties:

Property Description
responseText Returns the response data as a string
responseXML Returns the response data as XML data

The responseText Property

The responseText property returns the server response as a JavaScript string.

Run code

The responseXML Property

The responseXML property returns the server response as an XMLDocument object.

You can traverse the XMLDocument object with JavaScript DOM functions.

The following example requests the file ajax_test.xml and parse the response:

Run code

Server Response Methods

The following table list the server response methods:

Method Description
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information

The getAllResponseHeaders() Method

The getAllResponseHeaders() method returns all header information from the server response.

Run code

The getResponseHeader() Method

The getResponseHeader() method returns specific header information from the server response.

Run code

Multiple AJAX Calls

If you have more than one AJAX task in a website, you should create two functions:

  • One function for executing the XMLHttpRequest object
  • One callback function for each AJAX task

The function call should contain the URL and what function to call when the response is ready.

Run code

A callback function is a function passed as a parameter to another function.