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

JSON is a lightweight data-interchange format.
JSON is language independent
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;;
}