How to set an .ajax() responseText to a variable

My question is how can I get the HTML of one page and store it in an object that I can later search through with jQuery methods to get elements by id, name,class, etc.

This is what I have so far:

   $(document).ready(function(){
     $('#button').click(function() {
        var page = $.ajax({
                type: 'GET',
                url: 'Grabber.php',
                data: {url:$('#url')},
                dataType: "HTML",
                success: function(data){
                    alert(data); //this alert displays the correct information
                } 
                    }).responseText;
        alert(page); //this alert displays nothing
     });
  });  开发者_JAVA百科

How can i get that "page" variable to work? And even better, how can I store it so I can access it as if it were an HTML document. My only idea so far is as a DOM document.

$(document).ready(function(){
 var page;
 $('#button').click(function() {
    $.ajax({
            type: 'GET',
            url: 'Grabber.php',
            data: {url:$('#url')},
            dataType: "HTML",
            success: function(data){
                populate(data);
            } 
    });
    function populate(a) {
        page = a;
        alert(page)
        alert($(page).find('span').text())
    }

 });
});

Check the documentation, $.ajax returns XMLHttpRequest while the success method returns data, textStatus, XMLHttpRequest. What you need here is the data
And to access it you can do something like:

$(page).find('span').text()

The data in only available after a successful AJAX call. So any variable outside of this success function isn't necessarily set yet:

$(document).ready(function(){
     $('#button').click(function() {
        $.ajax({
          type: 'GET',
          url: 'Grabber.php',
          data: {url:$('#url')},
          dataType: "HTML",
          success: function(data) {
            // keep working _within_ this function
            // and call it "page" instead of "data" if you want
            alert(data);

            // and to find something within this data:
            $(data).find('.some-class')... // etc
          } 
        });
     });
});

In your success callback you should assign a variable outside of it's local scope so that when the function ends, the data is not lost. Then you can pass it as the second parameter to the jQuery method to have your jQuery selector act on the AJAX-fetched document instead of the Document.

var a_nasty_global_variable_you_should_put_in_a_better_place;

// most of your code…

    success: function(data){
      a_nasty_global_variable_you_should_put_in_a_better_place = data;
    }

// a little later…

$('#button', a_nasty_global_variable_you_should_put_in_a_better_place).addClass('is-awesome');

You get the gist of it, no?

You can either use global variable if you want that variable to be at same page where this ajax is present

or

You can use cookies to store your responseText if have to store some small amount of data and use responceText on other pages for cookies with jquery HELP?