The AJAX Toolkit

Because information is delivered via a browser, AJAX works best with relatively small amounts of data (up to 200 records, approximately six fields with 50 characters of data each). The larger the data set returned, the more time it will take to construct and deconstruct a SOAP message, and as the size of an individual record gets larger, the impact on performance becomes greater. Also, as more HTML nodes are created from the data, the potential for poor performance increases. Because browsers are not efficient, careful consideration needs to be given to browser memory management if you intend to display a large amount of data.

An example of inappropriate usage is providing a sortable grid of many records. This would require too much processing time, and browser rendering would be too slow.

The current release of the AJAX Toolkit is the only version that receives bug fixes and enhancements. When a new version is released, the previous version continues to be available, but is not supported.

To add JavaScript to an Visualforce page, use the following procedure:

1. Create the Visualforce page. For more information on this, see the Visualforce Developer's Guide.
2. Cut and paste the following sample code into your Visualforce page.

   The JavaScript code queries your organization and returns every account ID, account name, and industry type, if any:

   1swfobject.registerObject("clippy.codeblock-0", "9");<apex:page >
   2    <script type="text/javascript">
   3    var __sfdcSessionId = '{!GETSESSIONID()}';
   4    </script>
   5    <script src="../../soap/ajax/30.0/connection.js"
   6          type="text/javascript"></script>
   7    <script type="text/javascript">     window.onload = setupPage;
   8    function setupPage() {
   9      //function contains all code to execute after page is rendered
   10
   11      var state = { //state that you need when the callback is called
   12          output : document.getElementById("output"),
   13          startTime : new Date().getTime()};
   14
   15      var callback = {
   16          //call layoutResult if the request is successful
   17          onSuccess: layoutResults,
   18
   19          //call queryFailed if the api request fails
   20          onFailure: queryFailed,
   21          source: state};
   22
   23      sforce.connection.query(
   24          "Select Id, Name, Industry From Account order by Industry",
   25           callback);
   26  }
   27
   28  function queryFailed(error, source) {
   29    source.output.innerHTML = "An error has occurred: " + error;
   30  }
   31
   32  /**
   33  * This method will be called when the toolkit receives a successful
   34  * response from the server.
   35  * @queryResult - result that server returned
   36  * @source - state passed into the query method call.
   37  */
   38  function layoutResults(queryResult, source) {
   39    if (queryResult.size > 0) {
   40      var output = "";
   41
   42      //get the records array
   43      var records = queryResult.getArray('records');
   44
   45      //loop through the records and construct html string
   46      for (var i = 0; i < records.length; i++) {
   47        var account = records[i];
   48
   49        output += account.Id + " " + account.Name +
   50            " [Industry - " + account.Industry + "]<br>";
   51      }
   52
   53    //render the generated html string
   54    source.output.innerHTML = output;
   55    }
   56  }
   57  </script>
   58
   59    <div id="output"> </div>
   60   
   61</apex:page>
   62

After creating and navigating to the aboveVisualforce page, you should see text similar to this image: