Demonstrate how to access SharePoint data in asynchronous Ajax Mode

Many people want to "partially refresh" A Part Of The SharePoint page. That is to say, the content of this part will not cause the PostBack of the whole page when it is refreshed. To quickly demonstrate the general implementation method, a project was created for demonstration at the weekend. The implementation function is simple:

1. a drop-down box is provided to list all document libraries on the current website. You can select a document library and load the folder architecture of this document library.
2. the folder structure is displayed through a Treeview.
3. When you click a folder node on the Treeview, the files contained in the folder are displayed in a grid table.
4. The grid table includes paging, sorting, search, and other functions.
5. All the operations above to load data from the SharePoint system do not trigger page refresh, but retrieve the required data from the SharePoint system through asynchronous Ajax. During data loading, user page operations are not interrupted.

The implementation of this demonstration is roughly as follows:

1. To allow the SharePoint system to publish the required data externally, you need to create several custom interfaces on the server. Although SharePoint has built-in Web Services interfaces, they do not necessarily contain the interface methods we need. In this example, I directly created several. ashx HTTP handler and clientCodeYou can directly access these. ashx files to call the server interface.

2. These. ashx files return the data requested by the client in JSON format in plain text mode. The reason for choosing the JSON format is that it is simple and common. In the scenario demonstrated here, Its Expressiveness is sufficient. Another reason for choosing JSON is that I plan to use jquery on the page to call the server interface, while jquery has good processing capabilities for JSON data.

3. The presentation on the client page does not create custom web parts, but uses HTML + js to access the service interface on the server and obtain the required data, and present the interface to the user. In short, it is Ajax. I chose jquery and used jquery's asynchronous Ajax capabilities to achieve the effects of asynchronous requests, refreshing, and non-blocking user page operations.

4. To facilitate the quick implementation of interfaces such as Treeview, grid table, and dialog, I directly found three jquery extensions: Treeview, datatables, and fancybox.

To help you better understand these ideas, I recorded a short video.

Download a video in WMV Format
Download Demo project source code

In SharePoint 2010, its built-in client om contains the ecmascript (JavaScript) class library, so that developers can directly use these class libraries to access SharePoint 2010 website data through page scripts.

Enjoy SharePoint!