AJAX

Write a correctly formatted JSON property name / value pair?

"property": "value"

What is jQuery's low-level AJAX method -- the one all the shorthand methods are built on?

$.ajax()

You've got the $.get() method and first argument in place. The second argument to the $.get() method is a callback function. Pass an anonymous function as the second argument to the method. Don't forget to set a parameter for that function to catch the server's incoming response. Add to : $.get("footer.html");

$.get("footer.html", function (response) {});

Which of jQuery's AJAX methods can you use to make a JSONP request?

$.getJSON()

Which of the following jQuery AJAX shorthand methods posts data to a server?

$.post()

What is the jQuery method for handling errors in an AJAX response?

.fail()

What two parameters does jQuery's $.ajax() method accept?

1. A URL 2. A JavaScript object containing settings that control how the AJAX request is made

What are the 4 steps of an AJAX request?

1. Create and XMLHTTP Request Object 2. Create a callback function 3. Open a request 4. Send a request

What is jQuery?

A popular JavaScript library that simplifies making AJAX requests.

What is a 500 error?

A status of 500 pops up when the server has some kind of error, often the server-side program that's processing the request isn't working.

In app.js, we've added an AJAX callback function. You need to complete the request. Add the code to open the AJAX request using the GET method and pointing to the 'footer.html' file. var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState === 4) { document.getElementById("footer").innerHTML = request.responseText; } };

Add to the last line: request.open('GET', 'footer.html');

What is the name for this type of function: function () { }

An anonymous function

What does AJAX stand for?

Asynchronous JavaScript And XML

Which of these is NOT a common AJAX response format? A HTML B Binary Files C Plain text D XML E JSON

Binary Files: You can receive binary files -- like images -- using AJAX, but plain text formats like JSON, XML, and HTML are more common.

Why is a web proxy useful for AJAX requests?

It allows you to bypass a web browser's same-origin policy by retrieving data from another server, while keeping AJAX requests within the same domain.

You can send Flickr's public photo feed a property named "tags". What does the "tags" property do?

It lets you search for photos that match a particular keyword.

You can send Flickr's public photo feed a property named "format". What does the "format" property do?

It lets you specify the format for the feed, for example an XML or JSON format.

What does this code do: $('#ajax').load('sidebar.html');

It loads the contents of the sidebar.html file into an HTML element with the ID of "ajax." The .load() method is a quick way to insert HTML content into an element on a page using AJAX.

What is an API key for?

Lets a web developer connect with a third party API like Google Maps. Lets a web site limit access to its API. Lets a web site track use of its API and charge money for its use.

Which of these is a difference between GET and POST?

POST sends its data in the "body" of the request. GET sends data in the URL.

POST =

POST. Used frequently with web forms to send data to store in a database. Use POST when sending data that will store, delete or update information from a database.

Explain in proper term how a user interacts with a server

The process of asking a server for information is technically called making a request of the server. And when the server sends back its answer, that's called a response. Keep those two words in mind.

In which of the following situations does jQuery's .fail() method NOT work?

When using the .load() method. AND When making requests to another site.

The term "XMLHttpRequest object" is often shortened to which of the following?

XHR Object

What type of JavaScript object do web browsers use to manage AJAX requests?

XMLHttpRequest Object

Complete this code to retrieve a form's "action" attribute and store it in the variable url: var url = $('form').__("action");

attr = var url = $('form').attr("action");

Fill in the missing code to add a click event handler to all HTML button elements on a page: $(______).click(function() { });

button $("button").click(function() { });

Assume you have the following JavaScript object: var contact = { name : "Jill", phone: "510-555-1212" }; Finish the code below to display the object's "name" property in an alert box: alert(_______);

contact.name alert(contact.name);

Complete the code below to remove the class "selected" from all button elements. $("button").____("selected");

removeClass $("button").removeClass("selected");

You use AJAX to communicate with a web server by sending it a ...

request

Add the code to send the AJAX request: var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState === 4) { document.getElementById("footer").innerHTML = request.responseText; } }; request.open('GET', 'footer.html');

request.send();

The callback function for jQuery's .fail() method receives a jQuery XHR object as a parameter. What property of the jQuery XHR object provides the response's HTTP status code?

status

The callback function for jQuery's .fail() method receives a jQuery XHR object as a parameter. What property of the jQuery XHR object provides a text description of the response's status code?

