what is AJAX?

AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the
webpage, without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and

Facebook tabs.
What about jQuery and AJAX?
jQuery provides several methods for AJAX functionality.

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON
from a remote server using both HTTP Get and HTTP Post - And you can load the
external data directly into the selected HTML elements of your web page!
The expandable table can be achieved by using JavaScript with HTML. By Clicking on a row
of the table, it expands and a sub-table pops up. When the user again clicks on that row the
content will hide. This can be very useful when the data is complex but it is inter-related.
Example 1: The following example is implemented using HTML, CSS, and JQuery. It shows
data of multiple people working in an organization about their age, salary, and job. By clicking
on the row, the table expands and the description about that particular employee is displayed .

Output:

Example 2: The following example is implemented using HTML, CSS, and JQuery. In this
table, profit and loss are displayed for multiple hotels. By clicking on any of the plus signs, a
sub-table is displayed which informs about the hotel’s revenue in three different cities .
Example -3

How it Works?
1. <input type="text" id="txtName" name="name" required
autofocus>
The attribute required specifies that input cannot be empty. The
attribute autofocus sets the focus to this element.
2. <input type="text" id="txtZipcode" name="zipcode"
   placeholder="enter a 5-digit code"
   required pattern="^\d{5}$"
   oninvalid="this.setCustomValidity('Enter a 5-digit
zipcode')"
   oninput="setCustomValidity('')">
The attribute placeholder="text" is used to show hints on the text field as
watermark. The attribute pattern="regex" specifies an regular expression (regex)
pattern to be validated for this field. The oninvalid and oninput event handlers are
used to customize the error message.
3. <select id="selCountry" name="country" required>
Similarly, we can use required on <select> to specify input value cannot be an
 empty string.
4. <label><input type="radio" name="gender" value="m"
required>Male</label>
<label><input type="radio" name="gender"
value="f">Female</label>
For radio buttons, it is sufficient to place an required on one of the buttons. [How
to specify required for checkboxes?]
5. <input type="tel" id="txtPhone" name="phone" required
pattern="^\d+$" placeholder="digits only">
HTML5 adds type="tel" to <input>, but it is not widely supported.
6. <input type="email" id="txtEmail" name="email" required>
HTML5 adds type="email" to <input> for email input, which can be validated
(via required).
7. <input type="date" id="dateBirthday" name="birthday"
required>
<input type="time" id="timeAppt" name="appointment" required>
HTML5 adds type="date" and type="time" to <input>. Some browsers (e.g.,
Chrome) could show a data-picker and time-picker.
Example -4