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;;
}