SharePoint 2013 APP 开发示例（四）JQuery访问REST

这个示例里，我们将用JQuery AJAX去发送一个 REST请求，并查看返回结果。为了让我们更好地理解REST 接口，我们将添加一个输入框让用户可以指定REST的URL，这将让我们尝试着用构造的URL从SharePoint去获取信息。

首先，我们将创建一个 SharePoint-hosted app。然后我们将在APP的default页面添加输入框，最后我们将添加一个 view-model 去请求 REST并显示结果。

1. 打开 Visual Studio 2012.
2. 创建SharePoint 2013 app.
3. 选择SharePoint-hosted

4. 打开Default.aspx 页面.
5.添加 Knockout library.

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" ></script>

6. 替换PlaceHolderMain里面的内容:

<div>
        <input type="text" data-bind="value: url" size="100" />
        <br />
        <br />
        <select data-bind="value: format">
            <option value="application/json;odata=verbose">application/json;odata=verbose</option>
            <option value="application/atom-xml">application/atom-xml</option>
        </select>
        <br />
        <br />        
        <input data-bind="click: onRunRequest" type="button" value="Execute the REST Request" />
        <br />
        <br />
        <h1 data-bind="text: status"></h1>
        <p data-bind="text: message" />
    </div>

7. 保存并关闭Default.aspx.
这个页面将提供一个 text box 让用户可以输入REST的URL, 一个drop-down list让用户可以选择数据格式，一个 button 去请求REST。返回的结果将显示在页面最下方。

8. 打开 App.js .
9. 替换下面的内容:

var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

$(function () { ko.applyBindings(new defaultViewModel()); });

function defaultViewModel() {
    var self = this;

    self.status = ko.observable();
    self.message = ko.observable();
    self.url = ko.observable("/_api/web");
    self.format = ko.observable();

    self.result = null;

    self.onRunRequest = function () {
        jQuery.ajax({
            url: appweburl + self.url(),
            type: "GET",
            headers: {
                "accept": self.format(),
            },
            success: Function.createDelegate(self, self.onComplete),
            error: Function.createDelegate(self, self.onComplete)
        });
    };

    self.onComplete = function (data, status) {
        self.status(status);

        if (self.format() == 'application/atom-xml') {
            self.result = data;
            self.message((new XMLSerializer()).serializeToString(data));
        } else {
            self.result = data.d;
            self.message(JSON.stringify(data));
        }
    }
}

// Utility routine
function getQueryStringParameter(paramToRetrieve) {
    var params =
        document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

onRunRequest() function 初始化异步的 REST 请求
•• url—它被用来访问app web，因为这个页面在同一个domain里运行，所以它不是跨domain的请求。
•• type—指定是 GET 操作，而不是 POST.
•• headers—我们用"accept" header 来指定我们希望收到的数据格式
•• success—请求成功的事件
•• error—请求成功但有error的事件
onComplete() function 同时处理了有error和没有error的情况.

10. 保存App.js file.
11. 按 F5 开始debug.
12. 当Default.aspx page 打开的，按 execute 按钮将会看到JSON格式的结果：

很多属性都被返回到了 _deferred 里. 这些值没有被选在query里，但是能用REST请求的URL获取到.

13.选择application/atom-xml .
14. 按 execute 按钮将会看到XML格式的结果。
试着用其它REST URL看能返回什么数据, 我们可以在返回的数据里找到很多uri，如_api/Web/Lists等。

SharePoint 2013 APP 开发示例系列

SharePoint 2013 APP 开发示例 （四）JQuery访问REST

SharePoint 2013 APP 开发示例（四）JQuery访问REST