Talking To Your Server

Question 1

Name and describe the three states a promise object can have.

Answer 1

It can have one of three states: pending, fulfilled, and rejected. When it is first created and hasn’t resolved yet, it has a state of pending. If the promise is resolved successfully, its state changes to fulfilled. If the promise fails, its state changes to rejected. Once a promise’s state changes from pending, it is never changed again.

Question 2

What’s a promise?

Answer 2

A promise is an object that represents the eventual results of an asynchronous operation.

Question 3

Write a click event for #get-json to get data.json and display a success or error message.

Answer 3

$(‘#get-json’).click(function (event) {

$.getJSON(‘data.json’).then(function(data){

alert(data.message); }, function(err){

alert(‘ERROR:’ + JSON.stringify(err));

});

}0029;

Question 4

What does the .getScript() method do?

Answer 4

The .getScript() method is different. It retrieves JavaScript from the server, parses, and then executes it. Like the other Ajax methods, it returns a promise, but in this case the success function is not passed any data.

Question 5

Write a click event for #get-javascript to get script.js and display a success or error message.

Answer 5

$(‘#get-javascript’).click(function (event) {

$.getScript(‘script.js’).then(function () {

alert(“getScript() was successful.”);

}, function(err){

alert(‘ERROR:’ + JSON.stringify(err));

}

});

});

Question 6

Upon click of #get, use the $.get() method to get data.json and display it.

Answer 6

$(‘#get’).click(function (event) {

$.get(“data.json”, function (data) {

showJsonMessage(data);

});

});

Question 7

What are the four main HTTP verbs and what do they do?

Answer 7

get, post, put, and delete. Get is intended to retrieve one or more items from a database. Post is intended to create a new record in the database. Put is meant to update an existing record. And finally, delete removes a record from the database.

Question 8

What are the 3 AJAX helper methods and what do they do?

Answer 8

1. ) The $.param() method creates a serialized representation of an array or an object. The serialized values can be used in the URL query string when making an AJAX request.
2. .serialize() encodes a set of form elements as a string for submission.
3. ) .serializeArray() encodes a set of form elements as an array of JS objects, each with a name and a value.

Question 9

What are the 5 jQuery AJAX shorthand methods and what do they do?

Answer 9

1. ) jQuery.get() - Load data from the server using a HTTP GET request.
2. ) jQuery.getJSON() - Load JSON-encoded data from the server using a GET HTTP request.
3. ) jQuery.getScript() - Load a JavaScript file from the server using a GET HTTP request, then execute it.
4. ) jQuery.post() - Load data from the server using a HTTP POST request.
5. ) .load() - Load data from the server and place the returned HTML into the matched element.

Question 10

Write a ‘click’ event handler for “#jq-param” that

1. ) includes an array with ‘first,last,email’ pairs stored as the var testData
2. ) encodes and stores the array in a var myParam
3. ) writes the output to #outputRegion

Answer 10

$(‘#jq-param’).click(function (event) {

var testData = [

{name: “first”, value: “Troy”},

{name: “last”, value: “Miles”},

{name: “twitter”, value: “@therockncoder”}

];

var myParam = $.param(testData);

$(‘#outputRegion’).text(myParam);

});

Question 11

Write an event handler for the click function on ‘#get-get’ to use the full jQuery.ajax() method to GET ‘data1.json’ and display the data from ‘data1.json’.

Answer 11

$(‘#get-get’).click(function (event) {

$.ajax({

method: “GET”,url: “data1.json”,
success: function (data) {

showJsonMessage(data);

});

});

Question 12

Write an event handler for the click function on #serializeArray to:

1. ) convert the data of #myForm using serializeArray to var myParam
2. ) convert myParam to string and output to #outputRegion.

Answer 12

$(‘#serializeArray’).click(function (event) {

var myParam = $(‘#myForm’).serializeArray(); $(‘#outputRegion’).text(JSON.stringify(myParam));

});

Question 13

Write code to:

1. ) store the document as a variable
2. ) .show() a div, “dataTranser” when AJAX activity starts
3. ) .hide() the div when AJAX activity stops

Answer 13

var $doc = $(document);

$doc.ajaxStart(function () {

$(‘#dataTransfer’).show(‘fast’);

});

$doc.ajaxStop(function () {

$(‘#dataTransfer’).hide(‘slow’);

});

Question 14

What’s the difference between .ajaxSuccess() and .ajaxComplete();

Answer 14

The .ajaxComplete() handler is called whenever an Ajax request completes. This method is always called regardless of whether the request succeeded or failed. It is always called after the success or error event.

.ajaxSuccess() only shows if a request succeeds.