some questions in load jquery.ajax

Question

function  contentDisp()
{
    $.ajax({
    url : "a2.php",
    success : function (data) {
    $("#contentArea").html(data);
    }
    });
}

<input type="button" value="Click" onClick="contentDisp();">&nbsp;<span style="color:blue;">
<textarea id="contentArea" rows="10" cols="50"></textarea>

I'm new learning jquery.ajax now. I found some tutorial on the web. these are some code for control jquery.ajax when click a button, then load the content from a2.php to div#contentArea. I have some questions:

1. whether the js code can add a jQuery(document).ready(function() if I want open the page, load the html(data) at onece, not a click callback?

2. whether jquery.ajax can load a div's content form a2.php, not a whole page? similar jquery.load $("#contentArea").load("a2.php #content"); .

Thanks.

Answer 1

If you put your ajax call in the document ready it will run and load content immediately. This is effectively how the default tab on jQuery tabs works.

jquery.load is an abstraction from the full ajax function. you can do anything with .ajax that you can with .load

As a note, I don't like calling $.ajax() with all of it's parameters repeatedly, I've shown my pattern previously here: Showing Loading Image in Modal Popup Extender in Webservice ajax call

For your purpose, however, the following snipped would load the page on page load.

<script>
  $(document).ready(function() {

    $.ajax({
      url: "a2.php"
      ,success: function(data) {
        $("#contentArea").html(data);
      }
    });

  });
</script>

<textarea id="contentArea" rows="10" cols="50"></textarea>