example of using ajax in VisualForce page

<apex:page id="communitiesSelfRegPage" showHeader="true" controller="CommunitiesSelfRegController" title="{!$Label.site.user_registration}">
     <script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    <script src="../../soap/ajax/30.0/connection.js"
          type="text/javascript"></script>
    <script type="text/javascript">     
    //window.onload = setupPage;
    
    
    
    
    
    function checkCampus(){
      //function contains all code to execute after page is rendered


      var state = { //state that you need when the callback is called
          output: document.getElementById("output"),
          startTime : new Date().getTime()};


      var callback = {
          //call layoutResult if the request is successful
          onSuccess: showCampus,


          //call queryFailed if the api request fails
          onFailure: queryFailed,
          source: state};


      sforce.connection.query(
          "Select Id, Name, Industry From Account order by Industry",
           callback);
    }
    
    
    
    function checkYear(){
      //function contains all code to execute after page is rendered


      var state = { //state that you need when the callback is called
          output: document.getElementById("output"),
          startTime : new Date().getTime()};


      var callback = {
          //call layoutResult if the request is successful
          onSuccess: queryYearLevel,


          //call queryFailed if the api request fails
          onFailure: queryFailed,
          source: state};


      sforce.connection.query(
          "Select Id, Name, Industry From Account order by Industry",
           callback);
    }
    
    
    
  function showCampus(queryResult, source) {
    
    //get inputed Community Code
    var enteredCode =  document.getElementById("communitiesSelfRegPage:theForm:CommunityCode");
    
    //validate the inputed Community Code
    
    var soql_getCampus = "SELECT Campus_Name__c FROM SchoolCampus__c WHERE Community_Code__c='"+enteredCode.value+"'";
    
    var txt_debug1 =document.getElementById("communitiesSelfRegPage:theForm:txt_debug"); 
    txt_debug1.value = soql_getCampus ;
    
    result_check_school_exist = sforce.connection.query(soql_getCampus);
    txt_debug1.value =result_check_school_exist.size;
    
    if(result_check_school_exist.size==0 )
   {
       var selectlist_campus=  document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
      selectlist_campus.style.display="none";
      
      var label_selectlist_campus=  document.getElementById("communitiesSelfRegPage:theForm:lbl_campus");
      label_selectlist_campus.style.display="none";
   
   
   
      var campusField=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
      campusField.style.display="none";
      
      var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="none";
   
   
      return;
   }
   if(result_check_school_exist.size==1)
   {
      var campusField=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
      campusField.style.display="block";
      
      var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="block";
   }
   else{
     var campusField=  document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
      campusField.style.display="block";
      var label_selectlist_campus=  document.getElementById("communitiesSelfRegPage:theForm:lbl_campus");
      label_selectlist_campus.style.display="block";
      
   }
    
 
    
    var selectList1 = document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
    
    queryCampusOption(enteredCode.value);
    
    
    //}
    
    if (queryResult.size > 0) {
      var output = "";


      //get the records array
      var records = queryResult.getArray('records');


      //loop through the records and construct html string
      for (var i = 0; i < records.length; i++) {
        var account = records[i];


        output += account.Id + " " + account.Name +
            " [Industry - " + account.Industry + "]<br>";
      }


    //render the generated html string
    //source.output.innerHTML = output;
    }
  
  }
  
  


  function queryCampusOption(CommunityCode){
  soql_getCampus = "SELECT Campus_Name__c FROM SchoolCampus__c WHERE Community_Code__c='"+CommunityCode+"'";
  result = sforce.connection.query(soql_getCampus);
  records =result.getArray("records");
  
  if(records.length>1){
  
  //hide selectlist_year and label
  var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="none";
  var selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
  selectlist_yearlevel.style.display="none";    
  
  var selectList_Campus = document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
  
  //show campus select list
  selectList_Campus.style.display="block";
  var label_selectlist_campus=  document.getElementById("communitiesSelfRegPage:theForm:lbl_campus");
      label_selectlist_campus.style.display="block";
  
  
  //clear all options in select list
  
  selectList_Campus.options.length = 0;
  
  //insert compuses into selectlist for the chosen school
  
  var selectList1 = document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
  selectList1.options[0]=new Option("", 0);
  for(var i=0;i<records.length;i++){
    //var record = records[i];
    
    
    selectList1.options[selectList1.options.length]=new Option(records[i].Campus_Name__c, i);
  }
  }
  else if(records.length==1){
  
  //get the only campus name
  var onlyCampusName = records[0].Campus_Name__c;
  
  //hide campus select list
  var selectList_Campus = document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
  selectList_Campus.style.display="none";
  var label_selectlist_campus=  document.getElementById("communitiesSelfRegPage:theForm:lbl_campus");
      label_selectlist_campus.style.display="none";
  
  //show level select list
  var selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
  selectlist_yearlevel.style.display="block";
  var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="block";
  
  //get year level options
  //building sobject query, parameter CommunityCode & campus name
  soql_getYear ="SELECT Name,Campus__c,CommunityCode__c,School_Account_ID__c,School_Name__c,Year_Level__c FROM SchoolCampusYear__c WHERE CommunityCode__c='"+CommunityCode+"' and Campus__c='"+onlyCampusName +"' ORDER BY Year_Level__c";
  result_year = sforce.connection.query(soql_getYear);  
  
  //check if any year existing for the only campus
  var selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
    if(result_year.size <1){
    selectlist_yearlevel.style.display="none";
    var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="none";
    
      return; 
    }
    else{
    
      selectlist_yearlevel.style.display="block";
      var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="block";
     
    }
    
    array_yearlevel =result_year.getArray("records");
    
     
    
    //clear select list
    //var yearSelectList=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
    //var length = selectlist_yearlevel.options.length;


    //txt_debug.value =length;


    selectlist_yearlevel.options.length=0;
  // alert("mark 1");
    
    //var selectList2 = document.getElementById("communitiesSelfRegPage:theForm:sl_year");
    
    selectlist_yearlevel.options[0]=new Option("",0);
    alert("array_yearlevel.length"+array_yearlevel.length);
    
    for(var i=0;i<array_yearlevel.length;i++){
       selectlist_yearlevel.options[selectlist_yearlevel.options.length]=new Option("year "+array_yearlevel[i].Year_Level__c, array_yearlevel[i].Year_Level__c);
    alert("insert "+array_yearlevel[i].Year_Level__c + " NO."+i);
    
  }
  
  }
  
  }


  function queryYearLevel(){
    var campusField=  document.getElementById("communitiesSelfRegPage:theForm:sl_campus");
    var selectedCampus = campusField.options[campusField.selectedIndex].innerText;
    var communityCode = document.getElementById("communitiesSelfRegPage:theForm:CommunityCode");
    soql_getYear ="SELECT Name,Campus__c,CommunityCode__c,School_Account_ID__c,School_Name__c,Year_Level__c FROM SchoolCampusYear__c WHERE CommunityCode__c='"+communityCode.value+"' and Campus__c='"+selectedCampus +"' ORDER BY Year_Level__c";
    
    var txt_debug =document.getElementById("communitiesSelfRegPage:theForm:txt_debug"); 
    txt_debug.value = soql_getYear ;
    result_year = sforce.connection.query(soql_getYear);
    
    if(result_year.size <1){
      return; 
    }else{
    var campusField=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
      campusField.style.display="block";
      var label_selectlist_yearlevel=  document.getElementById("communitiesSelfRegPage:theForm:lbl_year");
      label_selectlist_yearlevel.style.display="block";
    }
    
    records =result_year.getArray("records");
    
    
    //clear select list
    var yearSelectList=  document.getElementById("communitiesSelfRegPage:theForm:sl_year");
    var length = yearSelectList.options.length;
    
    //yearSelectList.val([]);
    txt_debug.value =length;
    //for(i=0;i<length;i++){
    //   yearSelectList.remove(i);
    //   alert("clear record"+i);
    //}
    yearSelectList.options.length=0;
    
    
    var selectList2 = document.getElementById("communitiesSelfRegPage:theForm:sl_year");
    selectList2.options[0]=new Option("",0);
    for(var i=0;i<records.length;i++){
       selectList2.options[selectList2.options.length]=new Option("year "+records[i].Year_Level__c, records[i].Year_Level__c);
    //alert("insert "+records[i].Year_Level__c + " NO."+i);
    
  }
  
  
  }


  function disableButton()
  {
       var btn_submit =   document.getElementById("communitiesSelfRegPage:theForm:submit");
       btn_submit.disabled = true;
  }


  function queryFailed(error, source) {
    source.output.innerHTML = "An error has occurred: " + error;
  }


  /**
  * This method will be called when the toolkit receives a successful
  * response from the server.
  * @queryResult - result that server returned
  * @source - state passed into the query method call.
  */
  
  </script>
     
     <apex:define name="body">  
      <center>
