Content Editor Webpart（三）使用JSOM

JSOM是SharePoint 提供的一種客戶端API。開發人員只需要使用Javescript，就可以實現和SharePoint的交互，非常方便。

首先按照 (Content Editor Webpart（一）引用JQuery) 中的說明，引入JQuery。然後在Content Editor中添加代碼。

比如要獲取site的title 和description。

function retrieveWebSite(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    this.oWebsite = clientContext.get_web();

    clientContext.load(this.oWebsite);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

和Server OM不同的是，客戶端OM，必須要先調用Load方法，再調用execute方法，纔去與服務器交互。executeQueryAsync方法，定義了兩個事件，一個是處理成功的情況，一個處理失敗的情況。

比如，成功情況的處理函數爲：

function onQuerySucceeded(sender, args) {
    alert('Title: ' + this.oWebsite.get_title() + 
        ' Description: ' + this.oWebsite.get_description());
}

完成的代碼如下：

<div style="height: 200px;">
   <script type="text/javascript" src="/sites/apps/Style%20Library/jquery-1.10.2.min.js"></script><script>
   
   
   
   function retrieveWebSite(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    this.oWebsite = clientContext.get_web();

    clientContext.load(this.oWebsite);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    alert('Title: ' + this.oWebsite.get_title() + 
        ' Description: ' + this.oWebsite.get_description());
}
    
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}
   </script> 
   <button id="#getInfo" οnclick="retrieveWebSite(‘https://server/sites/site/internal’)">Get Site Info </button></div>

做完之後的效果：