Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

    Advertisements
  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand
  • Advertisements

Posts Tagged ‘code’

JSOM Batching Code Example

Posted by Paul on November 12, 2015

In this article we can explore a sample JSOM code which will reveal the Batching advantage of JSOM.

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)

image

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.

image

image

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

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js

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(” +

        ‘110’);

    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(” +

        ‘110’);

    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());

}

Testing the Code

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

image

image

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

image

REST is Chattier, but JSOM allows Batching.

References

https://msdn.microsoft.com/en-us/library/office/jj163201.aspx

Summary

In this article we have explored a JSOM batching example.

Advertisements

Posted in SharePoint, SharePoint 2013 | Tagged: , , , , | Leave a Comment »