Я пытаюсь научиться писать более динамичные веб-сайты, использующие Ajax. Примеры, которые я нашел, похоже, передают только один строковый параметр в службу и из службы. Немного посмотрев, я увидел, что некоторые разработчики передают более одного значения, создавая объект, а затем сериализуя объект, используя JSON.
Итак, я хотел создать простое приложение HelloWorld, которое передает объекты в обоих направлениях. Например, когда служба сериализует объект .NET как JSOn и передает его обратно в браузер для анализа с помощью Javascript, а также пример, где объект Javascript сериализуется в JSON на стороне клиента и затем десериализуется в объект .NET на сервере. Чтобы сериализовать объект Javascript в JSON, я нашел подпрограмму javascript, json.js, на json.org,
В моем простом примере есть следующие подключаемые файлы:
<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>
Третий - мой собственный js-файл, который содержит следующий код:
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);
}
он вызывается со следующей веб-страницы:
<%@ 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>
Моя проблема в том, что я не могу заставить оба события кнопки работать одновременно. Например, в настоящее время приложение, если я включу все 3 оператора INCLUDE, только событие Callhandler2 успешно вызывает его стороны сервера Httphandler. Однако, если я закомментирую файл json.js INCLUDe, первый будет работать, а второй сломается. Ясно, что 2-й сбой, потому что он требует функцию Stringify, которая была найдена в удаленном файле js. Вопрос в том, почему включение файла json.js прерывает событие Callhandler2? Должно быть какое-то столкновение.
Думая, что мне следует попробовать самую последнюю версию библиотеки jQuery, я попытался включить версию 1.6.2, но, когда была нажата кнопка CallHandler2, это вызвало только ошибку синтаксического анализа JSON со старой библиотекой jQuery, которая происходят раньше.
Я нахожу работу с Javascript очень разочаровывающей по сравнению с моим опытом разработки на стороне сервера по многим причинам, включая отсутствие хороших сообщений об ошибках. В этом случае у меня нет сообщения об ошибке, функциональность просто ломается.
Поскольку я подумал, что вам может быть трудно найти ошибку, я опубликовал свой код. Вот мой маленький Visual Studio 2010 проект . Если вы загружаете мой проект, вам, возможно, придется сбросить флажки readonly на файлах, если вы хотите изменить их. Извини за это.
Обновление:
Я вижу, что ошибка в строке 554 файла json.js:
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError('JSON.parse');
Я вижу, что переменная EmployeeSerialized имеет значение
{"Name":"Brij","Age":"27"}
и затем вызов ajax в функции Callhandler2 умирает со следующей ошибкой, когда я пытаюсь передать строковое значение JSON EmployeeSerialized в качестве данных в HttpHandler Handler2.
SCRIPT5022: Exception thrown and not caught
json.js, line 554 character 13
Что, если вообще что-то не так с этой строкой JSON?