- Explain what Ajax is.
- Handle race conditions caused by Ajax requests.
- Handle CORS issues caused by Ajax requests.
- Use Ajax to retrieve data from a server.
Take a few minutes to research about Ajax. Come up with your own definition for Ajax, and when finsihed compare your findings with your neighbor.
Take a minute to sketch out an example Ajax object using this url: https://www.omdbapi.com/?apikey=19099f8d&t=Frozen
When you're finished, turn to your neighbor and identify the main parts of the Ajax object. Describe how the done & fail methods work.
Turn to your neighbor and explain what a race condition is, why it is a problem when using Ajax, and how to avoid race conditions in your code? Be prepared to share with the class.
How do we fix the code bellow to print logs in the correct order?
console.log('BEFORE THE AJAX');
var $xhr = $.getJSON('https://www.omdbapi.com/?apikey=19099f8d&t=Frozen');
$xhr.done(function(data) {
if ($xhr.status !== 200) {
return;
}
console.log(data.Title);
});
console.log('AFTER THE AJAX');
Turn to your neighbor and explain what CORS is.
There is a good explanation here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
We are going to use Ajax to dynamically generate a list of movies.
Start by creating a folder called ajax-lesson and create index.html & app.js files inside it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 🌟</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script defer src="app.js"></script>
<style>
main {
font-family: sans-serif;
padding: 1.5rem;
}
h1 {
margin: 0;
}
</style>
</head>
<body>
<main>
<h1>You're a 🌟</h1>
<p>Enter a year to search for your favorite star related movies:</p>
<form>
<input type="number" placeholder="Year" id="search" name="search" />
<button type="submit" name="action">Search</button>
</form>
<div id="listings"></div>
</main>
</body>
</html>(function() {
'use strict';
// Mock data
let movies = [
{title: 'Starboys II'},
{title: 'Galvanize: Reach for the stars'},
{title: 'Two and a Half Stars'}
];
// Add renderMovies function here:
// Add getMovies function here:
// Add submit event listener here:
})();Implement a renderMovies function that takes the provided array and renders a list of movie titles to the DOM.
Don't forget to invoke renderMovies() to test it out!
When complete, your function should look something like this:
const renderMovies = function() {
$('#listings').empty();
const $list = $('<ul>')
for(const movie of movies) {
const $movie = $('<li>').text(movie.title)
$list.append($movie)
}
$('#listings').append($list);
}Move the call to renderMovies inside the event callback so that we don't see the list of movies until the form is submitted.
Code:
$('form').on('submit', function(e) {
e.preventDefault()
renderMovies()
})- Create an ajax request inside the funciton using the provided url:
http://www.omdbapi.com/?apikey=19099f8d&s=star(gets all movies with 'star' in the title.) - Add console.log to the
donemethod to verify that the request works - Invoke
getMovies()inside the submit event handler - Update the movies array with the data received from the request (Data will need to be formatted, try using a HOF!)
- Invoke
renderMovies()at the end of thedonemethod
- Access the input value from the form and pass it into the call to
getMovies - Modify the url of the Ajax call to include the entered year (see omdb api query parameters)