Thursday, January 2, 2014

What is jQuery AJAX and JSON? and How we can use it in our asp.net with c# application

Posted by Abhay Makadiya at 1/02/2014

In previous article we have discussed How to Call Server Side method form aspx page in asp.net with C# and How to call jQuery function from code behind in asp.net with C#. Now in this post we will learn basic concept of Jquery Ajax and JSON and how we can use it in our asp.net application.

What Is AJAX?

Asynchronous JavaScript and XML is about Loading data in background and display it on the web page without reloading the hole page. it makes you application very fast because using this technology you can update those parts which is required. right now in asp.net when some event is fired it will load hole page for each post-back, this makes the application lazy, but now we have solution we can use jquery ajax to make simple.

What is jQuery AJAX?

The jQuery library has a full suite of Ajax capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh. with jQuery Ajax you can request Text, HTML, XML or JSON from remote server using both HTTP GET and POST methods.

Methods of Jquery Ajax

load(URL, data, callback)

load() method is used to load data from server and puts the returned data into selected element

$(selector).load(URL, data, callback)

URL - you wish to load
data - it is an optional argument. it is set of key/value pairs to send along with the request.
callback - it is a function which is called after the load completed.

responceText - Content If Successes
statusText- Contains the Status Of the Call
XHR- Contains the XMLHttp Request Object

Get(URL, callback)

Get() method is used to get requested data from resources. Its may Return cashes data

$(selector).get(URL, callback)

URL - you wish to load
callback - it is a function which is called after the load completed.

post(URL, data, callback)

post() method is used to submit data to a specified resources. post method does not return data

$(selector).post(URL, data, callback)

URL - you wish to load
data - it is an optional argument. it is set of key/value pairs to send along with the request.
callback - it is a function which is called after the load completed.

Example Of POST

$("button").click(function(){
     $.post("demo_post.asp",
     {
        Name: "ABY"
        City: "Upleta"
     },
     function(data.status){
     alert("Data:"+data+state);
     }); 
   });

$.getJSON()

getJSON function Loads JSON Encoded data from a server using an HTTP get.

ajax()

This method is used to preform asynchronous Ajax Request. This is very useful method it provides all the options.

Name/Value pair for the AJAX

async - A Boolean value indicating whether the request should be handled asynchronous or not. Default Value is True
beforeSend(Xhr) - This function is run before request is send.
cache- Boolean indicate browser should cache the requested pages default is true.
complete(Xhr,Status) - A function executed when request finished after success and error functions executed
contentType - It is used when sending data to server - Default value is "application/x-www-fam-urlencoded"
context - specifies the "this" values for all AJAX related callback functions.
data- use to set data to be sent to the server.
dataFilter(data,type) - A function used to handle the raw resources data of the XMLHttpRequest.
dataType(data,type) - Datatype which is expected from server response.
error(Xhr,status,error) - This function is run when request was fails.
ifFinished - Boolean value specifying weather or not to trigger global AJAX event handles for the request default is true.
jsonp - A string overriding the callback function in a jsonp request.
jsonCallback - specifies a name for the callback function used in jsonp request.
password - specifies a password to be used in an HTTP access authentication request.
processData - a Boolean value specifies weather or not data sent with the request should be transformed into a query string Default value is TRUE.
ScriptCharSet - Specifies the charset for the request.
Success(request,status,Xhr) - runs when request succeed.
timeOut - The local timeout in milliseconds for the request.
traditional(Xhr,status,error) - A Boolean value specifies weather or not to use the traditional style of param.
serialization type - specifies type of request sent (get/Post).
URl(Xhr,status,error) - Send request to current page.
username - Specifies username to be in an HTTP access authentication request.
xhr - a function used for creating the XML HTTP Request object.

How to use ajax() in asp.net Application with Example

How to Call Server Side method form aspx page in asp.net with C#

What is JSON ?

JSON is JavaScript Object Notation. JSON is Light Weight Text Data format it is useful for Interchanging the Data between View and Model. JSON is easy for humans to read and write. it is more like Structures in OOPS. JSON is based on the Object notation of the JavaScript.

JSON does not requied JavaScript to read and write data because JSON is language Independent and Self Describing format. you can parse the JSON object through built-in function eval().

Basic Elements of JSON.

Objects in JSON are delcared using curly brackets '{', '}'.

Object Members in JSON are separated using ':' .

Arrays In JSON are declared using nested blocks

Example of JSON elements:

Objects in JSON are declared in key/value pair here is the example.

{ "Name":"Abhay" }

Array in JSON are declared as per following:

{
"employees": [
{ "firstname":"Abhay" , "lastName":"Makadia" }, 
{ "firstName":"Kashyap" , "lastName":"Pandiya" }, 
{ "firstName":"Nishant" , "lastName":"Kalavadia" }
]
}