Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

AJAX

12K

Solutions

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hello Experts,

This post is more or less to pick your brain about things/ideas I should implement into my current system. Basically, the only requirement for my system was turn my employer's paper-based car seat rental program into a paperless system.

Here are screenshots of my system:

Index.php
Index.php
Rental-form.php
Rental-form.php
Rent-success.pdf

(See attached PDF)

Return-form.php
return-form.php
Right now, the system does the following:
  1. Presents the user (coworker) with a choice to either rent or return a car seat;
  2. Provides an inventory of any available seats (from a MySQL database);
  3. Generates a PDF version of our current rental agreement using FPDF;
  4. Emails the generated PDF to the renter and another department in my office (not implemented yet); and
  5. Presents the user with an HTML table in order to return any rented car/booster seats.

Being that I am a hobbyist php programmer, I am kind of in the dark when it comes to certain things. My career has nothing to do with programming, either. I enjoy PHP and took this task upon myself for fun.
rent-success.pdf
0
Free Tool: Path Explorer
LVL 10
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

I have the javascript where I am trying to do a simple show / hide of the div. but it does not work . please advice

http://jsfiddle.net/p51dytok/4/
0
I have an asp.net website that uses ajax and javascript.

I changed the javascript variable name but when i run the website and view the code i see the old vairable name. How do i get the progarm to use the new information.

I tried clearing the cookies and press f5
0
Hi,

My button don't work but alert work after success, what should I do ?


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/gif" href="img/drapeauBruxelles.gif" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Projet Map</title>
    <style>
       #map {
        height: 600px;
        width: 90%;
       }
    </style>
  </head>
  <body>
    <div class="container-fluid bg-2 text-center">
      <h1 class="margin">Des Marqueurs Google Maps</h1>
    </div>
    <div id="map"></div>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=fr">My Google Maps</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">

            <li><button type="button" id="btn1">Fontaine d'eau</button></li>
            <li><button type="button" onclick="actionImmediate();">Fontaine d'eau</button></li>
   

Open in new window

0
Hi Following advise from here I'm attempting to build my table using Datatables

In the code bellow I get "TypeError: f is undefined  datatables.min.js (line 60, col 471)" so I'm clearly doing something wrong

I can't just load the data as I need to do stuff, I've added comments, while the data is loading I'm creating a Openlayers marker point (Outside this question scope)

The button is used to simulate the ajax call the table will need to be refreshed

Could someone give me a hand first fixing the error second how to get at & manipulate the data, as commented

<!DOCTYPE html>
<html>
  <head>
    <title>Data Tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.js"></script>

<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
          var link = "MOCK_DATA.json";
//          $('#MainTable tbody').html(table);
          

Open in new window

0
Dear experts!

I am experiencing this weird situation as for the first time. I am currently using PHP, html, and JQUERY to design my pages.

I have navbar that direct user to 3 distinctive pages:
1. Home Page
2. inventory
3. Sales

Home page is set as the default page. If select the Inventory option in navbar it will bring me to hte inventory page and same concept applies to sales page.

I am using ajax POST which will pass some values over to the either the inventory or the sales. I was able to navigate from home to inventory or inventory to sales or sales to inventory etc.... without any issue.

But somehow when I hit the F5 or the refresh option in my browser (I am using Chrome and Firefox) it will redirect me back to Home page.

I am wondering why it does that? Doesn't it suppose to stay on the inventory page if I am currently on inventory page?

I tried to trouble shoot here is the strange thing. If I am on Home page and POST to inventory page, I can see my variable that I want to post over to the inventory page ( with the from the $_POST variable and the $_POST variable has a value that tells me what page I am on). If I hit the refresh button or F5, I can see the $_POST value that redirect me to home page instead of the inventory. This kind of trouble me as to why I get redirected back to home instead of staying on the inventory page.
0
I have a user area where a user can change their password. There is a CSRF token on the form. Once the user submits the form via ajax and the password is successfully changed, I unset the token. This is what I do for non-ajax pages and and then redirect the user on successful submission. But since the user isn't redirecting the session is unset and the token no longer works.

