JSOM Batching Code Example

Batching

Batching is one core advantage of JSOM over REST API. Batching minimizes the roundtrips involved by grouping all the queries together.

For example, if you have 10 SharePoint lists to be queried from a page, REST API requires 10 roundtrips which would be taking around 20 seconds. Here we can use JSOM to combine the requests into 1 roundtrip there by reducing the time to 2 seconds. (90% time reduction)

Note: Network Roundtrip occupies the majority time involved in a web page loading.

JSOM Example

In this example we are using 2 lists named Contacts A and Contacts B. Please create these lists from template Contacts & add one item in each.





Now create a new page & add a content editor web part. Insert the following code into it. Change the server URL before saving.

<script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
var siteUrl = 'http://server';
$(document).ready(function ()
{
    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
})

function retrieveListItems()
{
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Contacts A');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    var oList2 = clientContext.get_web().get_lists().getByTitle('Contacts B');
    var camlQuery2 = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem2 = oList2.getItems(camlQuery2);
    clientContext.load(collListItem2);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args)
{
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext())
    {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title');
    }
    alert(listItemInfo.toString());
    var listItemInfo2 = '';
    var listItemEnumerator2 = collListItem2.getEnumerator();
    while (listItemEnumerator2.moveNext())
    {
        var oListItem2 = listItemEnumerator2.get_current();
        listItemInfo2 += '\nID: ' + oListItem2.get_id() + '\nTitle: ' + oListItem2.get_item('Title');
    }
    alert(listItemInfo2.toString());
}

function onQueryFailed(sender, args)
{
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Testing the Code

Save and Refresh the page. You can see that the items from both lists are fetched.





You can see that the above message boxes shows items from 2 different lists. The code completed in one roundtrip instead of two.

Note: REST is Chattier, but JSOM allows Batching.

References

 

• Complete basic operations using JavaScript library code in SharePoint 2013

Summary

In this article we have explored a JSOM batching example.