gravatar_demo.html

<script type="text/javascript" src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>

<script
src="https://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>

Gravatar Demo
<br>
<input type="text">
<br>
<h3>
Avatar
</h3>
<img class="test"/>
<h3>
Profile
</h3>
<div id="content" style="word-wrap: break-all;">
</div>

<script type="text/javascript">

//Define a function to create a md5-hash of a string
var md5 = function(value) {
    return CryptoJS.MD5(value).toString();
}

/*Event listener for every key up event in the input form element*/
$("input").keyup(function () {

     /*Create the hash of the email address*/
     var value = $(this).val();
     var hash = md5(value);

     /*Change the resource url of the image element*/
     $(".test").attr("src","https://www.gravatar.com/avatar/"+hash+".jpg");

      
     /*Send a GET request for the email and require the response to be in the JSON format*/
     $.get("https://de.gravatar.com/"+hash+".json").done(function(data){
          
          /*If the request was successfull, print out the whole JSON on the HTML document*/
     	  $("#content").text(JSON.stringify(data.entry[0]));

     }).fail(function(error){
		console.log("Error: "+error);
	 });
 });
</script>