What is AJAX and Working of AJAX

Zia

2 Followers

Follow

Mar 26, 2024

-

16 sec read

317

0

0

0

Introduction to AJAX

AJAX Asynchronous JavaScript and XML is not a new technology but a new approach to using JavaScript, HTML, CSS, and XML to create faster and better Web applications. Traditionally, Web applications transfer information to and fro the server in a Synchronous manner. This means that when the user fills out a form and clicks submit, the user will be directed to a new page with updated information from the server.

With AJAX, Web applications make fast incremental updates to the user interface without reloading the entire page. In simple terms, using AJAX, one can make quick and dynamic Web Pages. Applications or Web pages developed using traditional non-AJAX techniques reload the whole Web page even for changing a few parts of the content. This can lead to server overhead and reduced performance. With AJAX, the server is communicated behind the curtain. This means that the user would overlook the communication of the Web page to the server. This makes the application more interactive with the user's actions.

Working of AJAX

Whenever an event occurs in a browser, an HttpRequest object is created and transferred to the server over the Internet. The server then processes this request and sends an HTTP response back to the browser. The browser uses JavaScript to execute this data and update the page contents.

The basic working of Ajax involves the following steps:

• The user interacts with the web page: The user acts on the web page that requires data to be fetched from the server, such as clicking a button or filling out a form.
  
  
• JavaScript makes an asynchronous request to the server: When the user acts, JavaScript running on the web page sends an asynchronous request to the server using the XMLHttpRequest (XHR) object. This request is sent in the background without requiring the user to leave the current page.
  
  
• Server processes the request and returns data: The server processes the request and returns data in a format such as XML, JSON, or HTML.
  
  
• JavaScript updates the page content: Once the data is returned from the server, JavaScript on the web page processes it and updates the content of the page dynamically, without requiring a full page refresh.
  
  

Internet Standards AJAX:

Ajax has become a popular web development technique because it allows web developers to create more interactive and responsive web pages. Instead of having to reload an entire web page every time the user interacts with it, Ajax allows developers to update only the relevant parts of the page, resulting in a smoother and faster user experience. In addition to XMLHttpRequest, Ajax relies on other web development technologies such as JavaScript and the Document Object Model (DOM) to manipulate the content of the web page dynamically. Cascading Style Sheets (CSS) are also used to style the updated content.

While XML was originally used as the primary format for data exchange between the client and server in Ajax, JSON has become more popular due to its lighter weight and easier integration with JavaScript. Some web developers have also started using newer technologies such as WebSockets and Server-Sent Events (SSE) to achieve real-time communication between the client and server, instead of relying solely on Ajax.

AJAX and PHP

AJAX integrated with PHP and MySQL establishes smooth and robust communication with the database and the server, it helps in improving the performance of the application.

1. Example for AJAX PHP:

It becomes easy to access information from the database using AJAX and PHP. Consider an example to understand this. To use AJAX and PHP in the example with a database, one must build some MySQL queries. In this example, the user creates a table called the customer and sends a query via AJAX. The results are then displayed on the browser Web page using ‘customerdetail.html’.

As a prerequisite to executing the example properly, a MySQL table should be created as follows:

AJAX and MySQL

AJAX can also be used for communicating with the database interactively. One can create a simple live database search functionality by utilizing AJAX and PHP techniques, where the search results will be displayed as the characters are typed in the search input box.

Consider an example where the user wants to display train information based on a given train name or train number. This input is to be accepted via a drop-down list. The data will be retrieved from a database using AJAX. The values for the drop-down are hardcoded in this example, but in practical scenarios, they may be populated from the database too.

In the example, whenever a user clicks any of the two drop-downs and chooses either the train number or the train name from the list, a function named ‘display train ()’ 1s is invoked. The change () event triggers this function.

AJAX and XML

XML is a markup language similar to HTML. The XML document contains plain text along with tags enclosed within and. XML is commonly used as a data format. XML and AJAX are used for sending a request and receiving a response to deliver data on the Web pages.

There are two major differences between HTML and XML:

• HTML defines a certain set of tags to be used compulsorily whereas XML does not.
  
  
• XML is strict about document structure, and how it is stored and transferred, but HTML does not follow this strictly.
  
  

XML gives its users a lot more freedom than HTML. HTML has a defined set of tags for each function. For example, the tag surrounds a link, the br breaks a line, and so on.

Conversely, XML documents can use any tags according to the user’s choice such as putting rating tags around a movie rating, height tags around a person’s height, and so on. Thus, XML gives users an option to define their tags.

HTML allows the user to play with the tags and ignores some opening and closing tags, unlike XML.

AJAX Live Search

A live search is a search input box that displays the search result as and when the user starts typing words. it uses a reliable database to retrieve information faster. As an example, let us create a live search box that will search the employee's table and show the result asynchronously. For example, stable emp is created which stores the details of the employees such as emp_no and employee name.

Once the table is created, data must be inserted so that the result is fetched accordingly. After the data is inserted, a Web page must be created for user interaction. Thus, as and when the user types to search for an employee, the employee details will be displayed. it is quite similar to autocomplete text boxes or typeahead.