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
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
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
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 Sending Request

After creating an XMLHttpRequest object (see previous chapter), we have to send a request to a server.

Send a Request To a Server

To send a request to a server, we use two methods of the XMLHttpRequest object:

  • open()
  • send()

The open() method accepts three parameters:

  • The first parameter is the HTTP request method – GET, POST
  • The second parameter is the URL you're sending the request to
  • The optional third parameter sets whether the request is asynchronous (Default is true)

The send() method accepts an optional parameter:

  • For GET requests don't pass any value
  • For POST requests pass name=value pairs

HTTP Request: GET vs. POST?

In GET method the browser will add the form contents (name/value pairs) to the end of the URL.

GET is generally used for simple forms where security is not a concern. GET offers a number of advantages for simple forms.

  • GET requests can be cached
  • GET requests remain in the browser history
  • GET requests can be bookmarked
  • GET requests should never be used when dealing with sensitive data
  • GET requests have length restrictions (only 2048 characters)

In POST method contents are not displayed in the URL.

You should always use POST if the form data contains sensitive or personal information.

  • POST requests are never cached
  • POST requests do not remain in the browser history
  • POST requests cannot be bookmarked
  • POST requests should be used when dealing with sensitive data
  • POST requests have no restrictions on data length

GET Requests

The following example shows how to make a simple Ajax GET request in JavaScript:

Run code

In the example above, you might get a cached result. To avoid this, add a random number to the URL:

Run code

If you want to send information with the GET method, add the information to the URL:

Run code

POST Requests

The following example shows how to make a simple Ajax POST request in JavaScript:

Run code

If you want to send information with the POST method, set an HTTP header with setRequestHeader() and specify the data you want to send in the send() method:

Run code

The setRequestHeader() method accepts two parameters:

  • The first parameter specifies the header name
  • The second parameter specifies the header value

The URL - A File on a Server

The second parameter (url) of the open() method, is an address to a file on a server.

AJAX can send and receive information in various formats, including JSON, XML, HTML, PHP, ASP, text etc.

The onreadystatechange Property

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

You will learn more about onreadystatechange property later in this tutorial.

Synchronous Request

The third parameter of the open() method specifies whether the request is asynchronous or synchronous.

To send a synchronous request, change the third parameter in the open() method to false.

If you used a synchronous request you don't need to specify a response function:

Run code

Using synchronous request is highly discouraged because:

  • JavaScript will stop executing until the server response is ready
  • If the server is busy or slow, the application will hang or stop
  • It makes an awful user experience