开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

示范如何以异步AJAX方式访问SharePoint数据

简介:
+关注继续查看

很多人都希望在SharePoint页面上能让某个部分能"局部刷新",也就是说,这个部分的内容在刷新的时候,不会造成整个页面的Postback。为了快速演示大致的实现方法,在周末的时候做了一个用来示范的项目,它实现的功能很简单: 

1、提供给用户一个下拉框,列出当前网站所有的文档库,用户可以选择一个文档库,并载入此文档库的文件夹架构。 
2、文件夹结构通过一个TreeView来进行展现。 
3、当用户在TreeView上点击一个文件夹节点时,将文件夹所包含的文件显示在一个Grid Table中。 
4、在Grid Table中,包括了分页、排序、搜索等功能。 
5、上面的所有从SharePoint系统中载入数据的操作,都不会引发页面刷新,而是通过异步AJAX方式从SharePoint系统中获取所需的数据。载入数据的过程中,用户的页面操作不会被打断。 

这个示范的实现思路大致如下: 

1、为了能让SharePoint系统对外发布所需的数据,需要在服务器上创建几个定制的接口。虽然SharePoint内置了Web Services接口,但其中不一定会包含我们所需的接口方法。在这个示范中,为了简单起见,我直接创建了几个.ashx Http Handler,客户端的代码可以通过直接访问这几个.ashx文件,来调用服务器端的接口。 

2、这几个.ashx文件会以JSON格式纯文本方式,将客户端请求的数据返回。选择JSON格式的理由是,它足够简单且通用,在这里示范的场景中,其表现力足够用了。另外一个选择JSON的理由是,我打算在页面上使用jQuery来调用服务器端的接口,而jQuery对JSON格式的数据有很好的处理能力。 

3、客户端页面上的展现,没有创建自定义Web Part,而是用HTML + JS的方式,来访问服务器端的服务接口,获取到所需数据,并将界面呈现给用户。简单来说,就是AJAX啦。我选择使用jQuery,并利用了jQuery异步AJAX的能力,实现异步请求、无刷新、不阻塞用户页面操作的效果。 

4、为了方便快速的实现TreeView、Grid Table、Dialog等界面效果,我直接找了三个jQuery插件:TreeViewDataTablesFancyBox。 

为了帮助大家更容易了解这些思路,我录了一个简短的视频。 

 

下载WMV格式视频 
下载示范项目源码 

在SharePoint 2010中,其内置提供的Client OM包含了ECMAScript(JavaScript)类库,这样开发人员可以直接使用这些类库,通过页面脚本的方式访问SharePoint 2010网站数据。 

Enjoy SharePoint !





本文转自 kaneb0y 51CTO博客,原文链接:http://blog.51cto.com/kaneboy/285912,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax-hook+ selenium抓取带参数的 Ajax 数据
ajax-hook+ selenium抓取带参数的 Ajax 数据
0 0
Ajax传递json数据
Ajax传递json数据
0 0
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
0 0
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
0 0
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据
0 0
牛客刷题——前端面试【三】谈一谈Promise、封装ajax、json数据使用
如何使用Promise、封装ajax、json数据以下方法告诉你。
0 0
ES6中 Promise 概念、基本用法和封装ajax(json数据使用)
Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。
0 0
Select下拉框使用ajax异步绑定数据
Select下拉框使用ajax异步绑定数据
0 0
JS:使用Mock.js生成随机数据,拦截 Ajax 请求
JS:使用Mock.js生成随机数据,拦截 Ajax 请求
0 0
ajax-hook+ selenium抓取带参数的 Ajax 数据
ajax-hook+ selenium抓取带参数的 Ajax 数据
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载