AJAX - Roles of Browser, Server, and Database in AJAX

Roles of Browser, Server, and Database in AJAX

When you use AJAX to fetch or send data, three main components work together:

1. Browser (Client-Side)

• The browser is where the AJAX request originates.

• It handles:

  • Sending requests to the server.

  • Running JavaScript and executing the AJAX call.

  • Updating the webpage dynamically without refreshing.

• AJAX uses JavaScript or Fetch API to communicate with the server.

Example:

• You type a city name in a weather app.

• The browser sends an AJAX request to the server asking for weather data.

2. Server (Backend)

• The server acts as a middleman between the browser and the database.

• It:

  • Receives the AJAX request from the browser.

  • Processes the request (using PHP, Node.js, Python, Java, etc.).

  • Fetches or stores data in the database if needed.

  • Sends a response back to the browser in JSON, XML, or HTML format.

Example:

• The server receives the city name from the browser.

• It requests weather data from the database or an external API.

• It sends the processed weather information back to the browser.

3. Database (Data Storage)

• The database stores, retrieves, and manages the data requested by the server.

• Common databases: MySQL, PostgreSQL, MongoDB, Oracle, Firebase, etc.

• It:

  • Executes queries sent by the server.

  • Returns data quickly and efficiently.

  • Doesn’t communicate directly with the browser — only through the server.

Example:

• The database stores weather data for multiple cities.

• When the server asks for London’s weather, the database sends back the temperature, humidity, and conditions.

How It Works — Step by Step

Let’s take an example of a weather app:

Scenario:

You enter "London" in a weather search bar.

Step 1: User Action (Browser)

• You type “London” → Browser runs JavaScript → AJAX request is triggered.

Step 2: AJAX Request

• The browser sends a GET request to the server:

  GET /weather?city=London
  

Step 3: Server Processing

• The server receives the request.

• It queries the database:

  SELECT * FROM weather WHERE city = 'London';
  

Step 4: Database Response

• The database sends back the stored weather data to the server.

Step 5: Server Response

• The server formats the data into JSON:

  {
    "city": "London",
    "temperature": "22°C",
    "condition": "Sunny"
  }
  

• It sends this JSON response to the browser.

Step 6: Browser Updates Page

• The browser receives the JSON.

• JavaScript updates the webpage dynamically without refreshing.

Diagram: AJAX Workflow

User (Browser) → (AJAX Request) → Server → (Query) → Database
Database → (Data) → Server → (JSON Response) → Browser (Update Page)