2010年11月5日,星期五

SP2010 AJAX第3部分–使用带有HTTP处理程序的jQuery AJAX

  1. 将jQuery精简为基本要素 (技术)
  2. 使用JavaScript Client OM处理列表 (技术)
  3. 结合使用jQuery AJAX和HTTP处理程序(技术) - 本文
  4. 从HTTP处理程序返回JSON (技术)
  5. 为客户端OM和jQuery启用Intellisense (小费)
  6. 调试jQuery / JavaScript (小费)
  7. 构建AJAX应用程序时的有用工具 (小费)
  8. 将现有应用程序迁移到jQuery / AJAX

到目前为止,我们’我们使用jQuery进行页面操作,并使用Client OM与SharePoint进行通信。今天,我想谈谈其他事情,我认为这可能是本系列中最重要的文章。 jQuery和Client OM不太可能处理AJAX风格的SharePoint开发人员需要处理的每种情况。可以肯定的是,客户端OM令人惊讶地广泛,其处理方式不仅仅是从列表中获取项目。– that said, it’并非服务器API的完整镜像,无论如何,在编写与客户端代码对话的服务器代码时(例如JavaScript) 有时您需要完全控制围栏的两侧。那么,如何构建AJAX风格 不使用客户端OM的SharePoint应用程序(出于某种原因)?

让’首先考虑服务器端-有两种选择: 

  • 编写WCF服务(或者,实际上,‘classic’ .asmx web service)
  • 编写HTTP处理程序
  • 编写其他形式的服务器代码(与其他形式一样),它们通过HTTP生成响应
    • 例如从技术上讲,一个好的旧.aspx页可以用作服务器端组件。但是,由于其他一些原因,与其他选项相比,这是一个糟糕的选择(稍后会提到)

可以说,纯粹的路线是开发WCF服务–确实是SharePoint 2010’客户端OM的实现是WCF服务。如果你’重新体验过WCF,这可能对您来说是一个不错的选择。但是,我认为HTTP处理程序要简单一百倍,并且WCF的功能(例如传输灵活性,传递大文件的能力,安全性等)通常不需要“internal to the farm”SP2010 / AJAX应用。当然如果你’重新构建一个公开的API以向世界公开股票报价,那么情况可能会有所不同。另外,一种深奥的双色球推荐一注可能是使用常规的.aspx页之类的东西–但是,ASP.Net Web表单页面(即非MVC)的效率会降低,因为该页面将经历整个ASP.Net生命周期(Init,OnPreRender,Render等),’页面上没有任何ASP.Net控件。换句话说,我们将ASP.Net页用于其设计之外的其他用途。

因此,HTTP处理程序是一种简单有效的双色球推荐一注 建立AJAX风格的应用程式。对某些人来说’是一项新技术,对其他人来说,’s old news – but it’我认为这种双色球推荐一注是解锁编写AJAX应用程序功能的关键,无论是否’在SharePoint或纯.Net之上。

这项技术的妙处在于无限的可能性– you can AJAX-ify 任何东西,因为您将在处理程序中编写C#代码,然后只需从jQuery调用它即可。显然,这不能说是关于‘provided’API,例如客户端OM。对了我’d有兴趣听到关于WCF与HTTP处理程序的反对意见。

就客户端而言,如果我们正在谈论JavaScript(如本系列文章所述),那么我们需要一种调用双色球推荐一注‘HTTP resources’就像上面提到的JavaScript双色球推荐一注一样。这已经有很多年了,但是jQuery的出现意味着它’s 道路 比以前更简单–jQuery提供了几种AJAX双色球推荐一注来通过URL调用服务器资源,并将响应传递回JavaScript。一旦从服务器调用中获得了值(稍后将对此进行更多介绍),您只需使用第1部分中介绍的双色球推荐一注(用于更新页面的基本jQuery双色球推荐一注)即可向用户显示反馈,而无需重新加载页面。 jQuery AJAX双色球推荐一注是:

$ .get() 使用HTTP GET请求URL–在下面调用.ajax()
$ .post() 使用HTTP POST请求URL–在下面调用.ajax()
$ .ajax() 允许完全控制–公开全套参数
$ .getJson() 请求URL GET并使用$ .parseJSON解析JSON格式的响应

创建一个HTTP处理程序(服务器)

所以,我们’ve希望建立结合jQuery的HTTP处理程序’AJAX双色球推荐一注是一项强大的技术– now let’看一下细节。

HTTP处理程序

HTTP处理程序是一个.Net类,它实现 System.Web.IHttpHandler – the ProcessRequest() 双色球推荐一注是主要双色球推荐一注。在这里,您将编写代码来确定请求处理程序的URL时返回的内容。因此,如果指向.aspx页的URL返回HTML,则可以返回所需的任何内容–一个简单的字符串,一些更复杂的XML或JSON(本系列的下一篇文章)。一个返回字符串的简单处理程序如下所示:

using System;
using System.Web;
 
