65.9K
CodeProject 正在变化。 阅读更多。
Home

Ajaxion - 独立 AJAX - 第 2 部分（共 2 部分）- C# 和 Java 示例

radumi
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.97/5 (32投票s)

2008 年 7 月 8 日

CPOL

5分钟阅读

viewsIcon

56814

downloadIcon

1428

一篇关于如何保持 AJAX 简单化并充分利用它的文章。

Screenshot - Screenshot.jpg

引言

第 1 部分 文章介绍了独立 AJAX 和 REST 如何改进 SDLC：敏捷开发、Ajax、Web 设计、RESTful 服务器端。应该能够快速面对客户，在我们的软件中构建更可靠、更具可伸缩性的系统，而这不仅仅是关于昂贵的技术。 

这篇文章最初是关于“保持 JavaScript 简单”……除非你别无选择。最佳的生产力和结果基于理解，它们不一定依赖于沉重的框架和技术……也许是标准。 这种方法符合 RESTful 服务器端的使用 - REST 更像是一种标准而不是一种技术，所以我们在削减技术方面保持一致 - 然后在客户端的 HTML / CSS / Javascript 中，我们可以最终谈论像 jQuery、浏览器/客户端代理等技术。这篇文章展示了 Ajax 是如何通过 XmlHttpRequest - 用于学习目的或如果你不使用 jQuery - 如果了解了这一点，那么如今的 Ajax 调用将是使用 jQuery 的方式。 

背景

NET 源文件包含嵌入到 ASP.NET 应用程序中的 Ajaxion；这是第一个方法；对于独立 Ajax，请遵循“独立 Ajax 演示”链接。Java 源文件仅包含独立 Ajax 演示（顺便说一下，主题是独立 Ajax，而不是 .NET 与 Java 的比较）。ajaxion.js 在两者中是相同的，页面事件处理程序。*.js 遵循相同的思路，服务器端……有点不同 - C#，Java……“有点”是因为服务器端已经是面向服务的 - 这比语言更重要：.NET 服务器端主要依赖于 Web 服务，Java 服务器端是服务-Servlet（两者尚未 RESTful！）。Java HTTP Servlet 是 HTML、XML 或其他任何内容的非常简单的渲染 - 强调服务方法，在应用程序服务器上运行（你可以部署到 Tomcat - 编码你可以使用 Eclipse、Oracle JDeveloper 等）。 

这个想法是众所周知的：一个 Ajax JavaScript 层作用于浏览器中的“启用 Ajax”页面（实际上是它的 HTML，即使它是由某些 ASP 或 JSP 或 PHP 渲染的……）和 Web（应用）服务器之间。Ajaxion JavaScript 层定义了 Ajaxion 事件，封装了 Ajax 调用以消费 Web 应用服务器上的服务，我们在其中运行一些 C# 或 Java 代码。让我们将 Ajax 调用重命名为 HTTP 调用，然后我们可以设计服务器端来消费相同的其他服务，我们几乎完成了，接近更好的结构和企业级的互操作性……从一开始，由于 REST，这是可能的。Ajaxion JavaScript 层使用 XmlHttpRequest 进行 GET、PUT、POST、DELETE “HTTP 调用”。附件示例仅展示了如何进行 Ajax 调用，而目前不展示如何使其符合 RESTful。 

因此，从简化的视角来看，独立 Ajax 是 REST 的一种 UI 视角：HTML，JavaScript Ajax 调用层，HTTP 消费面向服务的 REST 服务器端。为什么不，让我们考虑 DLR，基于动态语言的应用程序将多么强大，也许能为企业带来很多“高响应的智能客户端风味”，而不是那些在繁重的视图状态或臃肿的会话中消亡的 XServerPages Web 应用程序。将如此多的语言绑定在一起“很酷”……但是……即使大多数程序员喜欢 C#，许多应用程序也是 C# 和 VB.NET 的混合体，延续了 VB6 和 ASP 的遗留。在 .NET 平台现在，你需要知道“比技术更多的语言”——Python、Ruby 等正在兴起——.NET 仍处于早期阶段；在 Java 中，你主要需要了解 EJB 等标准，核心是经过充分验证、紧凑且稳定的……现在面对动态语言的兴起……所以让我们用当前的标​​准构建明天的应用程序……无需学习曲线！

代码简要指南 

Ajaxion 依赖于

  • ajaxion.js - 其中包含一个类，如 JavaScript，用于发起 Ajax 调用
  • 其余的 *.js 定义了 Ajaxion 事件，其中包含 Ajax 调用及其回调 JavaScript 函数 - 用于更新宿主页面的目标 HTML 元素
  • C# / Java 类 AjaxionEventConsumer，它在服务器端处理 Ajaxion 事件（它们的 Ajax 调用）

如何通过 Ajaxion 获取启用了 Ajax 的 HTML 元素

将 Ajaxion JavaScript 注册到宿主页面使用，例如，参见 Default.aspx 的 head 部分。选择一个 XHTML 元素事件来触发 Ajaxion 事件，例如 onclick （你也可以在 body onload 中注册它们）

