How to Detect AJAX Request to Normal Request in Node.js ?

Last Updated : 24 Jul, 2024

When developing web applications with Node.js, you often need to differentiate between AJAX (Asynchronous JavaScript and XML) requests and normal HTTP requests. AJAX requests are typically used to fetch data without reloading the entire page, while normal requests often result in full page loads. Detecting the type of request can help you tailor the response accordingly, providing a better user experience and performance.

Why Detect AJAX Requests?

Custom Responses: Serve different content or format the response differently for AJAX requests and normal requests.
Security: Apply different security measures depending on the type of request.
Efficiency: Optimize server-side processing based on the request type.

How to Detect AJAX Requests

AJAX requests usually include the X-Requested-With HTTP header, which is set to XMLHttpRequest. By checking for this header, you can reliably detect AJAX requests. Here’s how to do it in a Node.js environment, specifically using the Express framework.

Techniques to detect AJAX requests in Nodejs

Check the headers of the request and if it contains HTTP_X_REQUESTED_WITH having a value of XMLHttpRequest then it is an Ajax request.
When you make an AJAX request, it adds 'content type':'application/json' to the header of the request. So if the request contains the header then it is the AJAX
If the referer header is different from the host header then it is an AJAX request
If the sec-fetch-dest header is equal to empty then it is an AJAX request

Installation Steps

Step 1: Make a folder structure for the project.

mkdir myapp

Step 2: Navigate to the project directory

cd myapp

Step 3: Initialize the NodeJs project inside the myapp folder.

npm init -y

Project Structure:

Example: Implementation to detect AJAX request to normal request in Node.js

HTML

<!-- ajax.html -->

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
      	How to detect AJAX request 
      	to normal request Node.js?
  	</h3>
</body>
<script>
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:3000", true);
    xhr.send();
</script>

</html>

Node

// app.js

const http = require('http');
const server = http.createServer((req, res) => {
    if (req.headers.host != req.headers.referer) {
        console.log("It is the AJAX Request!");
    }
});
server.listen(3000);

Step to Run Application: Run the application using the following command from the root directory of the project

node app.js

Note: This code listens at port 3000 and prints a message when it gets an AJAX request

Output: In the output, I am executing the server.js and then running the ajax.html with HTTP protocol and detecting the AJAX

Example 2: If the sec-fetch-dest header is equal to empty then it is an AJAX request, Create a file by the name server.js and paste the below code

HTML

<!-- ajax.html -->

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
      	How to detect AJAX request 
      	to normal request Node.js?
 	</h3>
</body>
<script>
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:3000", true);
    xhr.send();
</script>

</html>

JavaScript

// app.js

const http = require('http');
const server = http.createServer((req, res) => {
    if (req.headers['sec-fetch-dest'] == 'empty') {
        console.log("It is the AJAX Request!");
    }
});
server.listen(3000);

Step to Run Application: Run the application using the following command from the root directory of the project

node app.js

Note: This code listens at port 3000 and prints a message when it gets an AJAX request

Output: In the output, I am executing the server.js and then running the ajax.html with HTTP protocol and detecting the AJAX

How to redirect back to original URL in Node.js ?

nikhilkalburgi

Improve

Article Tags :

How to Detect AJAX Request to Normal Request in Node.js ?

Why Detect AJAX Requests?

How to Detect AJAX Requests

Techniques to detect AJAX requests in Nodejs

Installation Steps

Project Structure:

Similar Reads

Thank You!

What kind of Experience do you want to share?