Calling SharePoint webservice using JQuery

This post will explains you about, how to connect and retrieve the SharePoint data’s by calling SharePoint webservices using JQuery. This will be helpful in displaying SharePoint content in Pages without using Server side scripts and other long coding; we can achieve that by using simple JQuery methods.

For that we need to download the JQuery file and SharePoint out of the box webservice.

Add the following line in SharePoint Masterpage or any other pages in SharePoint using SharePoint Designer or in Content-Editor webpart.

<script type=”text/javascript” src=”http://[Site]/js/jquery-1.3.2.min.js”></script>

Now we have to call the SharePoint Web Service by using jQuery.ajax(options) method.

$.ajax({

url: “http://[Site]/_vti_bin/Webs.asmx”,

type: “POST”,

dataType: “xml”,

data: request Data,

complete: Function(XMLHttpRequest, string),

contentType: “text/xml; charset=”utf-8″”

});

url: Specify the webservice url to call
type: Specify the type of request (get or post)
dataType: Type of data returned from server.
Data: The request data to be sent to the server
Complete: The funcutin to be called after the request finishes, The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request.

Example:

The following code used to get all the sub sites under the Site Collecion. We can paste this code on Content Editor web part itself

<script>

$(document).ready(function()

{

$.ajax(

{

url: “http://[Site]/_vti_bin/Webs.asmx”,

type: “POST”,

dataType: “xml”,

data: “<soap:Envelope xmlns:soap=’http://schemas.xmlsoap.org/soap/envelope/’>

<soap:Body>

<GetAllSubWebCollection xmlns=’http://schemas.microsoft.com/sharepoint/soap/’ />

</soap:Body>

</soap:Envelope>”,

complete: getWebs,

contentType: “text/xml; charset=”utf-8″”

error:errorData

});

}

);

function getWebs(xmlData, status) {

$(xmlData.responseXML).find(“Web”).each(function() {

$(“#dataweb”).append(“<li><a href='”+$(this).attr(“Url”)+”‘>” + $(this).attr(“Title”) + “</a></li>”);

});

}

function errorData(xmlData, status,errorThrown)

{

$(“#dataweb”).append(“<li>”+errorThrown+”</li>”);

}

</script>

<h3> Sub-Sites: </h3>

<ol id=”dataweb”></ol>

We can get the request data to be sent to the server on following url of web service,

http://[Site]/_vti_bin/Webs.asmx?op=GetAllSubWebCollection

POST /_vti_bin/Webs.asmx HTTP/1.1

Host: localhost

Content-Type: text/xml; charset=utf-8

Content-Length: length

SOAPAction: “http://schemas.microsoft.com/sharepoint/soap/GetAllSubWebCollection”

<?xml version=”1.0″ encoding=”utf-8″?>

<soap:Envelope xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xsd=”http://www.w3.org/2001/XMLSchema” xmlns:soap=”http://schemas.xmlsoap.org/soap/envelope/”>

<soap:Body>

<GetAllSubWebCollection xmlns=”http://schemas.microsoft.com/sharepoint/soap/” />

</soap:Body>

</soap:Envelope>

The complete option returns the output if the type of request is success otherwise the error option is called.

The output is in following format,

<Webs xmlns=”http://schemas.microsoft.com/sharepoint/soap/”>

<Web Title=”Site1_Name” Url=”http://Server_Name/sites/Site_Name” />

<Web Title=”Site2_Name” Url=”http://Server_Name/sites/Site_Name/Subsite_1″ />

<Web Title=”Site3_Name” Url=”http://Server_Name/sites/Site_Name/Subsite_1/Subsite_2″ />

.

.

</Webs>

By using this result, we can loop through this xml data and get the web site title and url, as mentioned in getWebs method.
Shantha Kumar
Shantha Kumar
Articles: 296

24,849 Comments

Comments are closed.