Trying to use a callback with .ajax call to assign value to a variable

Trying to use a callback with .ajax call to assign value to a variable

I'm trying to use a .ajax call, to assign the value from an xml document, to a variable in javascript.  I can't quite figure out how to use a callback, I know this topic is well discussed on forums, but I haven't been able to find an example out there that does what I am trying to do.  The example below makes a call to Google Maps, and gets a string "Central Standard Time" back.  I can use .ajax calls to move the text to a div.  But I can't figure out how to assign this to a variable, my_zone, and move that value to a div.

Anyone able to help me out?  Please?  If someone can do a rewrite of the code here, thanks....



<!DOCTYPE html>
<html>
<head>
  
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>


<script type='text/javascript'>
$(document).ready(function(){

  //this works great, we get the value and it goes to the 'zzz' div, asynchronously
  $.ajax({
type: "GET",
url: "https://maps.googleapis.com/maps/api/timezone/xml",
data: {
            location: '35.129186,-89.970787',
            timestamp: '1389006000',
            sensor: 'false'
        },
dataType: "xml",   
success: function(xml) {
 var val = $(xml).find('time_zone_name').text();    
 $( "#zzz" ).empty().append( val ); //want to return val  
}
  });  

  //this is what I am trying to do, get the return'd value, and put it into a variable
  var my_zone = getZone();     //just want to get the value into a variable
  $("#xxx").empty().append(my_zone);   //do something with it, maybe display it       

  function getZone() {
$.ajax({
 type: "GET",
 url: "https://maps.googleapis.com/maps/api/timezone/xml",
 data: {
 location: '35.129186,-89.970787',
 timestamp: '1389006000',
 sensor: 'false'
 },
 dataType: "xml",   
 success: function(xml) {
var val = $(xml).find('time_zone_name').text();    
console.log(val);
return val;  //needs to be part of a Callback 
 }
});     
  }
  ///////////

});
</script>

</head>
<body>
<div id="xxx">some output here....</div>
<div id="zzz">some output here....</div>
  
</body>

</html>