AJAX Requests with jQuery

Using $.ajax

  • jQuery offers an .ajax() method that can be used to make API calls

  • Example of an AJAX call using jQuery’s $.ajax method

  $.ajax({
    url: 'some/url/specified/by/api',
    type: "GET",
    data: { name: 'bob' }
  })
  .done(() => {
    // execute this function if request is successful
    console.log(data)
  })
  .fail(() => {
    // execute this function if request fails
    alert('error occurred')
  })

$.ajax() properties

Here are some of the commonly used properties of the $.ajax() method:

  • url: address where the request is being sent

  • type: HTTP method that is being used for the request (i.e. GET, POST, PUT, DELETE), most of the time you’ll be using GET or POST

  • data: data to be sent to the server, for GET requests, this info will be added to the url value

  • done: function that will be called if request is successful

  • fail: function that will be called if request fails

Click here more information about the $.ajax() method

Example

function search (term) {
  const url = 'https://api.giphy.com/v1/gifs/search'

  // this is the public beta key, sign up for production if you want this to be live on the web
  // In a real project, NEVER store your API keys in Git
  const apiKey = '2qqBvRkz56JiTUcMbOJbak5VRRLEbV84'

  // Makes an API request to the giphy server with a request for data using the search term
  // This uses jQuery's .ajax() function

  console.log('step 2: make http request using $.ajax().')

  $.ajax({
    url: url,
    type: 'GET',
    data: { q: term, api_key: apiKey }
  })
  .done((response) => {
    console.log('step 3a: call this function if request is successful')

    console.log(response)
  })
  .fail((error) => {
    console.log('step 3b: call this function if request errors out')

    console.log(error)
  })
}

console.log('Step 1: invoke AJAX function.')
search("kittens")

console.log('Step 4: End of JS file.')

JS Bin on jsbin.com