jQuery

Question 0

CDN

Answer 0

• Content Delivery Network

Question 1

jQuery

Answer 1

• a popular JavaScript library that simplifies making AJAX requests
• selects page elements, updates the Document Object Model (DOM), and creates animations

Question 3

$(‘#ajax’).load(‘sidebar.html’);

Answer 3

• it loads the contents of the sidebar.html file into an HTML element with the ID of “ajax.”
• this method must be chained onto a jQuery selection

Question 4

var url = 'http://website.com/posts';
var data = {object}
var callback = function (response) {};

$.get(url, data, callback);
$.post(url, data, callback);

Answer 4

• $ = “jQuery”
• url = the url you’re making the request to
• data = extra information added to the url as a query string or in the body
• callback = do something with the response

Question 5

responseText property

Answer 5

• jQuery passing the data from the server response to the callback function of $.get()

Question 6

$(‘#load’).hide()

Answer 6

• hides HTML element with the ID of “load”

Question 7

$(document).ready(function() {});

Answer 7

• waits for all the html in a file to load into the browser before running any of the JavaScript inside it
• required only when including JS in the head

Question 8

$.each(array, function(index, value) {});

Answer 8

• loop

Question 9

$(‘#employeeList’).html(statusHTML)

$(‘#signup’).html(‘<p>Thanks for signing up!</p>’)

Answer 9

• selects id and inserts HTML created with HTML

Question 10

$('form').submit(function(evt) {
// event handler
evt.preventDefault();
// method
var url = $(this).attr('action');
var formData = $(this).serialize();
$.post(url, formData, function(response) {};
});

Answer 10

• when visitor clicks the submit button, it’ll send off AJAX request
• used with an event object to prevent the browser from responding normally to an event
• e.g. it prevents a form from being submitted or loading a new web page when a page when a link is clicked
• sets the URL to the “action” property of the form
• creates a text string with standard URL-encoded notation of fields in an HTML form

Question 11

$.ajax(url, settings);

$.ajax(url, {
data: formData,
type: 'POST',
success: function(response) {
$('#signup').html('<p>Thanks for signing up!</p>')
}

Answer 11

• settings = JavaScript object containing settings that control how the AJAX request is made

$.ajax Advantages

• has more options and provides greater control of the AJAX request
• ability to set a timeout to control the maximum wait time for a response from a server
• ability to send a username and password to resources that require user authenticaiton

Question 12

$.get(‘missing.html’, function(data) {
$(‘#myDiv’).html(data);
}).fail(function(jqXHR) {
alert(jqXHR.statusText);

or

var errorMessage = '<p>Sorry! There's been an error.';
errorMessage += 'Please try again later.</p>';
$('#myDiv').html(errorMessage);
});

Answer 12

• loads the contents of the file “missing.html” into an HTML tag on the page that has the ID of “myDiv”
• fail method takes a single argument, a callback function