namespace COB.SPSaturday.Demos.Handlers
{
    public class DemoHandler : IHttpHandler
    {
        public bool IsReusable
        {
            // Return false in case your Managed Handler cannot be reused for another request.
            // Usually this would be false in case you have some state information preserved per request.
            get { return true; }
        }
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Write("From the handler 在  " + DateTime.Now);
        }
    }
}

.Net框架需要先了解这种处理程序,然后才能使用。这里有两个选择–将.ashx文件与上面的.cs文件相关联(在这种情况下,处理程序由.ashx的路径调用),或添加一个web.config条目来告诉.Net如何将请求路由到您的类(处理程序由您在这种情况下在web.config中定义的任何路径调用)。

使用.ashx

在项目中创建一个扩展名为.ashx的文件(除非我一直缺少它,否则没有VS项目模板),并使用WebHandler指令指向您的实现。之所以可行,是因为.ashx是特殊扩展名,.Net知道通过查找该类来解析类。 WebHandler 指示:

<%@ Assembly 名称="COB.SPSaturday.Demos,版本= 1.0.0.0,文化=中性,PublicKeyToken = 23afbf06fd91fa64" %>
<%@ WebHandler Language="C#" Class="COB.SPSaturday.Demos.Handlers.DemoHandler" CodeBehind="DemoHandler.cs" %>
使用web.config条目

添加条目(例如,通过 SPWebConfigModification) 像这样–请注意,您可以指定一个自定义路径/扩展名’出于任何原因而更可取:

<handlers>
    <!-- other handlers here -->
    <add name="DemoHandler" path="/_layouts/COB/DemoHandler.cob" verb="*" type="COB.SPSaturday.Demos.Handlers.DemoHandler, COB.SPSaturday.Demos,版本= 1.0.0.0,文化=中性,PublicKeyToken = 23afbf06fd91fa64" />
</handlers>

大多数人选择.ashx路由,因为它避免为应用程序使用的每个处理程序在web.config中定义某些内容。

调用HTTP处理程序(客户端)

之前,我们详细介绍了jQuery’向服务器发出请求的四种核心双色球推荐一注。这里’s一个示例(使用.get()双色球推荐一注):

<fieldset id="fldDemo1">
    <legend>Demo 1 - simple handler</legend>
    <div id="demo1Row" class="demoRow">
            <div class="demoControls">
                <button id="btnDemo1" type="button">Call handler</button>
            </div>
            <div class="demoResults">
                <span id="demo1Result" />
            </div>
            <div class="clearer" />
    </div>
    </fieldset>
    <script type="text/javascript">
    $('#btnDemo1')。click(function () {
        $.get('/_layouts/COB/DemoHandler.cob',
            function (data) {
                $('#demo1Result')。html(data);
            });
    });
    </script>

如您所见,关键是采用从服务器传递到jQuery回调的data属性,并使用jQuery’使用.html()之类的双色球推荐一注操纵页面的能力。嘿,presto,您现在无需完全回发就可以执行任何您想做的事情!

需要注意的是,如果您’在处理程序中重新修改数据时,一个好的做法是使其成为.post()请求,而不是.get()–当然,默认情况下,SharePoint不允许对GET请求进行更新,因此您 必须 无论如何都要做一些事情来解决(贫民窟替代品被设置 SPWeb.AllowUnsafeUpdates = true)。

付诸实践

现在我们’在了解了这些机制之后,请考虑一下在现实世界中如何推广使用:

  • 返回数据:
    • 如果你’重新返回非结构化数据(例如字符串),事情就很简单了(注:我省略提及的另一个jQuery AJAX双色球推荐一注是 $ .load() 进一步简化事情的双色球推荐一注)
    • 对于结构化数据(例如,对象),通常以JSON序列化字符串的形式返回–通常是XML首选的,但是XML也有很多示例
    • 由于设置页面元素的HTML非常简单,因此’试图让处理程序返回大量的硬编码HTML字符串(例如,当我们’重新更新页面的较大复杂区域)–确实我提到这是一个“SP2010 / jQuery / AJAX幸存者’s 技术”在我的SharePoint周六演讲中。这很好,但是更好的双色球推荐一注是使用新的jQuery模板功能– Jan Tielen’s jQuery模板和SharePoint 2010入门 是一个很棒的帖子。
  • 保理
    • 构造代码的一种好双色球推荐一注是让处理程序实现多个双色球推荐一注(例如,用于相关功能),并在AJAX请求中传递querystring参数以指示要执行的双色球推荐一注。你当然不’不需要为您可能实现的每种双色球推荐一注提供处理程序。

下次 - 从HTTP处理程序返回JSON

9条评论:

文卡特什·贾纳加(Venkatesh Janaga)说过...

你好

我想用jquery显示flexigrid。

我可以使用webservice显示flexigrid。

但是我想使用HttpHandler而不是Webservie。

这是我的jQuery代码。

如果我使用网址:'GetProductsHandler.asmx / GetProductList'表示其工作..

但我为httphandler使用它的相同错误。


请在这个问题上帮助我。



