How to: Query a Data Service Using AJAX

To query the Data Service

1. Create a script element or JScript file that includes a client-script function that does the following:

   1. Creates an instance of the DataService class.

   2. Calls the query method, and passes as parameters the relative URI of the resource that contains the data and references to callback functions to be used in the case of success or failure. A fourth, optional parameter containing a context or state object can also be passed. This parameter is passed to the succeeded or failed callback function when the request returns.

   The following example shows a function named doQuery that performs these tasks. The DataService instance references a data service that has the relative URI /Northwind.svc. The call to the query method references cbSuccess as the succeeded callback function, and cbFailure as the failed callback function.

   function doQuery() {
     var northwindService = new Sys.Data.DataService("/Northwind.svc");
     northwindService.query("/Customers", cbSuccess, cbFailure);
   }

2. Add a callback function for failed operations. The callback function takes up to three parameters, one for the error, an optional context, and an optional operation name.

   The following example shows a failed callback function.

   function cbFailure(error, context, operation) {
     $get("spanResults").innerHTML = "Error occurred while performing operation " + operation + ".";
   }

3. Add a callback function for succeeded operations. The callback function takes up to three parameters, one for the result, an optional context, and an optional operation name.

   The following example shows a succeeded callback function. The function retrieves the query data from the result parameter.

   function cbSuccess(result, context, operation) {
     // Get Customers list and put into a table.
     var sb = new Sys.StringBuilder();
     sb.append("<table>");
   
     var firstRowOutput = false;
     for (idx in result) {
       var customer = result[idx];
       if (!firstRowOutput) {
         // Display the header row.
         sb.append("<tr>");
         for (key in customer) {
           if (key != "__metadata") {
             sb.append("<th>");
             sb.append(key);
             sb.append("</th>");
           }
       }
       sb.append("</tr>");
       firstRowOutput = true;
     }
   
     // Display the data.
     sb.append("<tr>");
     for (key in customer) {
       if (key != "__metadata") {
         sb.append("<td>");
         sb.append(customer[key]);
         sb.append("</td>");
         }
       }
     sb.append("</tr>");
     }
   
     sb.append("</table>");      
     $get("spanResults").innerHTML = sb.toString();
   }

4. On the Web page that you are using to invoke the data service, add a ScriptManager control with a Scripts collection and a ScriptReference element that references MicrosoftAjaxDataService.js, as shown in the following example.

   <asp:ScriptManager ID="ScriptManager1" runat="server">
     <Scripts>
       <asp:ScriptReference Name="MicrosoftAjaxDataService.js" />
     </Scripts>
   </asp:ScriptManager>

5. If you created the JavaScript function in step 1 as a JScript file, add a reference to that file in the ScriptManager control. To register a static script file, set the Path property of the ScriptReference object to the relative location of the file, as shown in the following example:

   <asp:ScriptReference Path="scripts/QueryExample.js" />

6. Add any required user interface elements to the Web page and then add code or an HTML element that calls the JavaScript function that performs the insert operation.

   The following example shows a Web page that includes a button for calling the doQuery function.

   <p>Click the button below to get a list of all the Customers 
     from the Northwind database.</p>
   
   <input id="ButtonQuery" type="button" 
       value="Perform Query" 
       onclick="doQuery()" /><br />
   <br />
   <span id="spanResults"></span>
   </div>