statusText

Finish the code below to retrieve the text inside an HTML element with the ID of "button" and store it in the variable "animal": var animal = $('#button')._____;

text() var animal = $('#button').text();

jQuery's $.get() method accepts three arguments. What order do they go in?

1. URL 2. Data for the server 3. Callback function to process the server response

What 3 parameters does jQuery's $.getJSON() method accept?

1. URL 2. data 3. success

What is the value of an XMLHttpRequest object's readyState when the browser has received all of the data from the server?

4

What is a 404 error?

404 is the status for a file not found. This can be if your link or script tags are incorrect, so check that first.

Finish this code to retrieve a JSON formatted version of the Flickr Public Photo Feed: https://api.flickr.com/services/feeds/photos_public.gne______

?format=json

What two parameters does jQuery's $.each() method accept?

A 1. An object 2. A callback to process the object's property names and values B 1. An array 2. A callback function to process the array items

jQuery's $.each() method is a faster way to write what type of JavaScript structure?

A loop

What is JSONP?

A method for requesting data from another web server by bypassing a web browser's "same origin" policy. JSON with Padding. A way of sending data in a JavaScript file.

Which server-side languages does AJAX work with? A Ruby B PHP C Python D Cold Fusion E All of the above

All of the above

What does API stand for?

Application Programming Interface

