AJAX tutorial
Update pages with data from the server, without reloading
About this tutorial
AJAX lets a web page talk to the server in the background: search results appear as you type, comments post without a page reload, and dashboards update by themselves.
In this beginner class you learn JSON, promises and async/await, then send and receive data with fetch() and jQuery, build PHP endpoints that return JSON, and finish with a live comment wall backed by MySQL. You should know JavaScript and basic PHP first. Every lesson has examples, an exercise and a quiz.
Lessons
Getting started
Asynchronous JavaScript
- Callbacks, promises and async/awaitUnderstand code that finishes later, and handle it with callbacks, promises and async/await.
- Your first fetch() requestLoad a JSON file with fetch(), check the response, read the JSON and show it on the page.
- Loading states and errorsShow a loading message, disable buttons while waiting, and give friendly messages when something goes wrong.
Talking to PHP
- A PHP endpoint that returns JSONWrite PHP files that answer AJAX requests with JSON, read query parameters and send the right status codes.
- Sending data with POSTSend form data and JSON to PHP with fetch, read it on the server, validate it and reply with JSON.
- AJAX with jQueryMake the same requests with $.getJSON, $.post and $.ajax, and handle success and errors the jQuery way.
- Live searchSearch a MySQL table as the visitor types, with a debounce, a PDO LIKE query and safely rendered results.
- Keeping AJAX secureProtect endpoints with sessions, CSRF tokens, server-side validation and safe output.