{"id":2470,"date":"2011-10-17T17:10:36","date_gmt":"2011-10-17T11:40:36","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2470"},"modified":"2011-10-17T17:10:36","modified_gmt":"2011-10-17T11:40:36","slug":"salesforce-tutorial-create-simple-ajax-based-visualforce-page","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/salesforce-tutorial-create-simple-ajax-based-visualforce-page\/","title":{"rendered":"Salesforce Tutorial – Create Simple Ajax based Visualforce page"},"content":{"rendered":"

Hello friends,
\nThis time i am going to create very simple AJAX based visual force page for the\u00a0beginners.<\/p>\n

What is AJAX?<\/strong><\/p>\n

As many of you already know that the AJAX stands for the “Asynchronous javascript and XML<\/strong>“.<\/p>\n

AJAX is the art of exchanging data between server and client without reloading the complete web page.<\/p><\/blockquote>\n

Visualforce and AJAX<\/strong><\/p>\n

Visualforce has inbuilt support for the AJAX. using the attribute “rerender<\/strong>” we can specify that where the response should be rendered.<\/p>\n

Example:<\/strong>
\nLets have an example to demonstrate that how simple AJAX works in visualforce.
\nCreate an APEX class with following code.<\/p>\n

\npublic class AjaxDemo {\n\n    private String currTime;\n    public String getCurrTime()\n    {\n        return currTime;\n    }\n    public void setCurrTime()\n    {\n        currTime = System.now().format('EEEE, MMMM d, yyyy - hh:mm:ss');\n    }\n}\n<\/pre>\n
As you can see in above Apex class, i have created method named “setCurrTime()” which will set the value of string variable. There is also one get method named as “getCurrTime()” which returns the value of that variable.<\/p>\n
On the basis of above Apex class lets create Visualforce page with below code.<\/p>\n
\n<apex:page Controller="AjaxDemo">\n<apex:pageBlock Title="Ajax Sample">\nHello <b> {!$User.FirstName}<\/b>.\n<apex:form >\n<br \/><br \/>\n<apex:commandbutton action="{!setCurrTime}" rerender="ajaxresult" value="Display Current Time" \/>\n\n<\/apex:form>\n<\/apex:pageBlock>\n\n<apex:pageBlock title="AjaxData">\n  <apex:outputPanel id="ajaxresult" layout="block">\n    Result: {!CurrTime}\n  <\/apex:outputPanel>\n<\/apex:pageBlock>\n\n<\/apex:page>\n<\/pre>\n
There are few points to observe from above visualforce page<\/p>\n