<h3>An AJAX Example <span>with jQuery's <code>load</code></span> method</h3>
<p>Data retrieved from <a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Wikipedia</a></p>
<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Einstein.jpg" alt="Einstein">
  <button id="request">Learn more about Einstein</button>
  <div id="bio"></div>
</div>

/* GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

$bg-main-color: #fdfdfd;

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html {
    font-size: 1em;
}

body {
  background: $bg-main-color;
  line-height: 1.625;
}

h3, p, div {
  text-align: center;
}

h3 {
  text-transform: capitalize;
  span {
    text-transform: none;
  }
}

button {
  display: block;
  margin: 15px auto;
}

#bio {
  max-width: 70%;
  margin: 15px auto;
  padding: 10px;
}

(function($) {

  // $(document).ready(function() {
  
  'use strict';
  
  // find the desired selectors
  var $btn = $('#request');
  var $bio = $('#bio');

  // register an event
  $btn.on('click', function() {
    // hide the button
    $(this).hide();
    // send the request and get the response
    $bio.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Bio.html p:first-child', completeFunction);
  });
  
  
  // complete function
  function completeFunction(responseText, textStatus, request) {
    // add a border
    $bio.css('border', '1px solid #e8e8e8');
    // uncomment the line below to see the request
    // console.log(request);
    // check if there are any errors
    if(textStatus == 'error') {
      // show a relevant message
      $bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
    } 
  }
  
// });
  
})(jQuery);