Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-22-2007, 02:58 PM   PM User | #1
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
My ajax script returns my response before it is completed

Here is my script.

PHP Code:
AJAX = {
    
xmlHttp:'',
    
    
init : function(methodTypeurl){    
        
        
AJAX.xmlHttp=AJAX.getXmlHttpObject();
        
        if (
AJAX.xmlHttp==null){
            
alert ("Your browser does not support AJAX!");
        return;
        } 
    
        
AJAX.xmlHttp.onreadystatechange=AJAX.stateChanged;
        
AJAX.xmlHttp.open(methodType,url,true);
        
AJAX.xmlHttp.send(null);
        
    },
    
    
stateChanged : function(){
        if (
AJAX.xmlHttp.readyState==4){
            return 
AJAX.xmlHttp.responseText;
        }
    },
    
    
getXmlHttpObject : function(){
    
        
AJAX.xmlHttp=null;
    
        try {
            
// Firefox, Opera 8.0+, Safari
            
AJAX.xmlHttp=new XMLHttpRequest();
        }
        catch (
e){
    
            
// Internet Explorer
            
try{
                
AJAX.xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (
e){
                
AJAX.xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        
        }
    return 
AJAX.xmlHttp;
    }

I call it using something like this.

PHP Code:
var response=AJAX.init("GET","./test.php"); 
But since the init function doesn't return anything response is undefined. How do I get my response from stateChanged function.

thanks,
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-22-2007, 03:12 PM   PM User | #2
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
Ok so I found one way of handling this.

Turning off async and making the script wait for a response.

e.g.

Changing:

PHP Code:
 AJAX.xmlHttp.open(methodType,url,true); 
To:

PHP Code:
 AJAX.xmlHttp.open(methodType,url,false); 
But I've read that this is bad. Any explanations of why it is bad?
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-22-2007, 06:10 PM   PM User | #3
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
The time it takes to execute the response goes up by more than 3x on my development server when using synchronous mode. With async on it takes anywhere from 4ms to 6ms according to firefox(firebug). And with the script waiting to sync it takes anywhere from 18ms to 21ms. Doesn't seem that bad, but if this was a production server under heavy load it, those numbers would probably get a lot worse.

So as for my solution I think I'll just go with async and just add an extra parameter to my init function. So along with the method and url I'm also going to be passing the object that I want to update with my responseText.

PHP Code:
AJAX = {
    
xmlHttp:'',
    
divId:'',
    
    
init : function(methodTypeurldivId){    
        
AJAX.divId=divId;
        
        
AJAX.xmlHttp=AJAX.getXmlHttpObject();
        
        if (
AJAX.xmlHttp==null){
            
alert ("Your browser does not support AJAX!");
        return;
        } 
    
        
AJAX.xmlHttp.onreadystatechange=AJAX.stateChanged;
        
AJAX.xmlHttp.open(methodType,url,true);
        
AJAX.xmlHttp.send(null);
        
    },
    
    
stateChanged : function(){
        if (
AJAX.xmlHttp.readyState==4){
            
AJAX.divId.innerHTML=AJAX.xmlHttp.responseText;
        }
    },
    
    
getXmlHttpObject : function(){
    
        
AJAX.xmlHttp=null;
    
        try {
            
// Firefox, Opera 8.0+, Safari
            
AJAX.xmlHttp=new XMLHttpRequest();
        }
        catch (
e){
    
            
// Internet Explorer
            
try{
                
AJAX.xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (
e){
                
AJAX.xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        
        }
    return 
AJAX.xmlHttp;
    }

And Make the call like:

PHP Code:
var response=AJAX.init("GET","./test.php",document.getElementById("ajax")); 
Please critique my code, I have no idea what I'm doing
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-24-2007, 04:21 AM   PM User | #4
rwedge
Regular Coder

 
Join Date: Feb 2005
Posts: 679
Thanks: 0
Thanked 16 Times in 15 Posts
rwedge is on a distinguished road
Native use of XMLHttpRequest is supported by IE7.

Checking the status for 200 to handle any error may help if it takes awhile to receive the response
rwedge is offline   Reply With Quote
Users who have thanked rwedge for this post:
ghostz00 (08-24-2007)
Old 08-24-2007, 04:39 AM   PM User | #5
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
Thanks for the reply

Shouldn't I leave that code to support IE 6? Also I'm not quite sure how to add a status check? I'm assuming that I'm doing the check before it gets to readyState 4.

PHP Code:
if (AJAX.xmlHttp.readyState<4){

if (
AJAX.xmlHttp.status="404"){
AJAX.xmlHttp.abort();
}

Is that what your talking about? If not could you give me an example? The more I think about it. The more it make sense to do something like that.
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-24-2007, 07:17 AM   PM User | #6
rwedge
Regular Coder

 
Join Date: Feb 2005
Posts: 679
Thanks: 0
Thanked 16 Times in 15 Posts
rwedge is on a distinguished road
Leave the code in code to support the eariler versions of IE.

To handle the status
Code:
        if (AJAX.xmlHttp.readyState==4){
            if  (AJAX.xmlHttp.status == 200) {
            AJAX.divId.innerHTML=AJAX.xmlHttp.responseText;
            } else {
             // do something
             // AJAX.xmlHttp.status  // 404, 500 etc
             //  AJAX.xmlHttp.statusText  // Not Found, Internal Server Error etc
            }

        }
rwedge is offline   Reply With Quote
Old 08-24-2007, 12:21 PM   PM User | #7
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
Ok I get it...

thanks
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-27-2007, 07:33 AM   PM User | #8
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
AJAX wrapper functions should be generic and reusable. Putting specific requirements as below will render it useless to other functionalities that need AJAX.
Code:
stateChanged : function(){
        if (AJAX.xmlHttp.readyState==4){
            AJAX.divId.innerHTML=AJAX.xmlHttp.responseText;
        }
    },
You should add a callback function in the init function in order for the onreadystatechange handler to call it once the response is available.
Code:
AJAX = {
    xmlHttp:'', 

    init : function(methodType, url, callback){    
        
        AJAX.xmlHttp=AJAX.getXmlHttpObject();
        
        if (AJAX.xmlHttp==null){
            alert ("Your browser does not support AJAX!");
        return;
        } 
    
        
        AJAX.xmlHttp.open(methodType,url,true);
        AJAX.xmlHttp.onreadystatechange=function(){AJAX.stateChanged(callback)};
        AJAX.xmlHttp.send(null);
        
    },
    
    stateChanged : function(callback){
        if (AJAX.xmlHttp.readyState==4){
            if  (AJAX.xmlHttp.status == 200) {
                if (callback) callback(AJAX.xmlHttp.responseText);
            }
        }
    }, 
    ...
}

function myCallbackFunction(responseText){
  alert(responseText);
  //do what you want with the response
}

var response=AJAX.init("GET","./test.php", myCallbackFunction);
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app
glenngv is offline   Reply With Quote
Old 08-27-2007, 12:28 PM   PM User | #9
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
Thanks for the reply,

That is a good idea. One question though. What's up with this line?

PHP Code:
AJAX.xmlHttp.onreadystatechange=function(){AJAX.stateChanged(callback)}; 
why not just:?

PHP Code:
AJAX.xmlHttp.onreadystatechange=AJAX.stateChanged(callback); 
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-27-2007, 07:35 PM   PM User | #10
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
Doing what you suggested would immediately call the stateChanged handler and assign the return of that function to onreadystatechange. You don't want to do that. What you want to do is as assign onreadystatechange to a function pointer.

What I did was I assign the onreadystatechange to an anonymous function. You can also assign it to a named function just like what you did here.
Code:
AJAX.xmlHttp.onreadystatechange=AJAX.stateChanged;
Take note that you didn't put () to the stateChanged function. If you put (), it would be immediately executed and not assign it to a handler. If your function has parameters, normally you would use an anonymous function. Thus the solution:
Code:
AJAX.xmlHttp.onreadystatechange=function(){AJAX.stateChanged(callback)};
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app

Last edited by glenngv; 08-27-2007 at 07:38 PM..
glenngv is offline   Reply With Quote
Users who have thanked glenngv for this post:
ghostz00 (08-27-2007)
Old 08-27-2007, 07:46 PM   PM User | #11
ghostz00
Regular Coder

 
ghostz00's Avatar
 
Join Date: Aug 2006
Posts: 128
Thanks: 11
Thanked 2 Times in 2 Posts
ghostz00 is an unknown quantity at this point
I get it....absolutely brilliant thanks for your help. That actually answers another one of my problems..

thanks again...
__________________
Greg
ghostz00 is offline   Reply With Quote
Old 08-28-2007, 11:08 AM   PM User | #12
vijay1985
New to the CF scene

 
Join Date: Aug 2007
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
vijay1985 is an unknown quantity at this point
check

im checking the forum
vijay1985 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:08 AM.


Advertisement
Log in to turn off these ads.