JQuery example to query a SharePoint list (I am consuming Announcement List) I will tell you at end how to do automatically loading

data as soon as page is loaded. First take a look at the steps and follow as is. I am going to use JQuery so, you have to download latest JQuery file. I am attaching the same with this mail, which you can copy and paste to the required location and change it appropriately. I will tell you where it comes.

y y

Create a sample web-part. Initially I am going to add some script and html controls to web part page like below.
<script src="/_layouts/Srini/jquery.js"></script> <script language = "javascript"> </script> <a href="#" onclick="GetAnnouncementData()">Test</a> <ul id="AnnouncementData"></ul>

You have to copy the JQuery to the folder Srini which I have created for myself in layouts. y Now you have to query the lists.asmx web service available from SharePoint. You have to play around this and get required data you are looking. I am querying 3 fields from Announcement list. Add the code below to the above code. var soapPacket = <soapenv:Envelope
xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> <soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> <listName>Announcements</listName> <viewFields> <ViewFields> <FieldRef Name='Title' /> <FieldRef Name='Body' /> <FieldRef Name='Expires' /> </ViewFields> </viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>;

The above code is passed to list.samx web services to get the required data from the list. I will show you below in Ajax method passing soapPacket variable declared above as parameter.

Now call the Ajax method of the JQuery to get the announcement list as below.

jQuery.ajax({ url: "http://durgabala/_vti_bin/lists.asmx", type: "POST", dataType: "xml", data: soapPacket, complete: processResult, contentType: "text/xml; charset=\"utf-8\"" });

durgabala is my machine name, you have to change this to the testing system in our environment.

Declare the processResult method declare in the above Ajax query statement at complete:
function processResult(xData, status) { alert(xData.responseText); } You can run the program here and see the output of the web-part by adding to a page. When you click on link Test you will see the output of SOAP xml in alert.

Now we are going to change the method to display only one column as below, comment the above alert line and add the below line. jQuery(xData.responseXML).find("z\\:row").each(function() { alert($(this).attr("ows_Title")); });

y y

Run the program and see all the items added to announcement list are displayed one by one. Now I am going to change the program to display all items to the html element <ul> declare very first as below. Comment the above alert line and add the below line.
$("<li>" + $(this).attr("ows_Title") + "</li>").appendTo("#AnnouncementData");

y y

Now when you run the program and click on Test link you will see all items added automatically to the <ul> element. Now at this movement we are done with the Ajax loading from SharePoint, but we have to display the data automatically to the <ul> rather than clicking on Test link. For this add the below code to the javascript tags to load automatically.

$(document).ready(function () { GetAnnouncementData(); });

Run the program and test the data. Get back to me if nothing happens.

Bingo! you are done with Ajax loading data using JQuery to get all list items in Announcement list.