How does one use GET/POST in AJAX?

#1

Tell us what’s happening:
Hi camp mentors!

I am learning the syntax with code academy so that I can attempt the projects provided here with more autonomy. I completed javascript on free code camp, had to stop to work on a meme award page, and found out I needed to review the information again in a different context.
I’m learning how to use AJAX. I don’t really understand what it is used for in the real world, but I keep getting undefined on the challenge. However, it’s actually because free code camp is such a positive experience that I am continuing to pursue coding.

A few questions:
What do you use AJAX for in the code below?
why does it keep returning undefined-what am I not typing in in the code

I don’t know if you can use my API key so here is the link to get your own API key:
API key instructions - go to get API key

Your code so far

// Include data for accessing Google APIs

const apiKey = 'I. AIzaSyB2sfWuybVQXFLw3x7YEq1HsIse6YR55Gw';
const url = 'https://www.googleapis.com/urlshortener/v1/url'
const projection = 'FULL';

// Some page elements

const $inputField = $('#input');
const $expandButton = $('#expand');
const $shortenButton = $('#shorten');
const $responseField = $('#responseField');

// AJAX functions

function expandUrl() { const urlToExpand = url + '?key=' + apiKey +
'&shortUrl=' + $inputField.val();
const xhr = new XMLHttpRequest;
xhr.responseType='json';
xhr.onreadystatechange=function(){if (xhr.readyState === XMLHttpRequest.DONE) {
  $responseField.append('<p>Your expanded url is: </p><p>' + xhr.response.longUrl + '</p>');
}
                             }

var motorBike = {

  // Only change code below this line.

};

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) **Chrome/64.0.3282.186** Safari/537.36.

Link to the challenge:

#2

AJAX is perhaps the most useful concept in web programming. All it means is that you’re using JavaScript to fetch data after the page’s initial content has been loaded. This lets you get more information for your app without having to reload the page. Google maps, Netflix, Spotify, Twitter, CodeAcademy, FreeCodeCamp and countless other sites work thanks to AJAX. It can be used to:

  • Get user data
  • Receive tweets
  • Search a map
  • Get map data
  • Watch a movie
  • Create a music playlist
  • Chat with people
  • Submit code challenges to a server

In the code example you’ve provided, you’re sending a shortened URL to Google’s service to be expanded. URL shortening is a technique that takes a very long URL and stores it on a server somewhere where it can be reached with a much shorter URL. For instance, https://www.google.com/search?q=this+is+a+very+long+search+query+that+will+take+up+a+lot+of+space&ie=utf-8&oe=utf-8&client=firefox-b-1-ab got shortened to https://goo.gl/GQi6aP (click on it - it actually works). This is useful for a lot of reasons, but especially for sharing links in areas where text length is constrained, like Twitter.

The way we interact with these services is by making web requests like the one you’ve written in the example. Your code constructs a request that looks like https://www.googleapis.com/urlshortener/v1/url?key=I. AIzaSyB2sfWuybVQXFLw3x7YEq1HsIse6YR55Gw&shortUrl=, then puts the user’s short URL on the end. Imagine using my own example, https://goo.gl/GQi6aP. The service then sends a response with the full URL. This is a pattern common to all AJAX operations - the client sends a request and the server sends a response. When your code receives the response, it displays the full URL on your page. Again, try it out with the shortened URL I provided.

You’re going to have to be way more specific here. What’s returning undefined? What are you doing exactly? Where do you see undefined?

#3