Clicky

Hi, I just spent 4 days on converting a little thingy I made, from based on FRAMES to AJAX instead.
 
Structure:
1 x menu box
1 x content box
 
However the frame-version seem to be:
- FASTER than the one using ajax. (about 2-3 times faster)
- and more STABLE! (5% of the times the ajax version doesn't show anything!?)
 
Is there anything wrong with my code? and can i use jquery to retry until it receives data?

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
$(document).ready(function(){
/* there are a few other common jquery things before this*/

 $('#menu').live("click", function(){
  $(this).effect("transfer",{ to: $('#content') }, 500)
  .queue(function(){
   $("#content")
    .empty().html('<img src="../../loading.gif" />')
    .dequeue();
    })
  $('#content').load($(this).attr('href'))
  $(this).slideUp({duration:'fast', queue: false})
  setTimeout(   function(){
   $('#menu').load('menu.pl');
   }, 2000);

  return false;
 });

/* there are a few others common jquery things after this*/
});

asked 07/29/2011 01:40

zquareroot's gravatar image

zquareroot ♦♦


8 Answers:
Don´t use jquery, use simple Ajax for performance:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
function Ajax(){
        if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}
        var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
        for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }
        return null;
    }

    var ajax = Ajax();
    if(ajax){
        ajax.onreadystatechange = ajaxOnReady
        ajax.open("GET", url, true);
        ajax.setRequestHeader("Cache-Control", "no-cache");
        ajax.setRequestHeader("Pragma", "no-cache");
        ajax.send(null)
    }

    function ajaxOnReady(){
        if (ajax.readyState==4){
            if(ajax.status == 200){
                var texto=ajax.responseText;
                if(texto.indexOf(" ")<0) texto=texto.replace(/+/g," ");
                elem.innerHTML = texto;
            }
            ajax = null
        }
    }
link
dagr9782's gravatar image

dagr9782

If you still want jQuery try to set the "cache" option to "true":

replace :
1:
$('#menu').load('menu.pl');

by :
1:
$.ajax({ url:'menu.pl', cache:true, success:function(menu) { $('#menu').html(menu); }  });
link
leakim971's gravatar image

leakim971

You may use this too to customize ajax call function (liket get, post, getJSON and ... load)
http://api.jquery.com/jQuery.ajaxSetup/
link
leakim971's gravatar image

leakim971

You two are really great!

dagr9782:
I really need performance!
Can I call it from jquery flow? so that I can keep my cool effects?
And how do I call it?
Where do I write the target DIV, and where do I write the URL??
- Right now it's so easy because I'm just having normal a-href links that are used in jquery, and they are changing after pretty much every click. - can you give me a clue? :-)


Leakim
Thanks but it went REALLY slow, now the loading, last 1-30 seconds. :-/
It's new content all the time though.
link
zquareroot's gravatar image

zquareroot

I guess it's just this line that must be replaced with something to load the content into the content DIV:

$('#content').load($(this).attr('href'))

But what??
link
zquareroot's gravatar image

zquareroot

I tink your main problem is your timer, too short
link
leakim971's gravatar image

leakim971

Hey again Leakim!

It's the content DIV that is loading slower though. The menu reloads so fast that it doesn't even flash!? :)
But the content DIV is slow even have timeouts sometimes , so it's very unstable.most of the time it's just a bit slower, other times we are talking seconds! :(

I'm starting to think that jquery is superb for small ajax pieces, but for big tables and form with +50 inputs, it might be worth trying raw ajax - bypassing jquery.

Just dont know if it's possible to keep all the effects.  
link
zquareroot's gravatar image

zquareroot

you can increase speed by uploading data instead huge HTML content.
IMHO this is not the purpose of Ajax.

For example you can download a json object : [ {"v":10,"t":"Ten"}, {"v":20,"t":"twentty"}]
to rebuild :
1:
<select><option value="10">Ten</option><option value="20">Twenty</option></select>


The use oof the jquery.load may let someone thinking you don't really load a entire page(in your case no doubt), that's wrong it's a usual ajax call loading a full page.

In your case if you just need to update table content, it's easy, quick to reload a full page but if you're able to just send the data to replace content of the current table  I'm sure you will have good performance
link
leakim971's gravatar image

leakim971

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×15
×104
×125
×63
×21

Asked: 07/29/2011 01:40

Seen: 747 times

Last updated: 11/02/2011 11:17