<apex:form id="theForm" forceSSL="true">
                    <apex:pageMessages id="error"/>
                    <apex:panelGrid columns="2" style="margin-top:1em;">
                      <apex:outputLabel value="First Name" for="firstName"/>
                      <apex:inputText required="true" id="firstName" value="{!firstName}" label="First Name"/>
                      <apex:outputLabel value="Last Name" for="lastName"/>
                      <apex:inputText required="true" id="lastName" value="{!lastName}" label="Last Name"/>
                      <apex:outputLabel value="{!$Label.site.community_nickname}" for="communityNickname"/>
                      <apex:inputText required="true" id="communityNickname" value="{!communityNickname}" label="{!$Label.site.community_nickname}"/>
                      <apex:outputLabel value="{!$Label.site.email}" for="email"/>
                      <apex:inputText required="true" id="email" value="{!email}" label="{!$Label.site.email}"/>
                      
                      
                      <apex:outputLabel value="{!$Label.site.password}" for="password"/>
                      <apex:inputSecret id="password" value="{!password}"/>
                      <apex:outputLabel value="{!$Label.site.confirm_password}" for="confirmPassword"/>
                      <apex:inputSecret id="confirmPassword" value="{!confirmPassword}"/>
                      
                      <apex:outputLabel value="{!$Label.CommunityCode}" for="CommunityCode"/>
                      <apex:inputText required="true" id="CommunityCode" value="{!CommunityCode}" label="{!$Label.CommunityCode}" οnkeydοwn="checkCampus()"/>
                      
                      <apex:outputLabel value="{!$Label.Campus}" for="sl_campus" id="lbl_campus" style="display:none;"/>
                      <apex:selectlist multiselect="false" id="sl_campus" οnchange="checkYear()" style="display:none;"  ></apex:selectlist>
                      
                      <apex:outputLabel value="{!$Label.Year_Level}" for="sl_year" id="lbl_year" style="display:none;"/>
                      <apex:selectlist multiselect="false" id="sl_year"  style="display:none;" ></apex:selectlist>
                     
                      
                       <apex:outputLabel value="Test AF" for="sl_test_actionFunction" id="lbl_actionFunction" />
                      <apex:selectlist multiselect="false" id="sl_test_actionFunction"  ></apex:selectlist>
                      <br/><br/>
               
                      
                      <apex:inputText id="txt_debug"   ></apex:inputText>
                      
                      <apex:outputText value=""/>
                      <apex:commandButton action="{!registerUser}" value="{!$Label.site.submit}" id="submit" disabled="true"/>
                    </apex:panelGrid> 
                  <br/>
