Wednesday, December 18, 2013

Different Types of AJAX Usage with Examples

Hiiiii, Being a web developer, you have used ajax many times for submitting form and then serializing the data of form to send the data on the same page or on a next page.
You may used this ajax with many different syntax like : you have used dataType:"json" before data sending or you may have used "parsed_data = jQuery.parseJSON(data)" after the don or success function after getting the response.
Some people use these different syntax without being aware of the meaning of these different syntax.
So, here in this I'll be showing two examples explaining the difference between these two syntax and usage.

AJAX USAGE

AJAX USAGE 1 :

 $.ajax({  
 type: "POST",
 url: "post1.php",
 data: // YOUR DATA TO SEND 
 }).done(function( data ) {

 parsed_data = jQuery.parseJSON(data);
 alert(parsed_data.response1);
 alert(parsed_data.response2);    
});

AJAX USAGE 2 :

 $.ajax({  
 type: "POST",
 url: "post1.php",
 dataType: "json",
 data: // YOUR DATA TO SEND
 }).done(function( data ) {
    
 alert(data.response1);
 alert(data.response2);    
});

In the Ajax usage 1 we haven't used dataType:"json" and rather we have used parsed_data = jQuery.parseJSON(data) in the response function of ajax when response is received through ajax . We have used this jQuery.parseJSON(data) to decode and parse the encoded JSON which is received in ajax response from the page on which you sent the data. The encoded  JSON response which you will getting in response for both the usage of ajax shown here will be of the form : 

{"response1":"Hello","response2":"World"}

After using this jQuery.parseJSON(data) as shown in Ajax Usage 1 , you can use the value of each of the variables in response JSON by :

data.response1 , data.reponse2, etc , both of these variables will give Hello , World  respectively .
In the Ajax Usage 1, Ajax is unaware that the data in response in Ajax so we manually have to decode and parse that response data to use the variables in it. This usage is used for both the condition when you are getting JSON as response  or you are getting a normal response other then JSON  To use the response data which is not in a JSON form then just remove the line with jQuery.parseJSON(data) and directly use the response data.


In Ajax Usage 2, we have used dataType:"json" in the Ajax settings before sending the data through Ajax in place of parsed_data = jQuery.parseJSON(data) in the response function of ajax. In this we are prior telling the Ajax that the data that will we received will be just in the JSON form and not in any other form. So, Ajax here automatically parse that JSON encoded data of the form as shown above and to use the variables in this data response you can use the same syntax as defined above like data.response1 , data.reponse2,etc. This usage is used where the response data which is received is just of the JSON form. If here you try to use the data directly not of the JSON form, you will get nothing in data. 


Hope you like this post……..Please Comment…………!!!!!!!!!



Tags:

0 Responses to “Different Types of AJAX Usage with Examples”

Post a Comment

© 2013 MyCodeStock. All rights reserved.
Designed by SpicyTricks