Thursday 31 May 2018

Detailed description of the AJAX Syntax along with its meaning and work


The given code is the syntax of the ajax function now lets us understand the terms used in the given code.Firstly you should know that the ajax is always called via a javascript function .The function may be of any type onclick,onchange,onload etc.
AJAX along with the Jquery

$.ajax
(
{
url : "URL",
method : "post",
data : $('#login').serialize(),
dataType : "text",
beforeSend: function() {
/*  Your Codes Before sending data*/
},
success: function(data){
/*  Your Codes after sending the data */
}

$.ajax ( {  } )

Everything of the ajax is written between the these parenthesis ( {  your other codes   } ) .


url : "Designated Url",

Suppose there is a form on page a.html and you have to insert the form data into the database .Then you have to make another page b.php which will recieve the value from the a.html and contain the insertion code of the form data .So ,basically in the Designated Url we have to write the path of the b.php .

method : "post",

Now as we know that we are sending the data of a.html to b.html so basically we can send them with two methods either GET method or POST method .So in the method part of the AJAX we write the method name from which we are sending the data from one page to other.

data : $('#login').serialize(),

The serialize() method creates a url encoded text string by serializing the form values .And $('#login') id of the form (for ex. <form action="" method="POST" id="login" >).So this method will send all the data within the form tag to the b.php after receiving those values on b.php you can simply insert it into the database. This is the section of AJAX where we told the AJAX that what data has to be send has to be sent. Images can't be send by the serialized() method .

dataType : "text",

Now the next is the dataType ,we have to decleare the datatype which we are sending to other page that the data is text or file .

beforeSend: function() {    /* Your Code Before Sending Data */     }
We have seen in many places were AJAX has been used that when we click on the submit button ,the button get disabled and a loading gif or a Please wait message is show to us. This is show by the before send function of the ajax .We give the button an ID and using hide( ) function we disappear the button and replace it with the some other text or a loading image or loading gif.

success: function(data) {   /* Your Code Before Sending Data */   }

Now the last basic step of the ajax is the success( ) function ,When the data is send through the ajax method to the b.php then the insertion query will run on that page .After running the query the there will some response either the query will successful or it will fail .So the result will be recieved in the success ( ) function of the ajax .In the above heading there is a term  function(data) in this term the data is a variable .It contains the response of b.php what ever you will echo on that page that will be store on the variable data .

For Example :

If you have echo something on b.php then ,

b.php
echo 'Hello How are you';
Then on the a.html in the success function of the AJAX will work as follow :

a.html
success: function(data) {  
alert(data);
 }
This alert will simply show an alert containg the message of b.php "Hello How are you".

If still you have any confusion or you want any demo of this ajax then comment in the comment section i will try my best to help you .The demo will be of free of cost .

0 comments:

Post a Comment