Here you go:

apex:actionFunction:
A component that provides support for invoking controller action methods directly from JavaScript code using an AJAX request. An <apex:actionFunction> component must be a child of an <apex:form> component.

Unlike <apex:actionSupport>, which only provides support for invoking controller action methods from other Visualforce components, <apex:actionFunction> defines a new JavaScript function which can then be called from within a block of JavaScript code.

Note: Beginning with API version 23 you can't place <apex:actionFunction> inside an iteration component — <apex:pageBlockTable>, <apex:repeat>, and so on. Put the <apex:actionFunction> after the iteration component, and inside the iteration put a normal JavaScript function that calls it.
 

<!-- Page: -->
<apex:page controller="exampleCon">
    <apex:form>
        <!-- Define the JavaScript function sayHello-->
        <apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out" status="myStatus"/>
    </apex:form>

    <apex:outputPanel id="out">
    <apex:outputText value="Hello "/>
    <apex:actionStatus startText="requesting..." id="myStatus">
        <apex:facet name="stop">{!username}</apex:facet>
    </apex:actionStatus>
    </apex:outputPanel>
            
    <!-- Call the sayHello JavaScript function using a script element-->
    <script>window.setTimeout(sayHello,2000)</script>
            
    <p><apex:outputText value="Clicked? {!state}" id="showstate" /></p> 
            
    <!-- Add the onclick event listener to a panel. When clicked, the panel triggers
    the methodOneInJavascript actionFunction with a param -->
    <apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn"> 
        Click Me 
    </apex:outputPanel>
    <apex:form>

    <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate">
        <apex:param name="firstParam" assignTo="{!state}" value="" />
    </apex:actionFunction>
    </apex:form>
</apex:page>

/*** Controller ***/
public class exampleCon {
    String uname;

    public String getUsername() {
        return uname;
    }
            
    public PageReference sayHello() {
        uname = UserInfo.getName();
        return null;
    }
            
    public void setState(String n) {
        state = n;
    }
            
    public String getState() {
        return state;
    }
            
    public PageReference methodOne() {
        return null;
    }
            
    private String state = 'no';
}

apex:actionSupport
A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as a button click or mouseover.

See also: <apex:actionFunction>.

<!--  Page: -->
<apex:page controller="exampleCon">
    <apex:form>
        <apex:outputpanel id="counter">
            <apex:outputText value="Click Me!: {!count}"/>
            <apex:actionSupport event="onclick" 
                                action="{!incrementCounter}" 
                                rerender="counter" status="counterStatus"/>
        </apex:outputpanel>
        <apex:actionStatus id="counterStatus" 
                           startText=" (incrementing...)" 
                           stopText=" (done)"/>
    </apex:form>
</apex:page>	

/***  Controller: ***/
public class exampleCon {
    Integer count = 0;
                        
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                    
    public Integer getCount() {
        return count;
    }
}

more info:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionSupport.htm

As a common practice, if your question is answered, please choose 1 best answer.
But you can give every answer a thumb up if that answer is helpful to you.

Thanks