Easy, AJAX was designed for partial submits / updates that happen on the page. You just need to specify event attribute of <f:ajax> tag and let it be change, as you desire. As per partial form submit, specify ids of components to be updated on the server in tag's execute attribute. But as default value for execute of <f:ajax> is exactly @this (the component that fires the event), you can omit it altogether. Like so:

<h:inputText id=text value=#{bean.text}>

    <f:ajax event=change/>

</h:inputText>

This way, after JavaScript change event happens, your bean model will be updated behind the scenes via AJAX.

As of which event happens first question you need to understand that it is the JavaScript event that triggers sending of AJAX request to the server, so, naturally, the latter happens first. Also, you can attach a client side callback to get a hook to JavaScript when AJAX response has been successfully committed, by specifying onevent attribute.