Which of the following correctly shows the $.ajax() method in action? A $('#sidebar').ajax("sidebar.html", function (response) { $('#sidebar').html(response); B $.ajax("sidebar.html", { success : function(response) { $('#sidebar').html(response); } });

B $.ajax("sidebar.html", { success : function(response) { $('#sidebar').html(response); } });

A variable named xhr contains an XMLHttpRequest Object. Which of these sends the AJAX request to the server? A xhr.post(); B xhr.send(); C xhr.XMLHttpRequest().send(); D xhr(); E xhr.sendRequest();

B xhr.send();

What is one characteristic of "asynchronous" AJAX requests?

Callbacks for multiple AJAX requests may not run in the order the requests were sent. Servers may take longer to respond to certain requests, so callbacks run in the order in which the responses return.

What does CDN stand for?

Content Delivery Network. A CDN is used to deliver content from a third party server.

What does jQuery's serialize() method do?

Creates a text string with standard URL-encoded notation of fields in an HTML form.

What does CORS stand for?

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

Which of these is an example of a valid query string? A http://server.com/page.php B http://server.com/page.php?name=Johnny Depp&movie=Pirates of the Caribbean: A Dead Man's Chest C http://server.com/name=Johnny Depp&movie=Pirates of the Caribbean: A Dead Man's Chest D http://server.com/page.php?name=Johnny+Depp&movie=Pirates+of+the+Caribbean%3A+Dead+Man%27s+Chest

D http://server.com/page.php?name=Johnny+Depp&movie=Pirates+of+the+Caribbean%3A+Dead+Man%27s+Chest

Which of the following is a web browser's method for turning a JSON string into a JavaScript object? A parseJSON() B parse.JSON() C json.parse() D JSON.parse() E JSONParse()

D JSON.parse()

JSON data can be formatted in which of these ways? A As an array of values B As a JavaScript object containing property name / value pairs C As an array of JavaScript objects D All of the above

D All of the above

Why would you use jQuery's $.ajax() method instead of one of the simpler shorthand methods like $.get(), $.getJSON() or $.post()? A The $.ajax() method has more options and provides greater control of the AJAX request. B The $.ajax() method lets you set a timeout to control how long you're willing to wait for a response from a server. C The $.ajax() method lets you send a username and password to resources that require user authentication. D All of the above.

D All of the above.

Which of the following IS TRUE about JSON properties? A Property names must be capitalized B Property names must start with op_ C Property names are separated from property values by a comma D Property names must be quoted using double quotes E None of the above

D Property names must be quoted using double quotes

Imagine you have a web page that is retrieved from http://www.myserver.com. Which of the following scenarios is NOT against a web browser's same-origin policy? A Sending an AJAX request from this page to https://www.myserver.com/response.php B Sending an AJAX request from this page to http://www.myserver.com:8888/response.php C Sending an AJAX request from this page to http://db.myserver.com/response.php D Sending an AJAX request from this page to http://www.anotherserver.com/response.php E None of the above.

E None of the above.

When should you use the POST HTTP method with AJAX? A Everytime you submit information from a form. B When you want to send data that the web server should store in a database. C When you want to send more than 2083 characters of data to the web server. D All of the above. E Answers B and C only.

E Answers B and C only.

Which of the following correctly creates an XHR object? A var request = new xhrObject(); B var xhr = new XMLHttpRequestObject(); C var xhr = XMLHttpRequest(); D var xhr; E var request = new XMLHttpRequest();

E var request = new XMLHttpRequest();

Which of the following programming languages can be used to talk to third-party APIs? A Ruby B PHP C Python D JavaScript E All of the above

E All of the above

Which of the following is NOT a jQuery AJAX shorthand method? A .load() B $.get() C $.post() D $.getJSON() E All of these are shorthand AJAX methods

E All of these are shorthand AJAX methods

Which of the following is valid JSON? Choose the correct answer below: A [ "AJAX Basics", "jQuery Basics" ] B { "course1" : "AJAX Basics", "course2" : "jQuery Basics" } C "AJAX Basics" D [ { "course" : "AJAX Basics" }, { "course" : "jQuery Basics" } ] E Answers A, B, and D

E Answers A, B, and D

What does an HTTP status code of 200 mean?

Everything is ok

What does XML stand for?

Extensible Markup Language.

AJAX is the W3C's (World Wide Web Consortium's) official term for an XMLHttpRequest.

False

GET =

GET. Used for most requests. Browser uses the GET method whenever it requests a new web page, CSS file, image, and so on. Use GET when you want to "get" something from the server.

What is a query string?

Information sent to the web server. It is added to the end of a URL.

What does this code do? $(document).ready(function () { });

It waits until the HTML for the page has loaded before running the JavaScript code placed inside it.

What does jQuery's preventDefault() method do?

It's used with an event object to prevent the browser from responding normally to an event -- for example, it prevents a form from being submitted, or loading a new web page when a link is clicked.

Define JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

Define JSONP

JSONP (means "JSON with Padding") is a method commonly used to bypass the cross-domain policies in web browsers (you are not allowed to make AJAX requests to a webpage perceived to be on a different server by the browser). JSON and JSONP behave differently on both the client and the server.

What is the difference between jQuery's .load() AJAX method and jQuery's other shorthand AJAX methods?

The .load() method must be chained onto a jQuery selection. For example, $('#element').load('page.html');

jQuery passes the data from the server response to the callback function of $.get(). This is the same as which of the following XMLHTTPRequest object properties?

The responseText property

jQuery's $.ajax() method accepts a JavaScript object containing settings for how the AJAX request is handled. What is that object's success property used for?

To set a callback function that runs when the browser successfully receives a response from the server.

An API lets you connect to a third-party web site like YouTube or Twitter and request content.

True

HTML and XML both use tags to mark up information.

True

When adding standard AJAX requests to your pages, you need to view that page through a web server in order to preview the results.

True

What does AJAX let you do?

Update content on a web page without loading a new web page.

What is a common reason for using the GET HTTP Method to send an AJAX request?

When you're only interested in getting information from a web server.

XML is the preferred format for AJAX responses because XML is the easiest format for JavaScript to work with.

XML is the preferred format for AJAX responses because XML is the easiest format for JavaScript to work with.

What is a 401 error?

You would get a 401 response if you're not authorized to access a URL because it requires some kind of login or other permissions to access.

What would you use GET or POST for

You'll use GET if you want to send a request for data, a request for data and POST if you're sending the data (that should be saved). Like information from a form, for the server to save in the database.

When a web server sends JSON-formatted data, what is it sending?

a string

Finish the code below to insert the contents of the variable "sidebarHTML" into an HTML element with the ID of "sidebar". Make sure you insert this content as HTML using jQuery. $('#sidebar').____________;

html(sidebarHTML) $('#sidebar').html(sidebarHTML);

When a server answers an AJAX request it sends back a...

response

You can use jQuery's $.each() function to process an array of items. What two arguments are passed to the callback function that processes the array?

response and function????

What will appear in the alert dialog box when this code runs? var word = "Treehouse"; alert( typeof word);

string

Complete the code below to add a submit event handler to a form: $('form').__(function (evt) { });

submit $('form').submit(function (evt) { });

In the app.js file, create a variable named request and assign it a new XMLHttpRequest object.

var request = new XMLHttpRequest();