博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API)
阅读量:6340 次
发布时间:2019-06-22

本文共 5037 字,大约阅读时间需要 16 分钟。

      虽然 JQuery 也能通过授权header实现跨域, 但SharePoint 提供了更简单的方法,它被实现在SP.RequestExecutor里 。它能访问跨域的服务包括REST API, 本示例将使用它在auto-hosted的app里从远程web site去访问SharePoint。 SP.RequestExecutor 对象包含了一个独立的客户端对象的 JavaScript 库。RequestExecutor 的使用非常像 JQuery ajax() function。它用js 代码管理请求和响应。实事上  RequestExecutor能替代JQuery , 因为它也能很好的实现功能,甚至是没有跨域的情况。

针对下列情况,RequestExecutor 是非常有用的:

1. 从web browser 访问REST API .
2. 需要跨域, 像从远程的 web 页面到SharePoint app web.
3. 在SharePoint farm外访问 web service .

      当使用RequestExecutor去访问外部的 web services时,远程的 web service应该要注册在 AppManifest 文件里,以便在安装app时让用户授权。本例 RequestExecutor 没有直接访问 service,它通过一个内建在SharePoint里代理页面去请求service并返回响应到页面,要让JavaScript允许跨域service的调用,否则就会被web bowser阻塞。

本例,我们将演示怎么使用它。我们将在auto-hosted 的app,然后加入一个输入框到它的default 页面,最后我们将增加一个view-model去请求REST并显示结果。 

1. 打开Visual Studio 2012.
2. 创建一个新的SharePoint 2013 app.
3. 选择auto-hosted 
4. 打开 Default.aspx 页面( Pages 文件夹)
5. 增加Microsoft AJAX toolkit  引用,SP.RequestExecutor将用到它:

6. 添加 JQuery 和Knockout.

7. 替换form里的内容如下:

8. 保存Default.aspx.
9. 打开Default.aspx.cs .
10. 注释掉  Page_Load 里的代码.
11. 保存Default.aspx.cs .
12. 在远程 web site 项目的Script文件夹里, 创建一个文件  App.js .

13. 替换下面的view-model 代码

var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));$().ready(function () {    $.getScript(hostweburl + '/_layouts/15/sp.runtime.debug.js',                function () {                    $.getScript(hostweburl + '/_layouts/15/sp.debug.js',                                function () {                                    $.getScript(hostweburl + '/_layouts/15/sp.RequestExecutor.js',                                                function () {                                                    ko.applyBindings(new defaultViewModel());                                                });                                })                })});function defaultViewModel() {    var self = this;    self.status = ko.observable();    self.message = ko.observable();    self.url = ko.observable("/_api/SP.AppContextSite(@target)/web/lists?@target='" + hostweburl + "'");    self.format = ko.observable();    self.result = null;    self.onRunRequest = function () {        var executor = new SP.RequestExecutor(appweburl);        executor.executeAsync(            {                url: appweburl + self.url(),                method: "GET",                headers: {                    "accept": self.format(),                },                success: Function.createDelegate(self, self.onComplete),                error: Function.createDelegate(self, self.onComplete)            }        );    };    self.onComplete = function (data) {        self.status(data.statusText);        self.message(data.body);        if (self.format() == 'application/atom-xml')            self.result = $(data.body)[1];        else            self.result = JSON.parse(data.body).d;    }}// Utility routinefunction 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];    }}

      这段代码首先从SharePoint里加载几个JavaScript 库,这些库不能放到ASP文件里,因为它们属于SharePoint,而这个页面是在SharePoint app web外面运行的,因此不能通直接在ASPX里引用。实际上,每个文件的URL是在加载时拼出来的,一旦所有需要的script被加载,view-model 对象就和以前一样被创建并被绑定到form。下一个变化是default的 REST URL:

self.url = ko.observable("/_api/SP.AppContextSite(@target)/web/lists?@target='" + hostweburl + "'");

这一行是使用SP.AppContextSite让URL去访问host web site里的list列表

onRunRequest() function 很像JQuery.Ajax,只不过它要先创建SP.RequestExecutor 对象.

var executor = new SP.RequestExecutor(appweburl);

当从我们的ap访问SharePoint REST API 时, 我们将使用app web作为目的地,这仅仅是表明请求应该送到哪,并不是最终的目的地。本例我们将使用SP.AppContextSite 对象访问host site. 如果在executeAsyn() function里提供的URL是在SharePoint外面,app web上的跨域代理将被转发请求。

self.onComplete = function (data) {        self.status(data.statusText);        self.message(data.body);        if (self.format() == 'application/atom-xml')            self.result = $(data.body)[1];        else            self.result = JSON.parse(data.body).d;    }

RequestExecutor 返回了一个 JavaScript 对象,包含status 和 body 。返回的结果是字符串,而不考虑请求的格式,这个字符串里的数据是JSON或XML格式。

14. 保存App.js file.
如果我们这时去运行这个solution,它将fail,因为它不能找到app web。一个 app web 仅仅被创建于需要时,因为我们创建了的是 auto-hosted app ,还没有在app web项目里添加任何lists或其它对象, 所以当app安装时没有app web 会被创建。因为我们需要从app web访问REST API,这不会运行正常,为了强制创建一个最小的 app web, 我们将添加一个空的element到这个项目里。
15. 右击 SharePoint app项目(不是web项目)
16. Select Add ➤ New Item….
17. 选择Empty Element item 并点击 Add, 名字不重要,随便填。
18. 按F5 运行 app.
运行的结果应该跟上一个示例差不多,不同的是这个请求是在远程web app(SharePoint farm外面)执行的,你将会看到自动加上了access token。

 

转载地址:http://inhoa.baihongyu.com/

你可能感兴趣的文章
理解并取证:IPv6与IPv4在报文结构上的区别
查看>>
EOS主网上线只是开始,如何运营决定未来
查看>>
不用Visual Studio,5分钟轻松实现一张报表
查看>>
(译)如何使用cocos2d和box2d来制作一个Breakout游戏:第一部分
查看>>
计算机图形学(一) 图形系统综述
查看>>
持续集成(CI)- 几种测试的区别(摘录)
查看>>
多用户虚拟Web3D环境Deep MatrixIP9 1.04发布
查看>>
求高手,求解释
查看>>
[MSSQL]NTILE另类分页有么有?!
查看>>
winform datagridview 通过弹出小窗口来隐藏列 和冻结窗口
查看>>
Jquery闪烁提示特效
查看>>
最佳6款用于移动网站开发的 jQuery 图片滑块插件
查看>>
C++ String
查看>>
获取系统托盘图标的坐标及文本
查看>>
log4j Test
查看>>
HDU 1255 覆盖的面积(矩形面积交)
查看>>
SQL数据库无法附加,提示 MDF" 已压缩,但未驻留在只读数据库或文件组中。必须将此文件解压缩。...
查看>>
第二十一章流 3用cin输入
查看>>
在workflow中,无法为实例 ID“...”传递接口类型“...”上的事件“...” 问题的解决方法。...
查看>>
获取SQL数据库中的数据库名、所有表名、所有字段名、列描述
查看>>