Ajax用PHP调用非常慢

Question

I'm using Ajax to load the content of another page in a div with Twitter Bootstrap tabs, but the ajax is taking too long to load the page.
Without Ajax page loads very fast!

Page loaded in ajax call: 28.743376016617 ms
Page loaded without ajax: 0.00022506713867188 ms

This is a code of the ajax call:

    $(function() {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function(e) {
      var contentID  = $(e.target).attr("data-target");
      var contentURL = $(e.target).attr("href");

      if (typeof(contentURL) != 'undefined')

    $(contentID).html('<img src="<?php echo IMG_DIR; ?>loading/loading-large.gif" width="64" />').load(contentURL, function(){
        $("#MainTabs").tab();
    });
      else
    $(contentID).tab('show');
    });
    $('#MainTabs a:first').tab("show");
}); 

This is a PHP Code:

<?php
$start = microtime(TRUE); // Start counting

ob_start();
session_start();

$temp = microtime(TRUE) - $start;
echo $temp;

exit;

/*
 * Here is the rest of the contents of the script, so I gave the 'exit' and even with the exit delay it that way!
*/

Does anyone know what is happening and how to help me? The PHP code is very simple and is taking too long!

Thanks!

Answer 1

Do your Ajax load the html from backend that take time to produce html ?

Without Ajax you load less data so that's how its' run fast.

If you load the data that is not so usual then load through Async script. Load the ajax div seconds later after page load.

1. cancel the ajax request if this take a long time to load.

    $(document).ready( var xhr; var fn = function(){ if(xhr && xhr.readyState != 4){ xhr.abort(); } xhr = $.ajax({ url: 'ajax/progress.ftl', success: function(data) { //do something } }); }; var interval = setInterval(fn, 500); 

   );

Answer 2

Please use .ajax() call instead of .load().

Try this:

$(contentID).html('<img src="<?php echo IMG_DIR; ?>loading/loading-large.gif" width="64" />');
$(contentID).ajax(
   url: contentURL, 
   type: "GET",//or POST
   success: function(data){
     $(contentID).html(data);
     console.log(data);//it will show the error log if any [optional]
   }
});

Check here for ajax call

Answer 3

I had same issue and after adding headers:

header("Content-Length: xxx")

it works very fast.