I am trying to learn how to write more dynamic web sites that use Ajax. The examples I found seem to pass only a single string parameter to and from a service. After a little more looking, I saw that some developers pass more than one value by creating an object and then serializing the object using JSON.
So, I wanted to create a simple HelloWorld app that passes objects in both directions. For example, where a service serializes a .NET object as JSOn and passes it back to the browser for parsing by Javascript and also an example where a Javascript object is serialized to JSON on the client side and then de-serialized to a .NET object on the server. To serialize a Javascript object to JSON, I found a javascript routine, json.js, at json.org,
My simple example has the following include files:
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/json.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/script.js"></script>
The 3rd is my own js file, which includes the following code:
function CallHandler()
{
$.ajax({
url: "Handlers/Handler1.ashx",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { 'Id': '101', 'Name': 'Chad' },
responseType: "json",
success: OnComplete,
error: OnFail
});
return false;
}
function CallHandler2()
{
var EmployeeSerialized = JSON.stringify(GetInput());
$.ajax({
url: "Handlers/Handler2.ashx",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: EmployeeSerialized,
responseType: "json",
success: OnComplete2,
error: OnFail
});
return false;
}
function GetInput()
{
var emp = new Object();
emp.Name = 'Brij';
emp.Age = '27';
return emp;
}
function OnComplete(result)
{
alert(result.ID + ' ' + result.Name + ' ' + result.Age + ' ' + result.Timestring);
}
function OnComplete2(result)
{
alert("Complete2");
}
function OnFail(result)
{
alert('Ajax failed' + result);
}
it is called from the following web page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/json.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="CallHandler" OnClientClick="CallHandler();" />
<asp:Button ID="Button2" runat="server" Text="CallHandler2" OnClientClick="CallHandler2();" />
</div>
</form>
</body>
</html>
My problem is that I can’t get both button events to work at the same time. For example, as the app stands now, if I include all 3 of the INCLUDE statements, only the Callhandler2 event successfully calls its server sides Httphandler. However, if I comment out the json.js INCLUDe file, the first one works, but the second one breaks. Clearly, the 2nd one breaks because it requires the Stringify function that was found in the removed js file. The question is, why does including the json.js file break the Callhandler2 event? There must be some kind of a clash.
Thinking that I should try the latest version of the jQuery lib, I tried to include version 1.6.2, but, when the CallHandler2 buton was pushed, this only introduced a JSON parsing error with the older jQuery library that didn’t occur before.
I find working with Javascript very frustrating compared to my experience with Server sided development for many reasons including the lack of good error messages. In this case, I don’t have an error message, the functionality just breaks.
Since I figured it may be difficult for you too to find the error, I posted my code. Here is my small Visual Studio 2010 project . If you download my project, you might have to reset the readonly flags on the files if you want to modify them. Sorry about that.
Update:
I see that the error is at line 554 of json.js:
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError('JSON.parse');
I see that the variable EmployeeSerialized evaluates to
{"Name":"Brij","Age":"27"}
and then the ajax call in the Callhandler2 function dies with the following error when I try to pass the EmployeeSerialized JSON string value as data to the Handler2 HttpHandler.
SCRIPT5022: Exception thrown and not caught
json.js, line 554 character 13
What, if anything, is wrong with this JSON string?
Its not your code, there is a conflict with json.js and jquery. Use json2.js file from https://github.com/douglascrockford/JSON-js and things should work much better.
See Json JQuery conflict For answers to a similar/same issue