Ajax with PHP: Add Dynamic Content to Websites
3h 38mIntermediate2016-11-07
Authors
Kevin Skoglund
Founder of NovaFabrica
Course details
Add dynamic, asynchronously loading content to websites to make them more modern, professional, and user friendly with Ajax and PHP. Learn how to use Ajax to send and receive data in the background and how to use PHP to assemble and return text, HTML, or JSON responses. Kevin Skoglund walks viewers through sample projects for the most common Ajax use cases: buttons to allow users to mark or favorite items, forms that validate and submit data in the background, infinite scrolling of paginated content, and autosuggestions beneath a text field.
Learning objectives
What is Ajax?
Creating Ajax requests and responses
Monitoring Ajax request state and events
Responding to Ajax requests with HTML and JSON
Building Ajax buttons
Submitting forms with Ajax
Implementing infinite scrolling
Adding autosuggestions to text fields
Learning objectives
What is Ajax?
Creating Ajax requests and responses
Monitoring Ajax request state and events
Responding to Ajax requests with HTML and JSON
Building Ajax buttons
Submitting forms with Ajax
Implementing infinite scrolling
Adding autosuggestions to text fields
Skills covered
AjaxW3CPHPWeb Development ToolsWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Welcome
- 02 - How to use the exercise files
1. Ajax Defined
- 03 - What is Ajax
2. Ajax Client
- 04 - Requests
- 05 - Responses
- 06 - States and events
- 07 - Load remote text
- 08 - Load remote JSON
- 09 - Using jQuery
3. PHP Server
- 10 - Detect Ajax requests
- 11 - Respond with HTML partials
- 12 - Respond with JSON data
- 13 - Update page on change
4. Ajax Button
- 14 - Create a favorite button
- 15 - Send button Ajax request
- 16 - Process button Ajax request
- 17 - Handle button Ajax response
- 18 - Mark favorites on page load
- 19 - Create an unfavorite button
5. Ajax Form Submission
- 20 - Create the form
- 21 - Gather form data
- 22 - Handle form errors
- 23 - Add a loading spinner
- 24 - Disable form button
- 25 - Allow fallback to HTML
- 26 - Prevent default
6. Infinite Scrolling
- 27 - Create a page of items
- 28 - Process a load request
- 29 - Append HTML results
- 30 - Use a data attribute
- 31 - Trigger Ajax on scroll
- 32 - Prevent multiple requests
7. Search Autosuggest
- 33 - Create a text input
- 34 - Style suggestions
- 35 - Send an autosuggest Ajax request
- 36 - Calculate results
- 37 - Format suggestions with JSON
Conclusion
- 38 - Next steps