SharePoint JS API 例子(一)：获取Web的属性

SharePoint 2013 Client API 分类

在SharePoint 2013中，Client API总共分为以下几种：

• .NET Framework 可再发行程序集
• JavaScript 库
• REST/OData 终结点
• Windows Phone 程序集
• Silverlight 可再发行程序集

关于如何选择使用哪种SharePoint API，请参考http://msdn.microsoft.com/zh-cn/library/jj164060.aspx

SP2013 JaveScript库

如果想在普通网页中,对SharePoint进行增删改查，最方便的就是使用JavaScript库。在每个SharePoint服务器上，%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\LAYOUTS 下面都有一组*.js文件库供调用。

下面是服务器端对象模型(Microsoft.SharePoint.dll)与JS对象模型的比较图：

服务器端对象模型	JS对象模型
Microsoft.SharePoint.SPContext	SP.ClientContext
Microsoft.SharePoint.SPSite	SP.Site
Microsoft.SharePoint.SPWeb	SP.Web
Microsoft.SharePoint.SPList	SP.List
Microsoft.SharePoint.SPListItem	SP.ListItem
Microsoft.SharePoint.SPField	SP.Field

 

除了命名上的不同，使用起来也有了很大的变化。最大的变化就是，JS对象模型需要通过load才能获取到对象内容。这样程序员可以手动控制什么时候load对象，以免页面加载过多内容。

比如在服务器端对象模型，获取一个web对象：

Using(SPWeb web=site.OpenWeb(“web1”))

{

                //这里可以使用web对象的属性了

}

但是使用JS对象模型，则需要比较麻烦的步骤。比如我需要获取web的属性，显示在页面上，则需要：

1. 在页面上定义一个按钮，点击之后获取web的信息，定义一个div，用来存放数据。

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <!-- 点击这个链接，获取Web属性 -->
        <a href="javascript:getWebDetails()" >点击这里获取web属性!</a>
    </h2>
    <!-- 获取结果显示在这里 -->
    <div id="displayDiv"></div>   
    </div>
</asp:Content>

 

      2. 调用JS API获取数据。

   

//这个方法查询获取当前web的对象
function getWebDetails() {
    //初始化ClientContext对象
    var context = new SP.ClientContext();
    //后去当前web，但是这个web还不能使用，因为没有获取属性
    web = context.get_web();
    //调用load方法
    context.load(web);
    //运行异步回调，成功或者失败后运行回调函数
    //也可以运行同步回调，但是如果网络慢的话，页面会假死，影响用户体验
    context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}

//如果函数成功运行，就会调用这个方法
function onSucceededCallback(sender, args) {
    //把web的信息组装成html
    var markup = '<p>Web Details: <br>';
    markup += 'Title: ' + web.get_title() + '<br>';
    markup += 'ID: ' + web.get_id() + '<br>';
    markup += 'Description: ' + web.get_description() + '<br>';
    markup += 'Created: ' + web.get_created() + '<br>';
    //把组装好的html显示到页面上
    $('#displayDiv').html(markup);
}

//如果函数成功失败，就会调用这个方法
function onFailedCallback(sender, args) {    
    var markup = '<p>The request failed: <br>';
    markup += 'Message: ' + args.get_message() + '<br>';    
    $('#displayDiv').html(markup);
}

运行结果为：

 

这个时候发现，读取出来的数据，并不是原来的网站集的，而是一个新的网站--SharePointApp5 。这是SharePoint 2013 APP的一个新的架构。APP运行在一个新生成的网站上，而不是安装APP的网站上。

也就是说，APP并不是万能的，并不能和SharePoint网站做所有的交互。