onclick="ajaxion.postUrl('AjaxCallbackWs.asmx/GetImageUrl', 'imageUrl', GetImageUrl)"

// or e.g. set the HTML event from the C# class of the host page
btnAjaxWsGetImgUrl.Attributes.Add("onClick",
    "ajaxion.postUrl('AjaxCallbackWs.asmx/GetImageUrl',
    'imageUrl', GetImageUrl)");

// be aware, the both above methods were used

//or use body onload (in the Java example):
function onLoad()
{
   var handler = "ajaxion.get('getText', getTextCallback)";
   window.document.getElementById("btn").setAttribute("onclick", handler);
}

and in the page:
<body onload="onLoad()" ...

在宿主页面特定的脚本中（例如，DefaultAspx_AjaxionEvents.js）注册 Ajaxion 事件（例如，imageUrl）和回调函数（例如，GetImageUrl）

// Register Ajaxion event "imageUrl"

function parseEventParam(eventId)
{
    ajaxion.beginEvent(eventId);
    var parameters = '';

    switch (eventId)
    {
        ...
        case 'imageUrl' :
            ajaxion.setEventMonior('imageUrl', '');
            parameters = window.document.getElementById('dropDown').value;
            break;
        ...
    }
    return parameters;
}

// You can override functions from ajaxion.js like:
// Override ajaxion.beginEvent for the current page
ajaxion.beginEvent = beginEvent;
function beginEvent(eventId)
{
   // Page specific code
}

// Ajaxion event "imageUrl" callback function.
// This updates the host page after the Ajax call for the
// Ajaxion event was consumed.

function GetImageUrl()
{
    if (ajaxion.isEventConsumed())
    {
        window.document.getElementById('image').src = ajaxion.request.responseText;
        window.document.getElementById('image').title = ajaxion.GetParameters();
        ajaxion.endEvent();
    }
}

最后但同样重要的是，用于处理 Ajaxion 事件的 C# / Java 代码

[WebMethod]
public void GetImageUrl()
{
   try
    {
        AjaxionEventConsumer consumer = new AjaxionEventConsumer(this.Context, 700);
        consumer.ConsumeEvent("images/" + consumer.Parameters, "text/html");
    }
    catch (System.Threading.ThreadAbortException)
    {}
    catch (Exception ex)
    {
        FileLog.WriteLogLn("\nException: " + ex.Message + "\nTrace: " + ex.StackTrace);
    }
}

// Or the Java code:
public void service(HttpServletRequest request, HttpServletResponse response)
{
    try
    {
        if (consumer == null)
            consumer = new AjaxionEventConsumer(request, response, 1000);
        else
            consumer.init(request, response, 1000);

        String eventId = consumer.getEventId();
        String param = consumer.getParameters();
        String contentType = "text/html; charset=windows-1252";

        if (eventId.equals(GET_TEXT))
        {
           consumer.beginResponse(contentType);
           consumer.respondString("ajaxionTest.sevice handled POST or GET");
           consumer.respondString(eventId + " [ " + param + " ]");
           consumer.endResponse();
        }
        else
           consumer.consumeEvent("ajaxionTest.sevice handled an event", contentType);

         String message = "ajaxionTest.sevice handled : " + eventId + " 
                    [ " + param + " ]";
         System.out.println(message);
         FileLog.WriteLn(new FileLog().getFileName(), message);
    }
   catch (Exception ex)
   {
        String message = "ajaxionTest.sevice exception : " + ex.getMessage();
        System.out.println(message);
        FileLog.WriteLn(new FileLog().getFileName(), message);
   }
}

关注点

演示的功能（按出现顺序）是

  • 两个文本框之间的一些文本交换，但 Ajaxion 调用针对的是不同的 URL-页面和 WS
  • XML 测试，使用 Web 服务调用。在这里处理 XML 很方便（除非别无选择），而不是在 JavaScript 中处理，因为 JavaScript 中总是会遇到浏览器不兼容性 - 所以让我们保持简单
  • 一种启动和监视服务器上运行线程的方法
  • 一些图像检索
  • 一些拖放
  • 最后但同样重要的是，一个用户控件演示，这是 Ajaxion 的一个很好的方法，Ajaxion 主要是 XmlHttpRequest 包装器基础，而不是最终的 Web UI 花哨效果提供者
  • 目前，这可能看起来不如 e.g. MagicAjax （顺便说一句，它很棒）那样方便，但这里的重点是消除“X”SP 层，以便服务器端更多地负责逻辑而不是渲染 XHTML……而且……你可以完全控制整个 Ajax 回合，而无需挂钩和重新编译任何库代码；所以只需保持事件处理程序 JavaScript 简单。随着时间的推移，我将更新本文以简化代码，并提供一种更简短的方式来使用类似控件的特性，因为“X”SP 具有控件/自定义标签。

希望这有所帮助。

历史

  • 2008 年 7 月 8 日：初始发布
© . All rights reserved.