Ajax Introduction

AJAX


Ajax Introduction:

AJAX is the short form of Asynchronous JavaScript and XML. It’s a technique to create dynamic web pages. It’s a client-side script that communicates with client and server without reloading the page, and you can send and pass data using ajax-script over the web page without reloading the whole page.

Why we use Ajax?

It’s used when we need to update only some part of the page instead of disturbing the whole page with using Ajax the speed and response time issue is resolved.

What is Ajax?

It’s a library with Javascript that enables us to call PHP functions and server side code using Javascript and get back the returning data.

How to use Ajax?

Before using Ajax, you must have knowledge of following languages

  • HTML
  • Java-Script
  • jQuery

Today we implement Ajax code using jQuery because its cross browser supported and we do not have to do a lot of things for it so let’s start:

The jQuery library comes with a function name ajax() which takes a parameter. This parameter is an object having following attributes.

  • Type
  • Url
  • Data

Type: its either post or get the form or a function submits type is defined in as the value of the type attribute.

URL: It’s the URL of the responding page which we have to call using that function.

Data: the actual data we want to send and in the response to that data we get some results.

Function in the object that we send as a parameter in ajax() function.

  • Success (returning value)
  • Failure ()

Success(): it contains the returning response answer as a parameter.

Failure(): it contains the failure message if any while sending data.

The basic structure of ajax( ) function is

Syntax:

$.ajax({type:’post’,URL:’demo.php’,data:datasend,success:function(masg){ }});

Example:

To take an example, we create a demo web page and on that web page there are some buttons, and every button have some id. By clicking any button the ajax() function is called and it returns the basic information stored about that button in some div.

HTML Code:

 

jQuery Code:

 

PHP Server File Code:

Ajax Example Live Demo

Download Ajax Example Demo