AJAX Introduction

AJAX is a technology that can update parts of a web page without reloading the entire page.

AJAX exchanges data with the server in the background and can update partial web page content.

Prerequisites

Before you continue, you should have a basic understanding of the following:

  • HTML / XHTML
  • CSS
  • JavaScript / DOM

If you wish to first learn these topics, please go to ourHomepageto visit these tutorials.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can make web pages update asynchronously. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (that do not use AJAX) must reload the entire page if they need to update content.

There are many application examples that use AJAX: Weibo, Taobao, Zhihu, etc.

How AJAX Works

  1. Event trigger(e.g., clicking a button or page loading).
  2. AJAX request: via JavaScript, create aXMLHttpRequestobject, and send a request to the server.
  3. Server processes the request: The server (usually using PHP, Node.js, etc.) receives the request, processes it, and returns response data (JSON, XML, HTML, etc.).
  4. AJAX response handling: The browser receives the response and uses JavaScript to update content on the page, without needing to reload the entire page.

AJAX

AJAX is based on existing Internet standards

AJAX is based on existing Internet standards and uses them in combination:

  • XMLHttpRequest object (exchanges data with the server asynchronously)
  • JavaScript/DOM (information display/interaction)
  • CSS (defines styles for data)
  • XML (as a format for transforming data)

lampAJAX applications are browser- and platform-independent!

Google Suggest

In 2005, Google made AJAX popular with its Google Suggest.

Google Suggest uses AJAX to create a highly dynamic web interface: when you type keywords into Google's search box, JavaScript sends these characters to the server, and the server then returns a list of search suggestions.

Start Using AJAX Today

AJAX is based on existing standards. These standards have been used by most developers for many years.

Please read the next chapter to see how AJAX works!

Other Extensions