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

xiang8

　　这个示例里，我们将用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.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 开发示例 系列