My question is, do I need to unset the session after the password was successfully changed? If so, then what would be the best way to go about it?

In my html, the create token function is called:

 <input type="hidden" name="form_token" id="form_token" value="<?php echo make_form_token(); ?>">

Open in new window


In the ajax submit, validation is performed to check that the session matches the form token.
0
I have a form with a few fields. text & select.. I am POSTing the form AJAX all this seems to be working except for the $_FILES.  In my PHP file I get the value of the file field when I do print_r($_POST); but not when I do print_r($_FILE)

Im expecting got get my textbox and selectbox values in the print_r($_POST);
and get my input type file to display when I print_r($_FILES);

Here is the code
	$("#ApplyChanges").click(function () {
		var fd = new FormData();
		var formErrors = 0;
		$('#girl_info :input[type=text], select, textarea').each(function () {
			if ($.trim(this.value).length >= 1) {
				$(this).css('border-color', '');
				if(this.id == 'language'){
				var languagesArray = [];	
				$("#language option:selected").each(function (i, selectedLanguage) {
					languagesArray[i] = $(selectedLanguage).val();
				});
					fd.append(this.id, JSON.stringify(languagesArray));
				}else{
					fd.append(this.id, this.value);
				}
			}else{
				formErrors++;
				$(this).css('border-color', 'red');				
			}
		});
		
		var counter = 0;
		$('#girl_info :input[type=file]').each(function () {
			if ($.trim(this.value).length >= 1) {
				counter ++;
				fd.append(this.id, this.value);
			}
		});
		
		formErrors = 0; 
		counter = 1;
		
		if(formErrors === 0 && counter >= 1){
			$.ajax({
				type: 'POST',
				enctype: 'multipart/form-data',
				url: '../ajax/form.php',
				data: fd,
				cache: false,
				contentType: false,
				processData: false,
				success: function 

Open in new window

0
Hi,

I'm using jQuery 3.1

How can I have this function return a value back when the value does not get set until after the ajax call?  I do not want to use "async:false" in my ajax function as that seems to be bad practice.  My code is below, but it doesn't work obviously.  Somehow I need to get the checkEmailAvailability function to return a value, but due to the async nature, I can't get it quite right.  

I also hear using success callback is old school, so I'm open to doing this differently.

...calling code:

var isEmailAvailable = checkEmailAvailability();

function checkEmailAvailability() {

	var emailAddress = $('#email').val();
	
		$.ajax({
			url: 'remote.php?method=process',
			dataType: 'text',
			type: 'POST',
			data: {email: emailAddress},
			success: function( data, textStatus, jQxhr ){
				
                               // if the email is not available
				if(data === 'false'){  
				}
			}
		}); // close ajax
	
}

Open in new window

0
I have the following script, and everything is working as intended.  My problem now is that when I update the variable value, I loose the ORIGINAL FONT of the field. Ex. when the user open the page the table has ?<h3> .... </h3> for he cells, and when I update the variable value, the Font or Format goes back to the normal Font NOT THE <H3>
I want to be able to update values keeping the same format or font.
This is the original cell from table
<tr><td width="180"><h3>Sub-total</h3> </td><td align="right" width="150"> <span id="total-price"><h3>15.98</h3> </span> </td></tr>

and when the listener updates the value, it works yes, but the font changes

Help tnx

             <script src="https://code.jquery.com/jquery-3.0.0.min.js"  integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="  crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script type="text/javascript">
                  $(document).ready(function () {
                            //set an event listener on the click function of the submit button
                           // $("#submit").on("click", function(e){
                            //prevent the form from submitting
                           // e.preventDefault();
                                //reset quantity value when page reloads
                        $('#qty').val(2);
                                // intercept 'change' event for the quantity input
                        $('#qty').on('change', …
0
New feature and membership benefit!
LVL 10
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

I am trying to run the code below
    $(function() {
        var params = {
            "api_key": "{xxxxxxxxxxxxx}"
            // Request parameters
            "StationCode": "{string}"
        };

        $.ajax({
            url: "https://api.wmata.com/Rail.svc/json/jStationParking?StationCode=A09",
            type: "GET",
            contentType: "application/json"
        })
        .done(function(data) {
            //alert("success");
            console.log("success" + JSON.stringify(data) );
        })
        .fail(function() {
            console.log("error");
        });
    });

Open in new window

but I get this error:
Error
0
I had this question after viewing How to json encode two arrays.

I am not sure if there is a way to "refresh" a jQuery value or if I would have to make another ajax call instead.

I am using ajax to retrieve my cart contents. Each item in the cart has an individual remove button to remove a particular item from the cart. When a user clicks this, an ajax call is made and the item is removed. Another ajax call is made which updates the number of items in the cart. I need to however also update the cart subtotal because that is the only thing that isn't changing. The subtotal/total of the cart is assigned in the cart display function. Can I just refresh this value? If not, I am not sure how to update or do I have to make another ajax call?

This is my function to show the cart:

function show_cart() {

    $.ajax({
            url: 'functions/show-cart.php',
            type: 'POST',
            dataType: 'json',
        })

        .done(function(data) {
            $.each(data.cart, function(index, item) {

                var showCart = `

				<div class="row hr marg-b-30 marg-t-30">
						<div class="col-md-2 col-sm-2 col-xs-12 marg-b-30">
							<img src="uploads/${item.pic_name}" alt="${item.product_name}" class="">
						</div>
						<div class="col-md-5 col-sm-5 col-xs-12 marg-b-30">
							<a href="#" class=""><b>Product</b></a><b 

Open in new window

0
HI
I HAVE AN AJAX HTNL EDITOR ON A SCREEN
AND I HAVE 3 TEXTBOX WHERE AUTOPOSTBACK = TRUE
ONCE I ENTER ANY BOLD CHARCTERS INSIDE THIS AJAX HTNL EDITOR POSTBACK OF TEXTBOX IS NOT FIRED HOW TO SOLVE SUCH WEIRD ISSUE
below is the design:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="test.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link id="MyStyleSheet" rel="stylesheet" type="text/css" href="~/Styles/CssStyles.css" runat="server" />
    <%--<link id="MyAlertStyle" rel="stylesheet" type="text/css" href="~/Styles/sweetalert.css" runat="server" />--%>
</head>
<body>
    <form id="form1" runat="server">
         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"
            AsyncPostBackTimeout="360000" AllowCustomErrorsRedirect="False">
             </asp:ScriptManager>
        <asp:UpdatePanel ID="sd" runat="server">
            <ContentTemplate>
     <asp:TextBox ID="txt_Year" runat="server"  Height="22px" 
                                                AutoPostBack="true" CausesValidation="false"
                                                OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <asp:TextBox ID="Literal_ProbationMemo" runat="server" CssClass="descriptionTextBox"
                                     

Open in new window

0
I am using the below code to create an Ajax DataTable. I want to make a row clickable, and have it open a URL using data from one or more of the columns. So, if there is a row with 2 columns, ID and CarType, and that row is clicked, I want the browser to go to the follwing URL when the row is clicked: www.myshop.com/cars.html?ID=77&CarType=Chevy

This works fine for the first load, but if you perform a search, or the contents dynamically change  and the table is re-drawn, it fails. Can someone please assist?

	$(document).ready(function(){
		searchCars();
	});
	function searchCars() {
		 $('#carsTable').DataTable().destroy();

		// clear the search results
		$("#carsTable tbody").empty();
		// search criteria when form is submitted
		var carType = $("#carType").val();
		var carColor = $("#carColor").val();

		// url to php
		var url = "CarTypes.PHP";

		// argument(s) to add to the url
		url += "&carType=" + carType;
		url += "&carColor=" + carColor;

		var carTable = $('#carsTable').DataTable({
			"order": [
				[ 0, "desc" ]
			],
			"BAutoWidth": true,
			//"stateSave": true,
			"bFilter": false,
			"ajax": url,
			"sAjaxDataProp": "DATA",
			"processing": true,
			// export button 
			"dom": 'Blfrtip',
			"columnDefs": [
				{"visible": false,"targets": [1]}
			],
			buttons: [
			{
			extend: 'collection',
			text:'Utility',
			titleAttr: 'Utility',
			autoClose: true,
			className: 'btn btn-primary btn-xs',
			buttons: [
			'colvis',
			'copy',
			'excel',
			

Open in new window

0
I am using jQuery Datables with Ajax, so my rows are created dynamically when the datatable loads. Does anyone know how I can make the row, or a column clickable? I'd like to make it so when a user clicks a row, or one of the items in a column it links them to another page. In the URL they click, I will need to include data from one of the columns in that row. For example, if someone clicked the first row below, I'd want to send them to a url: www.myshop.com/newcar.html?ID=77

ID     Carname    Cartype
-------------------------------------
77     carA            chevy
76     carB            dodge
0
How to know if your ip browser is from texas ? I want to find out for charging TAXES or not to my online customers.  If they are from Texas then TAXES need to be calculated.  I am using PHP to make the calculations for the Total price.  I was thinking of adding a field on my page for the customer to enter their zip code, but I wanted that field to be filled depending on the browser (ip) location and to know whether is from Texas. Is there any way to do this with PHP or AJAX

Tnx
0
Hi all,
Im using Jquery and Bootstrap.

Very simple test set up. I have a page which opens a remote content modal.

In the modal there is a div I wanted updated depending on whats in the select box. At the moment nothing seems to happen, Im guessing this is to do with the way Im initalizing the Jquery functions (ie. the elements dont exist on the page until the initial modal call). Any ideas how to solve this?



This is the page:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#thisone").replaceWith("Hello world!");
    });
    
    $("#selector" ).change(function() {

if($("#selector").val()=="one") {
	$("#question").load("text1.txt");
} else if($("#selector").val()=="two") {
	$("#question").load("text2.txt");
}


});
});

</script>
</head>
<body>
<a class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal"  href="modal.html">Click to open Modal</a>
   



<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">

Open in new window

0
i am finding it difficult to get radio button value in php using jquery ajax. every thing work fine if i comment the radio button variable in the php file  below, but if i remove the comment , nothing works. i have been on this for more then a day now. thanks for the help!!!

here is the html and jquery file :
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form Validation</title>
	<style>
		.error{
			color:red;
		}
		
		.emai{
			border: solid 2px green;
		}
		
		.error2{
			color: green;
		}
		.textBoxError{
			border: solid 2px red;
	       color: red;
		
		}
	</style>
</head>
<body>



<form method="POST" id="form" name="form" action="">
    <label for="email" >Enter your email</label>
    <input id="email" class="emai" name="email">
	<p id="result"></p>
	<label for="email">Enter your first name</label>
	<input id="firstname" name="firstname">
	<label for="address">address</label>
	<input id="address" name="address">
	 Yes: <input type="radio" name="opt" value="yes">
    No: <input type="radio"  name="opt" value="No" checked="checked">
	<p id="result2"></p>
    <button id="submitform">Submit</button>
	<p id="result3"></p>
</form>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$( document ).ready(function() {
    $(function(){
        $('#submitform').on('click',function(e){
            e.preventDefault();  // do not allow the default form action
            var 

Open in new window

0
I have a form that posts via javascript / jquery / ajax

I am trying to validate some fields server side before actual submission I was doing this to set the variable

myVar=$('#myVarFormID').val();

Open in new window


when I check the console, my variable is set appropriately and shows as intended, but when I go like this after setting it
nextFunction(myVar);

Open in new window


The function thinks the variable is [htmlInputElement]

I dont understand why the output shows fine but the script function wont take it in.  Is there something extra I need to do to pass this form element into a different function?
0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

I've been using an iframe to embed content from a 3rd party vendor for over a year now but recently, particularly in Chrome, the content on the page is flashing and not fully loading, ever, so it seems. I haven't changed my code (see below) so I'm not sure what the problem is. I'm researching solutions but they all seem very complicated at that point, if they would even work. Some involve php and I'm not familiar with that AT ALL so I don't know if that is even an viable option. Please help?

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SFATouchTasks.aspx.cs" Inherits="SFATouchTasks" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style type="text/css">
        .page
        {
            width: 1150px;
            height: 100%;
        }        
        .header
        {
            background: #FFF;
            width: 100%;
        }        
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div id="divEmbed" style="height: 300px;">
        <iframe id="ifm" name="ifm" width="100%" height="300%" frameborder="0" src="http://x.x.xxx.xxx:xxxx/app/main#/dashboards/589e1fed677202f430000031?embed=true"
            scrolling="auto" style="float: left;"></iframe>
    </div>
</asp:Content>

Open in new window

0
I'm trying to be 100% sure that I get responses from AJAX regarding the current state of the process.

I wrote the following as a simulation and its waiting and showing both success and complete at the same time.

$(function() {

	$('#submit').click(function(e){
		e.preventDefault();

		$.ajax({
			
			type: "POST",
			url: "ajaxPost.php",
			data: $("#aiForm").serialize(), // serializes the form's elements.

			success: function(){
				console.log('imStartingNow');
			},

			error: function(jqXHR, textStatus, errorThrown) {
				alert(errorThrown);
			},

			complete: function(){
				alert('im all done!');
			}

		});

	});

});

Open in new window


This all looks fine on the surface.  I am receiving the post variables as expected, however in real life, this post request does some processing that takes awhile so I want to know when it starts and when its done so I made my php script look like this to simulate a wait

<?php 
         sleep(5);
          echo "OK DONE";
?> 

Open in new window


What happens is that NOTHING occurs for the 5 second wait and then both success and complete fire off at the same time.

I was thinking it might be the sleep simulation that is causing the issue, but on my real page where its an actual post with some long processing afterward, it too will hang until done and show both success and complete.  I need some education on the proper way to set up this request where I can separate and identify the success vs the complete.
0
I am trying to get the id value in the url via ajax like this but don't know how to get the url parameter (id value in this case) via jquery.

$.ajax({
		url: 'functions/selected-cat.php',
		type: 'GET',
		dataType: 'json',
                data: {}
	})

Open in new window


When I try to console.log() the request I get a console error that says the id is an undefined index.


$safe_url = filter_var($_GET['id'], FILTER_SANITIZE_URL);

Open in new window


I put that into an array and json_encode it so that part is right. Is it not possible to get a url value in this way? Does it have to be done using javascript/jquery as opposed to php?
0
I have a page that generates this json output
{"address":"1234 East Main Street","city":"Anywhere"}

Open in new window


I created it using this PHP function on an index.php page
$address="1234 East Main Street";
$city="Anywhere";
echo json_encode(array('address'=>$address,'city'=>$city));

Open in new window


I then have the script shown below attached to the top of the index page that includes this ajax script that should be parsing and returning the values in my console.  I only get error messages

$(function() {

    $.ajax({
        url : 'index.php',
        type : 'POST',
        data : {"address":"address","city":"city"},
        dataType : 'json',
        success : function (result) {
           alert(result['address']); // alert box
           console.log(result['city']) // city in console
        },
        error : function () {
           alert("error");
        }
    });
});

Open in new window


Im very new to ajax so I'm hoping im just overlooking something simple but if there is a better way to do it altogether im open to that too. Thanks!
0
Hi

In my call to API using AJAX, I get the response in HTTP Status code as shown below.

response.png
In my code, when I get any status code that starts with 4 it goes into error function. Is there a way in error function to identify the value sent back in response? So that, i can display different error message for different status code.

I did try adding this below code,

          statusCode: {
            202: function() {
              $formRoot.find('.form-validation .message').html(successMsg);
              $formRoot.find('.email-link-form').hide();
              $formRoot.find('.form-validation').show();
            },
            429: function() {
              showResult(validationError.tooMany);
           },
            422: function() {
              showResult(validationError.contact);
           },
            404: function() {
              alert ('404 error');
           }
         }

but this doesnt even get called.

any help appreciated.

Thanks.
0
Any idea how to fire the onfocus event of the Ajax toolkit HtmlEditorExtender?
I need to show hide the toolbar when I focus  on the editor.
I tried
 $("#HtmlEditorExtender2").focus(function () {
                    alert("Focused");
                });

Open in new window

but it did not work..
0

AJAX

12K

Solutions

7K

Contributors

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.