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.

  The following are examples of scenarios that require case-by-case analysis:
  

  • 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.

  
  

  Use the reRender attribute on an <apex:commandLink> or <apex:commandButton> tag to identify the component that should be refreshed. When a user clicks the button or link, only the identified component and all of its child components are refreshed.
  
  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:
  
  
  

  Developers Can Use Embedded AJAX to Refresh Part of a Page
   
  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];
     }
  }