Edit in JSFiddle

// handles the click event, sends the query
function getPage(slug) {
	var query = '{ object(bucket_slug: "creative-agency", slug: "' + slug + '"){title, content, metadata} }'
  $.ajax({
    url:'https://graphql.cosmicjs.com/v1',
    data: { query: query },
    contentType: 'application/graphql',
    complete: function(response) {
      if (!response.status) {
        // handle errors
        console.log('error')
      } else {
        // parse data
        var response_json = JSON.parse(response.responseText);
        var page = response_json.data.object;
        var headline = page.metadata.headline;
        var content = page.content;
        var main_image = page.metadata.main_image;
        var markup = '<h1>' + headline + '</h1>';
        markup += '<div>' + content + '</div>';
        markup += '<img src="' + main_image.imgix_url + '?w=300"/>';
        $('#page').html(markup);
      }
    }
  })
}
<div id="page"></div>
<script>getPage('about');</script>