AJAX Basics
AJAX is an important front-end web technology that lets JavaScript communicate with a web server. It lets you load new content without leaving the current page, creating a better, faster experience for your web site's visitors. In this course, you'll learn how AJAX works and how you can use JavaScript to communicate with a web server. We'll use plain JavaScript as well as jQuery to create AJAX requests and use the response to dynamically update your web pages. Along the way, you'll build mini-projects to reinforce your learning. We wrap up the course with a small project, showing you how to apply what you've learned to pull images from Flickr and display them on your web site.
What you'll learn
- AJAX Concepts
- How to use JavaScript to make AJAX requests
- How to use jQuery to make AJAX requests
- How to process JSON with jQuery and JavaScript
- How to use a 3rd party API with AJAX and jQuery
Course: Introduction to jQuery --- https://teamtreehouse.com/library/introduction-to-jquery
AJAX Concepts
You'll learn the basics of AJAX, see how Google, Twitter and Reddit use AJAX to make their sites more responsive and interactive, and master the four steps of an AJAX request.
- Introducing AJAX5:02
- Review: AJAX Basics5 questions
- How AJAX Works4:45
- Review: How AJAX Works5 questions
- A Simple AJAX Example10:46
- Create an XMLHttpRequest Object1 objective
- Finish the AJAX Request2 objectives
- GET and POST6:21
- Review HTTP Methods5 questions
- AJAX Response Formats3:42
- Review AJAX Response Formats4 questions
- Create an XML File3 objectives
- Finish the XML Document1 objective
- AJAX Security Limitations5:26
- Review AJAX Security Limitations5 questions
Programming AJAX
Learn to use callbacks to respond to server responses, how the JSON format works and how to use JavaScript to parse JSON data. Build a simple "employees status" widget for a company intranet.
- Introducing the Project1:43
- AJAX Callbacks6:51
- Review AJAX Callbacks5 questions
- Create a callback1 objective
- Check for the correct ready state4 objectives
- Introducing JSON5:52
- Review JSON5 questions
- Create a JSON file4 objectives
- Finish the JSON File1 objective
- Parsing JSON Data7:33
- Processing JSON Data8:14
- Stage 2 Challenge1:52
- Stage 2 Challenge Answer3:01
- Review Parsing JSON3 questions
jQuery and AJAX
Learn how jQuery makes programming AJAX faster and more fun. You'll learn the many different jQuery shorthand methods as well as other useful jQuery methods like $.each()
- Introducing jQuery4:21
- Review jQuery3 questions
- Use jQuery's .load() method2 objectives
- jQuery’s AJAX Shorthand Methods5:55
- Review jQuery AJAX Shorthand Methods4 questions
- Using jQuery's $.get() AJAX method2 objectives
- Add a callback3 objectives
- The Office Status Project Revisited9:01
- Posting Data with jQuery5:06
- Review AJAX Post Requests with jQuery5 questions
- The jQuery AJAX Method3:24
- Review the jQuery AJAX Method5 questions
- Handling Errors5:20
- Stage 3 Challenge1:03
- Stage 3 Challenge Answer2:49
- Review Handling AJAX Errors with jQuery4 questions
- Handle AJAX failures with jQuery3 objectives
AJAX and APIs
Learn how an API -- Application Programming Interface -- lets you retrieve information from another web site such as Twitter or Google Maps. In this stage you'll build a photo search application that searches Flickr for photos and displays thumbnails of the images on a web page ... using AJAX, of course!
- What Is an API?2:33
- Review What is an API?3 questions
- Flickr’s API5:23
- Review the Flickr API4 questions
- Beginning the Project2:57
- Adding jQuery4:08
- Review jQuery: Part 24 questions
- Making the AJAX Request6:29
- Make a JSONP request2 objectives
- Set up the data to pass to the API3 objectives
- Create a callback function3 objectives
- Call the jQuery $.getJSON method1 objective
- Review Making JSON Requests with jQuery5 questions
- Displaying the Photos6:36
- Stage 4 Challenge2:57
- Stage 4 Challenge Answer5:24
- Review AJAX Methods and JavaScript Objects5 questions