What is faster jQuery.load or jQuery.ajax() when loading HTML from PHP file?

Question

I have PHP file named "content.php" prepared for both kind of requests, just as an example:

<?php
  // Id params passed via GET method
  $get = $_GET['param'];
  switch ($get) {
    case "param_value":
?>
  <div data-param="<?php echo $get; ?>">
    // My HTML content here
  </div>
<?php
      break;
    case default:
      break;
  }

  // Id params passed via POST method
  $post = $_POST['param'];
  if ($post != "") {
    $data['output'] = '
      <div data-param="<?php echo $get; ?>">
        // My HTML content here
      </div>
    ';
    echo json_encode($data);
  }
?>

And than I have Javascript file, from which I am making an AJAX call to PHP:

var oWrapper = jQuery("#wrapper"),

// Loading HTML via jQuery.load() function
    sParams = jQuery.param({ param: "value" });
oWrapper.load("/content.php?" + sParams, function () {
  console.log("content loaded via load()");
});

// Loading HTML via jQuery.ajax() function
jQuery.ajax({
  type: "POST",
  dataType: "json",
  url: "/content.php",
  cache: false,
  data: { "param": "value" },
  success: function (data) {
    oWrapper.html(data.output);
    console.log("content loaded via ajax()");
  }
});

Which way is faster?

Besides the speed of requests and returns, I wish to know which way is better for security of the app?!

.load is just shorthand for $.ajax (and $(element).html(data)), there's no other difference. You can also use $.post('/content.php', { "param": "value" }, function(){}, 'json'); or $.getJSON("/content.php?" + sParams, function(){}); which are also just shorthand for $.ajax. — gen_Eric
– gen_Eric, Commented Sep 28, 2011 at 18:45

user400654 · Accepted Answer · 2013-03-29 14:48:40Z

5

Both ways do pretty much exactly the same thing.

Internally, $(selector).load() uses $.ajax() to get the data, then $(selector).html() to set the html of the selected element to the response of the $.ajax() call.

If you are loading html into an element, use $(selector).load() because it is more readable. One is just as secure and as fast as the other.

Note: Internally jQuery now uses $.parseHTML() rather than $(selector).html() to convert the string to html. This doesn't really change anything though.

edited Mar 29, 2013 at 14:48

answered Sep 28, 2011 at 18:45

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juan Ignacio · Accepted Answer · 2011-09-28 18:49:26Z

0

I don't know the specifics but I dont't think there is a difference in security. load() and get() are "optimized" versions of ajax() so they will always be faster and better but I don't you or your visitors will ever feel the difference in a query like yours

answered Sep 28, 2011 at 18:49

Juan Ignacio

3,2678 gold badges37 silver badges54 bronze badges

Collectives™ on Stack Overflow

What is faster jQuery.load or jQuery.ajax() when loading HTML from PHP file?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related