Understanding AJAX in web applications

Understanding AJAX in web applications

I'm using Symfony and have a very basic knowledge of JavaScript, but most
of the things I want to do require AJAX. It's a bit difficult for me to
understand it and to apply it with Symfony.
Let's say that a have a list of thing, which can be enabled and disabled.
The enabled has class="enabled", the disabled have class="disabled". I
want to be able to enable/disable them using AJAX. So what exactly should
happen? As I understand it, when for example you click the button to
disable an item, javascript changes the class immediately, while at the
same time, on the background, a query goes to the server, changing the
status of the item in the database. Then in the template I should have for
example an if statement, which is responsible for the class (like
{% if item.status == 1 %}
<p class="enabled">
{% else %}
<p class="disabled">
{% endif %}
{{item.name}}
</p>
)
So the js code for changing the status is run only on click, while the if
statement in the template is taken into accaunt on refresh.
I'm not quite sure about this, so I would be very grateful if someone says
it's ok, or says what is the proper way to do this and I would also really
appreciate some tutorials or examples and applications using Symfony and
Ajax, because I wasn't able to find anything except this, and I really
can't imagine how exactly to implement such things.
Thank you very much in advance! :)