$(document).ready(新功能(){
//警报("hi");
$("#fgrdProduct").flexigrid
(
{

网址:'GetProductsHandler.ashx / GetProductList',
// url:'FlexGridWithXMLDoc / GetProductList',
数据类型:'xml',
colModel:[
{显示:'Id', name: 'Id',宽度:20,可排序:true,对齐:'left' },
{显示:'Name', name: 'Name',宽度:180,可排序:true,对齐:'left' },
{显示:'Description', name: 'Description',宽度:180,可排序:true,对齐:'left' },
{显示:'Unit', name: 'Unit',宽度:120,可排序:true,对齐:'left' },
{显示:'Unit Price', name: 'UnitPrice',宽度:130,可排序:true,对齐:'left', hide: false },
{显示:'Create Date', name: 'CreateDate',宽度:80,可排序:true,对齐:'left' }
],
搜索项目:[
{显示:'Name', name: 'Name' },
{显示:'Description', name: 'Description' },
{显示:'Unit', name: 'Unit' },
{显示:'Unit Price', name: 'UnitPrice' },
{显示:'Create Date', name: 'CreateDate' },
{显示:'Id', name: 'Id', isdefault: true }
],
排序名称:"Name",
排序:"asc",
usepager:是的,
标题:'List of Products',
useRp:是的,
rp:10,
showTableToggleBtn:是的,
宽度:805,
onSubmit:addFormData,
高度:200
}
);

//此函数将参数添加到flexigrid的职位。您也可以添加验证
//如果不输入则返回false'希望flexigrid提交
函数addFormData(){

//将表单对象传递给serializeArray将从所有对象中获取有效数据,但是,如果传递非表单对象,
//您必须指定数据将来自的输入元素
var dt = $('#sform').serializeArray();
$("#fgrdProduct").flexOptions({params:dt});
返回true;
}

$('#sform').submit
(
函数(){
$('#fgrdProduct').flexOptions({newp:1})。flexReload();
返回false;
}
);

});

克里斯·奥'Brien说过...

@Venkatesh,

不好意思'专门针对您的flexigrid组件'重新使用(我认为是'一个jQuery插件?)-I'我从来没有用过,所以可以'发表评论。插件的创建者应该可以帮助您解决问题。

祝好运,

克里斯。

说过...

你从哪儿得到的"/_layouts/COB/DemoHandler.cob"jQuery请求中的URL?
应该'是.ashx?我做到了,我没有'当然没有任何.cob。我有.ashx,但是我'我不确定如何构建从jQuery调用它的正确路径。

您能给我更多信息吗?

谢谢!很棒的文章!

克里斯·奥'Brien说过...

@emzero,

在这个例子中'我只是显示您的处理程序如何'不必是.ashx扩展名(例如Microsoft如何在SharePoint 2010中实现某些服务)。您需要按照上面部分中对.cob URL的调用中所述的方式访问web.config条目。

正如我总结的那样,.ashx更加容易,因为它'无需Web.config条目即可连接到您。

HTH,

克里斯。

罗吉尔说过...

@emzero @COB:

我也走了ashx的路,对不起克里斯,但是你'由于缺少很多解释步骤,因此该站点确实是逐步使用它的步骤:

http://www.lifeonplanetgroove.com/blog/index.php/2010/10/15/adding-and-deploying-generic-handlers-ashx-to-a-sharepoint-2010-visual-studio-project/

另外,此其他网站介绍了如何使用令牌,因此您可以替换

<%@ Assembly 名称="COB.SPSaturday.Demos,版本= 1.0.0.0,文化=中性,PublicKeyToken = 23afbf06fd91fa64" %>

与:

<%@ Assembly 名称="$ SharePoint.Project.AssemblyFullName $" %>

克里斯·奥'Brien说过...

@Rogier,

谢谢-对于那些需要更多有关HTTP处理程序的信息的有用参考。为这些文件启用令牌替换的好主意。

干杯,

克里斯。

弗雷德里克·拉图(Frederic Latour)说过...

你好
您说aspx涉及整个页面的生命周期,但是'如果您将网页双色球推荐一注用作背后的aspx代码的一部分,则不正确。
I'如果有人知道,我很想知道这两种双色球推荐一注的优缺点(ashx与aspx网页双色球推荐一注)。
据我所能想到的,从部署的角度来看,aspx双色球推荐一注似乎稍微容易一些。

克里斯·奥'Brien说过...

@Frederic,

非常真实但是,仅仅是我还是ASP.Net页面双色球推荐一注是大多数开发人员所忽略的利基技术?对我来说,我使用AJAX调用的许多东西都是通过服务层/ DAL进行操作的核心CRUD双色球推荐一注,'希望将逻辑(甚至是顶层)绑定到任何特定页面。

处理程序的避风港'对于我们来说部署起来很困难,它只是进入_Layouts目录中的子文件夹。

I'd也对支持页面双色球推荐一注的任何参数感兴趣。这里'是任何人的参考'd想了解有关ASP.Net页面双色球推荐一注的更多信息 http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

感谢您的评论,

克里斯。

driscollwebdev说过...

ashx文件的项目模板是 通用处理程序,在Web项目组中。