MD5 hash decoding website which displays progress using AJAX

I'm creating a website which tries to decode md5 hashes (up to 5 chars).

Users can enter the MD5 hash they wish to decode and the website first checks whether the hash already is in the database.

Website: http://webtools.pieterhordijk.com

Hash in db: fbade9e36a3f36d3d676c1b808451dd7

Hash not in db: any other string of chars

If the hash isn't in the database yet the website will try to decode it.

What I would like to do is make an AJAX call to check if the hash is in the db. If not I want to display a progress counter while it is being decoded on the backend (PHP).

The code I currently have is:

$(document).ready(function() {
  $('form.decode').submit(function() {
    var form = $(this);
    var submit_button = $('input[name="submit"]', this);
    var submit_image = $(submit_button).attr('src');
    var action = $(this).attr('action');

    $('table.result tr').remove();

    var html = '';
    html+= '<tr>\n';
    html+= '  <td><img src="/style/information.png" alt="Information" title="Finding value"></td>\n';
    html+= '  <td>'+$('input[name="hash"]', form).val()+'</td>\n';
    html+= '</tr>\n';
    $('table.result').append(html);

    $(submit_button).attr('src', 'style/ajax-loader.gif');

    $.ajax({
      url: action+'/json',
      type: 'POST',
      data: ({hash : $('input[name="hash"]', form).val() }),
      dataType: 'json',
      success: function(data)
      {
        if (!data.result) {
          var html = '';
          html+= '<tr>\n';
          html+= '  <td><img src="/style/error.png" alt="Error" title="Hash not found in database"></td>\n';
          html+= '  <td>Couldn\'t find hash-value in our database!</td>\n';
          html+= '</tr>\n';
          html+= '&l开发者_如何学编程t;tr>\n';
          html+= '  <td><img src="/style/information.png" alt="Information" title="Decoding"></td>\n';
          html+= '  <td>Decoding hash (<span class="progress">0</span>%)</td>\n';
          html+= '</tr>\n';

          $('table.result').append(html);
        } else {
          var html = '';
          html+= '<tr>\n';
          html+= '  <td><img src="/style/accept.png" alt="Success" title="Decoded hash"></td>\n';
          html+= '  <td>'+data.value+'</td>\n';
          html+= '</tr>\n';

          $('table.result').append(html);
          $(submit_button).attr('src', submit_image);
        }
      }
    });

    return false;
  });
});

The code too long to read? -> I just make a AJAX call to see if hash exists and if it doens't exist I add a row to the results table with the progress of the decoding process (default 0%).

What do I need to do from here?

I was thinking:

If hash doesn't exist run a js-function which calls (AJAX) a background script which starts the decoding progress.

The background process keeps track of it's progress by updating the db each x seconds (primary_key is hash).

The js-function which calls the background process calls another function which (AJAX) requests the progress every x seconds from the server until 100%

However before I start working this out I want to know whether this is the way to do it or perhaps there is a way smarter way of doing this.

Instead of trying to brute force a hash,

• wouldn't it make more sense to download a rainbow table

Then have your program simply check the rainbow table (which you could store in SQL) instead of having to brute force every previously uncracked hash.

Should the hash not be in the rainbow table, that means that it is huge/not easy to breack and should not be attempted to be cracked by the website at risk of using too much CPU and crashing your site.