</apex:form>
<div id="output"></div>
     </center>
      <br/>
    </apex:define>


</apex:page>

Controller:

/**
 * An apex page controller that supports self registration of users in communities that allow self registration
 */
public with sharing class CommunitiesSelfRegController {

    public String StudentYearLevel { get; set; }

    public String firstName {get; set;}
    public String lastName {get; set;}
    public String email {get; set;}
    public String password {get; set {password = value == null ? value : value.trim(); } }
    public String confirmPassword {get; set { confirmPassword = value == null ? value : value.trim(); } }
    public String communityNickname {get; set { communityNickname = value == null ? value : value.trim(); } }
    public String CommunityCode {get;set;}
    
    public CommunitiesSelfRegController() {}
    
    private boolean isValidPassword() {
        return password == confirmPassword;
    }

    public PageReference registerUser() {
    
           // it's okay if password is null - we'll send the user a random password in that case
        if (!isValidPassword()) {
            ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR, Label.site.passwords_dont_match);
            ApexPages.addMessage(msg);
            return null;
        }    
        
        User[] userList = [SELECT ID,Email FROM User WHERE Email=:email];
        if(!userList.isEmpty()){
            ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR, 'User existing already.');
            ApexPages.addMessage(msg);
            //return null;
            
            string userId = userList[0].ID;
            string userName = email;
            
            if (userId != null) { 
            if (password != null && password.length() > 1) {
                return Site.login(userName, password, null);
            }
            else {
                PageReference page = System.Page.CommunitiesSelfRegConfirm;
                page.setRedirect(true);
                return page;
            }
        }
        }
        
        
        
        

        String profileId = null; // To be filled in by customer.
        String roleEnum = null; // To be filled in by customer.
        String accountId = ''; // To be filled in by customer.
        
        String userName = email;


        PortalCodeMapping__c codeMapping = [SELECT Account_ID__c,Customer_Type__c FROM PortalCodeMapping__c WHERE Portal_Code__c =: CommunityCode];
       
         accountId = codeMapping.Account_ID__c;
        
        //codeMapping.Account_ID__c = 
        
        //check if the email is occupied by an existing contact
        Contact[] thisContactList = [SELECT Id,AccountId FROM Contact where Email =: email];
        if(thisContactList.isEmpty()){
        
        }
        else{
          Integer contactListSize = thisContactList.size();
          if(contactListSize >1){
               
          }
          else
          {
             thisContactList[0].AccountId = accountId;
             try {
             update thisContactList[0];
         } 
             catch (DmlException e) {
         // Process exception here
         }
          }
        }
        //string contactId= thisContact.Id;
        //if(contactId == null || contactId ==''){
        //}
        

        //create new user
        User u = new User();
        u.Username = userName;
        u.Email = email;
        u.FirstName = firstName;
        u.LastName = lastName;
        u.CommunityNickname = communityNickname;
        u.ProfileId = profileId;
        u.CommunityCode__c= CommunityCode;
        
        //if it's a new contact
        
        String userId = Site.createPortalUser(u, accountId, password);
        //save community code into the created contact
        Contact NewContact = [SELECT CommunityCode__c FROM Contact WHERE Email=:email];
        NewContact.CommunityCode__c = CommunityCode;
        
         try {
         update NewContact;
         } 
         catch (DmlException e) {
         // Process exception here
         }
        
      
        if (userId != null) { 
            if (password != null && password.length() > 1) {
                return Site.login(userName, password, null);
            }
            else {
                PageReference page = System.Page.CommunitiesSelfRegConfirm;
                page.setRedirect(true);
                return page;
            }
        }
        return null;
    }

    
         
 
}