CodingForums.com - xhr reuse or new?

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - xhr reuse or new? (http://www.codingforums.com/showthread.php?t=109331)

xhr reuse or new?

I was wondering how people are handing their XMLHttpRequest objects. Reusing the object for successive calls or creating a new one? I am currently using both ways. I have an "update" polling system that is using the same XMLHttpRequest for the entire session. Then my app also has user generated commands where it creates a new xhr each time.

So far they both seem to be working fine. I was wondering if anyone has experience that points towards favoring one way over another.

Thanks.

david_kw

Saf has a potential memory leak problem with reusing them, IIRC, and iew can get stuck in readystate 2 or 3 indefinitely.

I reuse them, but very, very, very carefully, and am not shy in creating a new one if the other one is in use. Reusing does seem to be very buggy at times.

I use this little function I wrote, I guess it's creating a new one each time. The only thing I don't like about it is the eval for the call back function, but I can't think of another way to reliably pass values from the initiation of the request to the call back function.

Code:

 var x=4;

 getReqObjPost("someurl.asp","param1=1&param2=2","callBack(xml,"+x+")");

Code:

//*******************************************************

// Sends an asyncronous xmlhttp request using post

// Pass the URL, Querystring, and callback function (as a string)

//*******************************************************

function getReqObjPost(url,params,func)

{

        if (window.XMLHttpRequest){

                 xmlhttp=new XMLHttpRequest();

         }

         else if (window.ActiveXObject){

            if(new ActiveXObject("Microsoft.XMLHTTP")){

                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

            }

            else{

                    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");

            }

    }

          xmlhttp.onreadystatechange=function(){

                  if(xmlhttp.readyState==4){        

                        if(xmlhttp.status==200){

                                var str=xmlhttp.responseText;

                                var xml=xmlhttp.responseXML;

                                eval(func);

                        }

                        else{

                                noData(xmlhttp.status,url);        

                        }

                }

          }

        var now=new Date();

        params=params + "&c_date"+now.getSeconds()+"=" + now;

        xmlhttp.open("POST",url,true);

        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

        xmlhttp.send(params);

}

Quote:

Originally Posted by Basscyst (Post 543073)

Code:

 var x=4;

 getReqObjPost("someurl.asp","param1=1&param2=2","callBack(xml,"+x+")");

Code:

 var x=4;

 getReqObjPost("someurl.asp","param1=1&param2=2",function() { callBack(xml,x) });

Works fine. The anonymous function creates a closure over all the variables available in the current scope (e.g. x), which then is referenced as an argument to callBack.

Quote:

Originally Posted by jkd (Post 543113)

Code:

 var x=4;

 getReqObjPost("someurl.asp","param1=1&param2=2",function() { callBack(xml,x) });

Works fine. The anonymous function creates a closure over all the variables available in the current scope (e.g. x), which then is referenced as an argument to callBack.

Okay, I'm trying, but I guess I don't see how to execute the function when it is passed in that fashion. And in your example, if based on my code, the variable xml does not yet exist at the time you are initially passing it.

???

Code:

function getReqObjPost(url,params,func)

{

        if (window.XMLHttpRequest)

          {

                 xmlhttp=new XMLHttpRequest();

         }

         else if (window.ActiveXObject)

    {

            if(new ActiveXObject("Microsoft.XMLHTTP"))

            {

                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

            }

            else

            {

                    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");

            }

    }

          xmlhttp.onreadystatechange=function()

          {

                  if(xmlhttp.readyState==4)

                {        

                        if(xmlhttp.status==200)

                        {

                                var str=xmlhttp.responseText;

                                var xml=xmlhttp.responseXML;

                                callback=func; Doesn't work

                                func This either

                        }

                        else

                        {

                                noData(xmlhttp.status,url);        

                        }

                }

          }

        var now=new Date();

        params=params + "&c_date"+now.getSeconds()+"=" + now;

        xmlhttp.open("POST",url,true);

        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

        xmlhttp.send(params);

}

I'm calling it like this:

Code:

<script type="text/javascript">

                window.onload=function(){

                        var x=4

                        getReqObjPost("test.asp","",function(){doIt(xml,x)});

                }

                function doIt(xml,m){

                        alert(m);

                        var content=toXHTML(xml.documentElement);

                        document.getElementById('container').appendChild(content);

                }

                </script>

If I understand your goal correctly, you just need to call the function like this.

Code:

  if(xmlhttp.status==200)

  {

    var str=xmlhttp.responseText;

    var xml=xmlhttp.responseXML;

    func(xml);

  }

And the call is slightly modified from jkd's so the anonymous function takes a parameter.

Code:

window.onload=function(){

  var x=4;

  getReqObjPost("test.asp","",function(xml){doIt(xml,x)});

}

david_kw

Yep that's the ticket. That mixed with some suggestions from Alien51, I have this. It's better, thanks!

Code:

function getReqObjPost(url,params,func){

        var xmlhttp=false;

        if(window.XMLHttpRequest){

            try{

                        xmlhttp = new XMLHttpRequest();

        }catch(e){

                        xmlhttp = false;

        }

    }else if(window.ActiveXObject){

               try{

                xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");

              }catch(e){

                try{

                          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

                }catch(e){

                          xmlhttp = false;

                }

                }

    }

    if(xmlhttp){

                  xmlhttp.onreadystatechange=function(){

                          if(xmlhttp.readyState==4){        

                                if(xmlhttp.status==200){

                                        var str=xmlhttp.responseText;

                                        var xml=xmlhttp.responseXML;

                                        func(xml);

                                }else{

                                        noData(xmlhttp.status,url);        

                                }

                        }

                  }

                var now=new Date();

                params=params + "&c_date"+now.getSeconds()+"=" + now;

                xmlhttp.open("POST",url,true);

                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

                xmlhttp.send(params);

        }

}

I will add some more info for you:

If you end up reusing the object, the open method should come before onreadystatechange

I talk about it here:
http://radio.javaranch.com/pascarell...817890773.html

If you are creating an object each time, it really does not matter what order they come in.

The standards say it should not matter, IE says otherwise!

With the status != 200 you should be using a try catch.
I talk about the error that can occur here:
http://radio.javaranch.com/pascarell...345471027.html

There is another group of fun errors with status codes in th 12XXX. (IE errors)
I actually have code in my handlers that see this error and issue a retry attempt.

Good thing to do is look at Dojo, Prototype, and YUI on what they do under the covers. You will see notes on errors and other strange things. I have seen almost all of them in my logs at work. I log all clientside errors with a custom framework. Drives me insane with Object Expected and the boss expects you to know what the issue is with a line number!

Eric

Also I love playing with Call() and Apply() with calling functions --Just kills IE5 if you care about that!

Eric

Quote:

Originally Posted by A1ien51 (Post 545009)

Also I love playing with Call() and Apply() with calling functions --Just kills IE5 if you care about that!

I love using them on DOM methods, that kills all ie versions...

Quote:

Originally Posted by liorean (Post 545011)

I love using them on DOM methods, that kills all ie versions...

I like to use document.all :)

Eric