AJAX calls to SharePoint web services using jQuery

jQuery can help you make AJAX calls against a SharePoint web service. In this example we are using lists.asmx web service to get all items in a list and to add a new item.
All you nees to do for this example to work is to create a new links list and name it ‘Links’. Add a few links to the list so that we have something to display. To test our AJAX calls create also a new web part page and add a ‘HTML Form Web Part’ to it.
As you will see, we will load the jQuery library from the web so there is no need to add it in your SharePoint server.
Paste the following code to the Source Editor of the HTML Form Web Part. Make sure that you use Internet Eplorer while editing (SharePoint will issue some errors if you try to use Firefox).

view sourceprint?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script type="text/javascript">

$(document).ready(LoadData);

function LoadData() {

var soapEnv = " \

<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/' xmlns:soap='http://schemas.microsoft.com/sharepoint/soap/'> \

<soapenv:Body> \

<soap:GetListItems> \

<soap:listName>Links</soap:listName> \

</soap:GetListItems> \

</soapenv:Body> \

</soapenv:Envelope>";

$.ajax({

url: "/_vti_bin/lists.asmx",

type: "POST",

dataType: "xml",

data: soapEnv,

complete: OnLinksFetched,

contentType: "text/xml; charset=\"utf-8\""

});

}

function OnLinksFetched(result) {

$("#links_ul").empty();

$(result.responseXML).find("z\\:row").each(function()

{

var uSplit = $(this).attr("ows_URL").split(", ");

var newLine = "<li><a href='" + uSplit[0] + "'>" + uSplit[1] + "</a></li>";

$("#links_ul").append(newLine);

});

}

function AddNewLink() {

var batch =

"<Batch OnError=\"Continue\"> \

<Method ID=\"1\" Cmd=\"New\"> \

<Field Name=\"URL\">" + $("#url").val() + ", " + $("#description").val() + "</Field> \

</Method> \

</Batch>";

var soapEnv = " \

<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/' xmlns:soap='http://schemas.microsoft.com/sharepoint/soap/'> \

<soapenv:Body> \

<soap:UpdateListItems> \

<soap:listName>Links</soap:listName> \

<soap:updates>" + batch + "</soap:updates> \

</soap:UpdateListItems> \

</soapenv:Body> \

</soapenv:Envelope>";

$.ajax({

url: "/_vti_bin/lists.asmx",

beforeSend: function(xhr) {

xhr.setRequestHeader("SOAPAction",

"http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");

},

type: "POST",

dataType: "xml",

data: soapEnv,

complete: LoadData,

contentType: "text/xml; charset=\"utf-8\""

});

}

</script>

<table>

<tr>

<td>URL: </td>

<td><input id="url" type="text"></td>

</tr>

<tr>

<td>Description: </td>

<td><input id="description" type="text"></td>

</tr>

<tr>

<td></td>

<td><input id="newLinkButton" type="button" value="Add new link" onclick="AddNewLink()" /></td>

</tr>

</table>

<br />

<ul id="links_ul"></ul>

We are using jQuery.ajax() to pass our soap envelope to the web service.
Please note that for xhr.setRequestHeader we can get the value for SOAPAction from the web service description.