Json with ajax

Json with ajax

Is a web development technique for creating interactive web applications.

It is way to store information in an organized ,easy to access manner, it gives us human readable collection of data that we can access in a really logical manner.

Serialization

Is the process of taking an object and converting it to a format in which it can transported across a network.

Deserialization:

Is the process of using the serialized state information to reconstruct the object from the serialized state to its original state.

The json format is often used for serializing and transmitting structured data.

Ajax is a new technique for creating better, fast and more interactive web app, with the help of XML, html, css and JavaScript

                 

Ajax is used to increase the web page interactively speed and usability

Ajax is the technique of exchanging data with a server and updating the parts of web page without reloading the whole page

Ajax uses XHTML for content and css for presentation as well as the document object model (and javascript for dynamic content display)

Ajax is a web browser technology independent of web server software

Technologies used in Ajax

JavaScript:
It loads typed scripting language JavaScript function is called when an event in the page occurs for the whole Ajax operation

DOM:

API for accessing and manipulating structured documents

Represents the structure of XML and HTML documents

CSS:

Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript.

XMLHttpRequest

JavaScript function that performs asynchronous interaction with the server.

Jquery Ajax

Is a great tool or library which provides a rich set of Ajax Methods to develop interactive web applications

With the Jquery Ajax Methods we can request text, Html, XML or JSON from a remote Server using both HTTP Post or HTTP Get and we can load the external data directly into the selected Html element of our web page

Loading Data using Jquery Ajax

This is very easy to load any static or dynamic data using Jquery Ajax. In order to do this Jquery provides load() method.

Load method: load data from a server and puts the returned data into the selected html element.

Syntax:

[selected].load(url,[data],[callback]);

Data-optional

Callback-success

The required URL parameters specifies the URL that you wish to Load.

The optional data parameter specifies a set of query string key/value pairs to send along with the request.

The optional call back parameter is the name of the function to be executed after the load () method is completed.

Example:

Loading the data from the html page  or we can say loading html content dynamically using Ajax loads()

Page1.html

Page2.html

           

output

  

Loading the content of text file in jQuery ajax load method

TextFile.txt

Write any data

$(“divMain”).load (‘TextFile.txt’);

Passing Data to the Server

Many times we collect input from the user and then we pass that input to the server for further processing.

JQuery Ajax made it easy enough to pass collected data to the server using the Parameter of any available AJAX method

Ex Load ()

Example

Example:

Create two pages with the following names: HtmlPage1.htm and Default.aspx

HtmlPage1.htm

Default.aspx.cs

And run the page HtmlPage1.htm

And then click on Calculate Button the result should be displayed in Default Page

Loading the Data from the Database

LoadData.html

Default2.aspx.cs

Output:

GetMethod()

Jquery.get()

Loads the data from the server using a Http GetRequest

Jquery.Post()

Loads the data from the server

Example

htmlPage

GetServerDateTime.aspx

Output:

$(document).ready(function () {

        $("#btnDt").click(function() {

            $.post("GetServerDateTime.aspx",function(response) {

                alert(response);

            });

        });

        });

var employees = [
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"}, 
    {"firstName":"Peter", "lastName": "Jones"}
]

xml	json
more in size	less in size
developed by world wide consortoin	developed by douglos crockford
it has end tags	it does not has end tags