What is Ajax?
The AJAX Toolkit is a JavaScript wrapper around the API:
- The AJAX Toolkit is available for any organization that has API access.
- The AJAX Toolkit supports Microsoft® Internet Explorer® versions 7, 8, 9, and 10 with the latest Microsoft hot fixes applied, and Mozilla® Firefox®, most recent stable version.
- The AJAX Toolkit is based on the partner WSDL. Because there is no type checking in JavaScript, the type information available in the enterprise WSDL is not needed.
- You can execute any call in the API, and access any API object that you normally have access to.
- You can issue asynchronous calls, and use callback functions to handle the results.
- Asynchronous processing in Force.com is very important but has lower priority over real-time interaction via the browser and
API. - Message handlers run on the same application servers that process interactive requests, so it’s possible that asynchronous
processing or increased interactive usage can cause a sudden increase in usage of computing resources. - To ensure there are sufficient resources to handle a sudden increase, the queuing framework will monitor system resources such as server memory
and CPU usage and reduce asynchronous processing when thresholds are exceeded. This will give resource priority to interactive requests. - Once the resources fall below thresholds, normal asynchronous processing will continue.
When to Use the AJAX in VisulaForce Page?
- 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.
- The following are examples of appropriate uses:
- Display or modify a single record.
- Display two or three fields from many records.
- Perform one or more simple calculations, then update a record.
- Update more than 200 records.
- Update records that are unusually large. For example, what happens if the user clicks the browser stop button?
- Recalculate a complex value for more than 200 records.
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.
Scenario:
You want to use AJAX in a Visualforce page so that only part of the page needs to be refreshed when a user clicks a button or link.
For example, the following page shows a list of contacts. When a user clicks the name of a contact, only the area below the list refreshes, showing the details for the contact:
VisualForce Page:<apex:page controller="contactController" showHeader="true" tabStyle="Contact"> <apex:form> <apex:dataTable value="{!contacts}" var="c" cellpadding="4" border="1"> <apex:column> <apex:facet name="header"><b>Name</b></apex:facet> <apex:commandLink reRender="detail">{!c.name} <apex:param name="id" value="{!c.id}"/> </apex:commandLink> </apex:column> <apex:column> <apex:facet name="header"><b>Account Name</b></apex:facet> {!c.account.name} </apex:column> </apex:dataTable> </apex:form> <apex:outputPanel id="detail"> <apex:detail subject="{!contact}" title="false" relatedList="false"/> <apex:relatedList list="ActivityHistories" subject="{!contact}"/> </apex:outputPanel> </apex:page>
Notice the following about the markup for this page:
- Setting the reRender attribute of the <apex:commandLink> tag to 'detail' (the id value for the <apex:outputPanel> tag) means that only the output panel component is refreshed when a user clicks the name of a contact.
- The <apex:param> tag sets the id query parameter for each contact name link to the ID of the associated contact record.
- In the <apex:column> tags, an <apex:facet> tag is used to add the header row. Facets are special child components of some tags that can control the header, footer, or other special areas of the parent component. Even though the columns are in an iteration component (the data table), the facets only display once, in the header for each column.
- In the <apex:outputPanel> tag, the details for the currently-selected contact are displayed without the detail section title or complete set of related lists; however, we can add individual related lists with the <apex:relatedList> tag.
The following markup defines the Apex controller class for the page. It includes two methods: one to return a list of the ten most recently modified contacts and one to return a single contact record based on the id query parameter of the page URL:
Controller:
public class contactController
{ // Return a list of the ten most recently modified contacts public List<Contact> getContacts()
{ return [SELECT Id, Name, Account.Name, Phone, Email FROM Contact ORDER BY LastModifiedDate DESC LIMIT 10]; } /*Get the 'id' query parameter from the URL of the page If it's not
specified, return an empty contact. Otherwise, issue a SOQL query to return the contact from the database */. public Contact getContact()
{ Id id = System.currentPageReference().getParameters().get('id'); return id == null ? new Contact() : [SELECT Id, Name FROM Contact WHERE Id = :id]; } }