Веб-разработка? Это просто!

Итак, мы уже научились использовать объект XMLHttpRequest для фоновой загрузки данных с сервера, этот подход подробно описан в статье AJAX. 1 – Что это такое?. Однако, приведенный метод обладает одним недостатком – он не позволяет делать кроссдоменные запросы, то есть скрипт расположенный на домене easy4web.ru не может обратиться к домену vision4web.ru, а иногда этого так хочется. И здесь нам на помощь придет метод динамически подгружаемых скриптов <SCRIPT>.

Как известно, HTML-элемент <SCRIPT> может загружаться и с чужого домена, то есть аттрибут src у него может указывать вообще на любой домен. При этом, сразу после загрузки в нашу страницу, скрипт начнет выполняться. Таким образом, вставив в этот скрипт вызов некой заранее известной функции, мы можем организовать оповещение страницы о том, что скрипт загружен и готов к выполнению работы. А данные для для скрипта можно упаковать в пакет JSON. Такой комбинированный подход носит имя JSONP (JSON with padding).

На клиентской стороне мы выполняем такой код:

  var script = document.createElement("script");
  script.src = 'http://mydomain.ru/script.php?callback=func1';
  script.type = 'text/javascript';
  document.body.appendChild(script);

А по адресу  http://mydomain.ru/script.php поселим вот такой код:

<?php
echo($_REQUEST['callback'].'({"result":"Успешно!"})');
?>

На клиентской стороне также существует такой callback (то есть функция, которая сработает после загрузки скрипта):

function func1(response)
{
  alert(response.result);
}

Протестировать рабочий пример можно здесь: http://easy4web.ru/samples/jsonp/index.html, а скачать код вышеприведенного примера можно здесь: http://easy4web.ru/images/jsonp.zip

В тестовом примере, как можно увидеть, не происходит кроссдоменной загрузки – мы загружаем с того же домена, где расположен скрипт. Но вы можете заменить URL в этом месте кода:

<input type="button" value="Получить JSONP"
 onclick="getJSONP('http://easy4web.ru/samples/jsonp/handler.php',onSuccess)"/>

на ваш собственный или на наш тестовый handler, расположенный на другом домене, (вот здесь http://vision4web.ru/api/handler.php) и убедиться в том, что кроссдоменная загрузка прекрасно работает.

Ниже приведен скриншот сетевого взаимодействия:

Как видно, при нажатии на кнопку “Получить JSONP” происходит создание элемента <SCRIPT> с атрибутом src=http://easy4web.ru/samples/jsonp/handler.php, при этом браузер тут же начинает загружать этот скрипт с удаленного сервера. А загруженный скрипт представляет собой вызов функции onSuccess() с параметром {”result”:”Успешно!”}. После загрузки скрипта он тут же начинает выполняться, тем самым выполняя функцию OnSuccess, которая, получив в качестве аргумента JSON-объект, обрабатывает его и совершает все необходимые действия, обусловленные логикой приложения.

Этот подход я собираюсь использовать при реализации многих полезных сервисов в рамках проекта easyAPI.

Прочтите еще:

• 2. easyAPI. Удаленная загрузка XML.
• Начинаем создавать набор сервисов easyAPI
• AJAX. 1 – Что это такое?
• AJAX с помощью jQuery и ASP.NET web-сервисов

Если вы создаете сайты под ASP.NET, то возможно вам уже довелось использовать AJAX-framework, предоставляемый Microsoft. Тот самый, что использует ScriptManager, rfк в примере, приведенном ниже:

1) Содержимое страницы Default.aspx:

<asp:ScriptManager ID="MainSM" ScriptMode="Debug" runat="server">
 <Services>
 <asp:ServiceReference Path="~/usersrv.asmx" InlineScript="false" />
 </Services>
 </asp:ScriptManager>

2) Содержимое файла script.js:

// вызов ajax-метода GetPoint
usersrv.GetPoint(id,OnUSGetPointSucc,OnUSGetPointErr);
// callback успешного вызова
function OnUSGetPointSucc(res)
{
 alert('success');
}
// callback ошибки
function OnUSGetPointErr(err)
{
 alert('success');
}

3) Содержимое файла usersrv.asmx:

<%@ WebService Language="C#" CodeBehind="~/App_Code/usersrv.cs" %>

4) Содержимое файла usersrv.cs:

[WebService(Namespace = "http://tempuri.org/")]
[System.Web.Script.Services.ScriptService]
public class usersrv : System.Web.Services.WebService
{
[WebMethod]
public Dictionary<string, object> GetPoint(long p_id)
 {
 Dictionary<string, object> res = new Dictionary<string, object>();
 try
 {
   // готовим возвращаемые параметры и сохраняем их в res
 }
 catch (Exception)
 {
 res["Error"] = U.GTFR("userpoints_err");
 }
 return res;
 }
}

Этот метод достаточно прост и удобен, если бы не одно “но” – он весит 132 Кб. И обладает еще одним интересным свойством: если в нашем проекте есть несколько страниц, использующих AJAX, то каждая из них будет заново загружать этот скрипт, потому что при загрузке скрипта на странице используется примерно следующий URL http://domainname/ScriptResource.axd?d=TvjJs2RlM8MX3pIUhEsdnZKUzGh-9Wr9nvNBZJbxf-xzq-Wvzbpj6FfMJqZqOPR8Pku52J2zBqleUlYtVE8XCyfyo3kcbSnhbwzYc2LkdfQ1&t=ffffffffee41303f и для каждой страницы в пределах вашего проекта будет свой ScriptManager, а значит и свой уникальный ID в query-string. А значит скрипт этот для каждой страницы будет браться не из кэша, а запрашиваться заново с сервера.

В общем, мне все это не понравилось и я заинтересовался, как можно сэкономить трафик и перейти на AJAX.jQuery. Тем более, что он уже использовался в этом же проекте для других целей. Сказано – сделано! И вот какое решение я нашел.

Собственно, модификации пришлось подвергнуть как сами клиентские JavaScript-ы, так и методы, вызываемые на стороне сервера. Связано это с тем, что мне хотелось передавать в качестве параметров для web-сервиса сложные объекты, а не просто строки и целые значения. И получать в ответ хотелось тоже сложные объекты, а не просто строки.

Все это можно легко и просто сделать, передавая как в ту так и в другую сторону все же строки, но строки в формате JSON, который является родным для JavaScript. Да к тому же ASP.NET обладает встроенными возможностями сериализации/десериализации JSON.

Правда, для сериализации объекта в JSON на клиентской стороне пришлось использовать еще одну дополнительную библиотеку json2.js. Таким образом, обе библиотеки весят около 67 Кб. Да плюс ко всему в случае нескольких ajax-страниц в проекте, скрипт загрузится всего один раз, и для остальных страниц будет браться из кэша браузера.

Но от слов – к делу!  Вот содержимое скрипта, выполняемого на клиентской стороне:

// готовим передаваемые параметры в переменную par, здесь - всего лишь эмуляция
 var par = new Object();
 par.a = 5;
 par.b = 'data';
 par.c = new Array();
 par.c[0] = 5;
 par.c[1] = 10;
 // сериализуем объект
 var ser = JSON.stringify(par);
 // формируем ajax-запрос
 $.ajax({
 type: "POST",
 url: "usersrv.asmx/GetPoint",
 data: "{'par':'"+ser+"'}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(r) {
 var res=r.d;
 // сериализуем для наглядности полученные данные и выводим их
на страницу
 // в реальном приложении здесь мы просто будем использовать готовые
данные
 // в переменной res без сериализации
 document.getElementById("result").innerHTML=JSON.stringify(r);
 },
 error: function(err) {
 // обработка ошибки
 alert('error: '+err.responseText);
 }
 });
 }

А вот содержимое usersrv.cs:

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Serialization;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class usersrv : System.Web.Services.WebService
{
 public usersrv() { }

 [WebMethod]
 public ResponseType GetPoint(string par)
 {
 ResponseType response = new ResponseType();
 RequestType request = new RequestType();
 try
 {
 // десериализуем полученные параметры
 JavaScriptSerializer ser = new JavaScriptSerializer();
 request = ser.Deserialize<RequestType>(par);
 }
 catch (Exception)
 {
 response.isError = true;
 response.message = "Parameters is invalid";
 return response;
 }

 // преобразуем переданные параметры и готовим ответ
 // здесь - всего лишь эмуляция обработки данных
 if (request.c != null && request.a == request.c.Length)
 {
 response.isError = false;
 response.message = "That's good";
 }
 else
 {
 response.isError = true;
 response.message = "Length is not the same";
 }
 return response;
 }
}

А вот описание двух воспомогательных классов:

public class RequestType
{
    public int a;
    public string b;
    public int[] c;
}
public class ResponseType
{
    public string message;
    public bool isError;
}

Разумеется, они могут быть сколь угодно сложными. Думаю, что суть алгоритма ясна из комментариев в тексте программы.

Ссылка на архив с готовым проектом здесь.

Прочтите еще:

• Реализация чата на ASP.NET с использованием Long Polling
• Кросдоменный JavaScript (JSONP)
• Разбор XML-файлов в .NET
• AJAX. 1 – Что это такое?