AJAX - send() in AJAX

Let me explain the send() method in AJAX step by step with syntax, parameters, examples, and best practices.
It works together with open() to send a request to the server.

1. What is send() in AJAX?

The send() method is used to actually send the HTTP request to the server after calling open().

• Without send(), the request will not be sent.

• It works for GET, POST, and other HTTP methods.

• You can also pass data with send() when using POST or PUT requests.

2. Syntax

xhr.send(body);

Parameters

3. How send() Works in AJAX

1. Create XMLHttpRequest object

   var xhr = new XMLHttpRequest();
   

2. Initialize request using open()

   xhr.open("GET", "data.txt", true);
   

3. Send the request

   xhr.send();
   

4. Handle response

   xhr.onload = function() {
       console.log(xhr.responseText);
   };
   

4. Example 1 — Using send() with GET Request

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);  // Prepare request
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText); // Shows the file content
    }
};
xhr.send(); // Send the request

Explanation:

• No data is sent in GET.

• send() is called without parameters.

5. Example 2 — Using send() with POST Request

var xhr = new XMLHttpRequest();
xhr.open("POST", "server.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText); // Server response
    }
};
xhr.send("name=John&age=25"); // Sending form data to server

Explanation:

• Here, we pass data to send() in the form of key=value pairs.

• We also set a Content-Type header for proper encoding.

6. Example 3 — Sending JSON Data

var xhr = new XMLHttpRequest();
xhr.open("POST", "api.php", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function() {
    console.log(xhr.responseText);
};
var data = JSON.stringify({ name: "John", age: 25 });
xhr.send(data); // Sending JSON data

Explanation:

• Use JSON.stringify() to convert JavaScript objects into JSON.

• Set Content-Type to application/json.

7. Example 4 — Sending No Data (GET)

var xhr = new XMLHttpRequest();
xhr.open("GET", "users.json", true);
xhr.send(); // Empty request body

Explanation:

• For GET requests, send() is usually called empty.

8. Relationship Between open() and send()

Rule:

Always call send() after open().

9. Key Points to Remember

• send() is mandatory to send an AJAX request.

• For GET → Call send() with no data.

• For POST → Pass data inside send().

• Use setRequestHeader() only after open() but before send().

• Use JSON.stringify() when sending JSON.