🔧 AJAX – Methods: open(), send(), setRequestHeader() Explained with Examples

---

🧲 Introduction – Why Learn open(), send(), and setRequestHeader() in AJAX?

At the heart of AJAX communication lies the XMLHttpRequest object, which provides core methods like open(), send(), and setRequestHeader(). These methods allow developers to:

• Set up a connection to the server
• Send data asynchronously
• Configure headers (like content type or tokens)

Understanding these methods is essential for handling GET, POST, and other HTTP requests effectively in modern web development.

🎯 In this article, you’ll learn:

• What each method does
• Syntax and usage for GET and POST requests
• Practical examples with step-by-step breakdowns
• Common pitfalls and best practices

---

⚙️ What Is open() in AJAX?

The open() method configures the type of HTTP request and the destination URL.

🔧 Syntax:

xhr.open(method, url, async);

• method: "GET", "POST", "PUT", etc.
• url: Server endpoint
• async (optional): true for asynchronous (default), false for synchronous (not recommended)

✅ Example:

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

This line prepares an asynchronous GET request to data.json.

---

🚀 What Is send() in AJAX?

Once the request is configured with open(), the send() method initiates the request to the server.

🔧 Syntax:

xhr.send(data);

• For GET requests, data is usually null
• For POST requests, you can send form data or JSON

✅ Example (GET Request):

xhr.send();

✅ Example (POST Request with JSON):

const payload = JSON.stringify({ name: "John", age: 25 });
xhr.send(payload);

---

📨 What Is setRequestHeader() in AJAX?

Use setRequestHeader() to specify HTTP headers before sending the request (especially for POST or PUT).

🔧 Syntax:

xhr.setRequestHeader(headerName, headerValue);

Common headers:

• "Content-Type": "application/json" or "application/x-www-form-urlencoded"
• "Authorization": "Bearer <token>"

✅ Example:

xhr.setRequestHeader("Content-Type", "application/json");

---

🧪 Full Example – POST Request with All Three Methods

var xhr = new XMLHttpRequest();
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Response:", xhr.responseText);
  }
};

const data = JSON.stringify({ username: "john_doe", age: 30 });
xhr.send(data);

✅ This sends a POST request with JSON data to submit.php and logs the response.

---

💡 Common Mistakes to Avoid

❌ Mistake	✅ Fix
Calling send() before open()	Always call open() first
Setting headers after send()	Set headers after open(), before send()
Not matching Content-Type and payload	Ensure headers match the data format
Using synchronous requests	Avoid false in open() for better UX

---

📌 Summary – Recap & Takeaways

The trio of open(), send(), and setRequestHeader() is essential for building custom AJAX requests. These methods give developers full control over how data is sent and received from the server.

🔍 Key Takeaways:

• Use open() to define the request method and target URL
• Use setRequestHeader() to define headers like content type or tokens
• Use send() to transmit data (or initiate the request)
• Handle responses using onreadystatechange or onload

⚙️ Next Steps:

• Practice both GET and POST requests using these methods
• Explore sending files using FormData instead of raw JSON
• Learn about response headers and how to read them with xhr.getResponseHeader()

---

❓ FAQs – AJAX open(), send(), setRequestHeader()

---

❓ Can I call setRequestHeader() after send()?
✅ No. You must call it after open() but before send(). Otherwise, it will not affect the request.

---

❓ What is the default value of async in open()?
✅ It defaults to true, making the request asynchronous. Always use asynchronous mode unless you have a specific reason not to.

---

❓ Is it necessary to use setRequestHeader() for GET requests?
✅ Usually not. For GET requests, parameters go in the URL, and no body is sent—so headers are rarely needed.

---

❓ Can I send a FormData object using send()?
✅ Yes! XMLHttpRequest supports sending FormData objects directly.

const formData = new FormData(formElement);
xhr.send(formData);

---

❓ How do I debug an issue with open() or send()?
✅ Use browser dev tools to monitor network requests and verify headers, status codes, and payload.

---

Share Now :