> For the complete documentation index, see [llms.txt](https://bc.rocketacademy.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bc.rocketacademy.co/2-full-stack/2.2-advanced-react/2.2.1-ajax.md).

# 2.2.1: AJAX

## Learning Objectives

1. AJAX means asynchronous HTTP requests in JavaScript that can update UI without refreshing the page
2. We can send arbitrary HTTP requests from any React component to send and retrieve data from external APIs
3. Understand how to send HTTP requests from React components and where to send them

## Introduction

AJAX (Asynchronous JavaScript and XML) is a technique for sending asynchronous HTTP requests in JavaScript that can update UI without refreshing the page. XML is an older markup language for sending and receiving data that is now less commonly used than JSON, but the software community continues to use the abbreviation AJAX out of convention.

## AJAX in React

[React's official docs](https://reactjs.org/docs/faq-ajax.html) provide clear examples of how to make AJAX requests from both class and Hook-based React components on component load.

{% embed url="<https://reactjs.org/docs/faq-ajax.html>" %}

1. The examples use the [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) AJAX library, but we will use [Axios](https://axios-http.com/docs/intro) at Rocket because Axios is the most robust and popular as far as we know
2. The examples fetch first-load data in `componentDidMount` or `useEffect` instead of directly in the functional component to avoid fetching data every time the component re-renders
3. `res.json()` extracts the JSON object out of the response. `result` in the subsequent callback contains that object.
4. The examples show how to send AJAX requests to populate data in components on component load, but not how to send requests on a user action such as a button click (e.g. like button). For the latter we can safely define a callback method in our component (e.g. `handleClick`) that performs a request on button click without worrying about fetching data more times than necessary.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bc.rocketacademy.co/2-full-stack/2.2-advanced-react/2.2.1-ajax.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.