Real Time Example of JavaScript Object Notation (JSON)

This blog for Real Time Example of JavaScript Object Notation (JSON).

Introduction

 

JavaScript Object Notation is an open standard format that uses human-readable text to transmit data objects consisting of attribute-value pairs. It is used primarily to transmit data between a server and web application, as an alternative to XML.

 

Uses

1. JSON is a lightweight data-interchange format.
2. JSON is language independent
3. JSON is "self-describing" and easy to understand.

Syntax

 

In client-side.

function <FUNCTION NAME> (<PARAMETER OPTIONAL>) {

        $.ajax({

            type: <GET/POST>,
            contentType: "application/json; charset=utf-8",

            url: <TARGET URL>\<SERVER SIDE METHOF NAME>,

            data: JSON.stringify({ <PARAMETER TO SEND>: <VALUE> }),
            async: <true/false>,
            dataType: "json",

            success: function (data) {<TO DO>
              returnflag = true;
            },

            error: function (result) {
                returnflag = null;
            }
        });

}

Server side:

[WebMethod]
public static string <SERVER SIDE METHOF NAME> (<PARAMETER>)
{
   ….
   …

   Return XYZ;;
}

Example:

 

The scenario is we need to get the student name based on the register number.

<asp:TextBox Width="80px" MaxLength="32" ID="txtRegnum" runat="server"onblur="getName();" ></asp:TextBox>
<asp:Label ID="lblStudentName" runat="server" ></asp:Label>

function getName() {
    var regNum = '';
    var returnflag;

    regNum = document.getElementById('txtRegnum').value;

    if (regNum != '') {
        $.ajax({

            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "default.aspx/getStudentName",
            data: JSON.stringify({ RegNum: regNum }),
            async: false,
            dataType: "json",

            success: function (data) {

                if (data.d == '') {
                    document.getElementById('lblStudentName').innerHTML = '';
                }
                document.getElementById('lblStudentName').innerHTML = data.d;
                returnflag = true;
            },

            error: function (result) {
                returnflag = null;
            }
        });
    }
}

[WebMethod]
public static string getStudentName (string RegNum )
{
   ….
   …

   Return XYZ;;
}