• Here we are creating a demo project  which is a standard SharePoint project developed using the Visual Studio Tools for SharePoint. 
• It contains two application pages.
• The LAYOUTS folder of the SharePoint file system contains a javascript library sp.js which contains the client object model for ECMAScript.
• Open the project HelloClientOM from the starter files in Visual Studio 2010.
• Notice the ScriptLink tag in the PageHead content place holder. It references the sp.js library
• Double-click the ClientOM1.aspx page to view the code.

<SharePoint:ScriptLink ID="SPScriptLink"  runat="server"  LoadAfterUI="true"
Localizable="false" Name="sp.js" />

• Also in ECMScript you need to create a client context before you can retrieve data from a SharePoint site.
• With ECMAScript you can retrieve the client context from the SharePoint site in which the script runs.
• Use the Load method to specify which data to load from SharePoint.
• Use the asynchronous method executeQueryAsync to retrieve the information from SharePoint.
• This method needs a reference to a callback method when the execution succeeds and a reference to a callback method when the execution fails
• The PageHead content place holder also contains a javascript function execClientOM.  You can use SP.ClientContext.get_Current() to retrieve the client context of the SharePoint site in which the application page runs.
•  You can load a number of SharePoint objects before the execQueryAsync method is executed to retrieve the desired information from SharePoint. 
• This javascript function defines that the current SharePoint site and the lists of this site needs to be retrieved

function execClientOM() 
{
    // get a client context
    var context = new SP.ClientContext.get_current();

    // load the current site (SPWeb)
    this.site = context.get_web();
    context.load(this.site);

    // load the site's lists
    this.lists = site.get_lists();
    context.load(lists);

    // execute an async query
    context.executeQueryAsync(
       Function.createDelegate(this, this.onSuccess), 
       Function.createDelegate(this, this.onFailure));
}

When the execQueryAsync method succeeds, the onSuccess method is executed and displays the title of the site and the number of lists in the SharePoint site:

function onSuccess(senger, args) {
   alert("Site title: " + this.site.get_title() + "\n" + 
     "Total lists in site: " + this.lists.get_count());
}

When the execQueryAsync method fails, the onFailure method is executed and displays the error message:

function onFailure(sender, args) {
   alert("Request failed " + args.get_message() + "\n" + 
      args.get_stackTrace());
}

The application page contains a content place holder with ID Main. This content place holder contains the controls that make up the user interface. The execClientOM javascript function is triggered when the user clicks a HTML button Locate the Main content place holder, which contains only one HTML control, a button.

• When the application page runs in the context of SharePoint, clicking the button will execute the javascript that calls the client object model. 
• Build the project and deploy it to the SharePoint site. Open an internet browser and navigate to your SharePoint site. 
• Navigate to the /_layouts/HelloClientOM/ClientOM1.aspx page.

Click the Execute Client OM button.A message box will pop up, displaying the title of the site and the number of lists in the site.

You can achieve the same using JQuery. The second application page creates a little accordion containing a list box that will display the lists in the SharePoint site.The project contains a second application page with name ClientOM2.aspx.Take a look at the PageHead content place holder in this page. The first tag is the ScriptLink tag and contains a reference to the sp.js file that contains the client object library.

function Initialize() {
   var context = new SP.ClientContext.get_current();

   this.site = context.get_web();
   context.load(site);

   this.lists = site.get_lists();
   context.load(lists);

               
   context.executeQueryAsync(
       Function.createDelegate(this, this.onSuccess), 
       Function.createDelegate(this,
          this.onQueryFailed));
}

function onSuccess(sender, args) {
   LoadListBox();
}

function onQueryFailed(sender, args) {
   alert('request failed ' + args.get_message() +
         '\n' + args.get_stackTrace());
}

function LoadListBox() {
  //handle the change event
  $("#ListBox1").change(onSelectChange);

  var listEnumerator = this.lists.getEnumerator();

  //iterate though all of the items
  while (listEnumerator.moveNext()) {
     var listItem = listEnumerator.get_current();
     var listId = listItem.get_id().toString();
     var listTitle = listItem.get_title();

     //add the item to the ListBox using jQuery
     $("#ListBox1").append('' + listTitle 
       + '');
  }
}

function onSelectChange() {
   BuildTable($("#ListBox1 option:selected").text());
}

function BuildTable(ListName) {
  var categoryId = "X" + $("Select#ListBox1").val();

  //add a new section if it doesn't exist
  if ($("#" + categoryId).length == 0) {
     if ($("#accordion").length == 0) {
        alert('accordion not found2');
     }
     $("#accordion").append("





" 
        + ListName + "


");
  }

  //Add the item
  $("#" + categoryId).append('





' + ListName 
     + '
');

  //set the accordian style
  $("#accordion").accordion('destroy');
  $("#accordion").accordion({ header: "h3" });
}