Workign with Ajax

sha1023012 · 04-27-2011, 10:32 PM

Hello everyone,
I am working with Ajax this is the first time I am learning about it. I have a few questions if anyone would be nice to explains. I am working on something for my class he gave us this to use

Code:

<html>
<head>
<title>Ajax Examples</title>
<style type="text/css">
body {
    font-family:      Trebuchet MS;
    color:            #173F5F;
      background-color:#BFFFFF; 
     margin:10px;
 }
.formtable{
     border:2px solid #009999;
     background-color:#006B6b;
     color:#FF6600;
}
.btnSubmit{
    color:#FF6600;
    background-color:#BFFFFF;
    border:2px inset #FF6600; 
    width:100px;
}
h1{
    color:#FF6600;
}
input, textarea{
    color:#FF6600;
    border:1px solid #FF6600;
}
hr{
    background-color:#FF6600;
    height:3px;
}
#results{
    color:#FF6600; 
    width:300px;
}
</style>
<script type="text/javascript">
function loadurl(dest) { 
    try {
        // Moz supports XMLHttpRequest. IE uses ActiveX.  
        // browser detection is bad. object detection works for any browser 
         xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
         new ActiveXObject("Microsoft.XMLHTTP"); 
    }
    catch (e) { 
        //browser doesn't support
        alert("Get with the times man!"); 
    }
     // the xmlhttp object triggers an event everytime the status changes 
     // triggered() function handles the events
     xmlhttp.onreadystatechange = triggered;
     // open takes in the HTTP method and url. 
     xmlhttp.open("GET", dest);
      // send the request. if this is a POST request we would have  
      // sent post variables: send("name=valerie&gender=female)  
      // Moz is fine with just send(); but   
      // IE expects a value here, hence we do send(null);
     xmlhttp.send(null);
}
function triggered() {
     // if the readyState code is 4 (Completed)  
     // and http status is 200 (OK) we go ahead and get the responseText   
     // other readyState codes:  
     // 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
        // xmlhttp.responseText object contains the response. 
         document.getElementById("output").innerHTML = xmlhttp.responseText;
     }
}
</script>
<title>LAB 14</title>
</head>
<body>
  <h1>Simple Ajax</h1> 
  <hr>
  <p>This page will automatically load another file into page below.</p>

 <a href="#" onClick="loadurl('info.html')" >click here to load another file</a>
 <div id="output"></div>
</body>
</html>

Now all he said is is for us to make your info.html page about you - you could make it a resume or something else of your choice. Now I have one that i did. My question would be I have a ftp server we are suppose to upload it to. Would i be able to see the page before its uploaded to see if it works or am I doing something or have something wrong on the page that is not correct.

devnull69 · 04-28-2011, 06:56 AM

Yes of course ... just open the HTML file in the browser

Internet Explorer: File/Open
Firefox: File/Open File

bullant · 04-28-2011, 08:16 AM

If you want to test the AJAX functionality, you will need to load it onto a web server - either a "real" one or one you can download onto your pc for free and run the server locally. I use XAMPP as my local server.

bullant · 04-28-2011, 08:25 AM

Also, your triggered(), which is your onreadystatechange event handler needs to be located inside
your function loadurl(dest). It is currently outside of it.

devnull69 · 04-28-2011, 09:07 AM

Quote:

Originally Posted by bullant

Also, your triggered(), which is your onreadystatechange event handler needs to be located inside
your function loadurl(dest). It is currently outside of it.

Why is that?

bullant · 04-28-2011, 09:13 AM

are you suggesting it will work with the event handler outside?

devnull69 · 04-28-2011, 09:19 AM

It will. In that case there is no need to create a closure because he doesn't access anything from the surrounding scope.

bullant · 04-28-2011, 09:24 AM

I always put it inside and have no problems. The 1 time I put it outside accidentally, it didn't work. I've seen people post ajax code in other forums asking why their code isn't working and it ends up being because their event handler is not inside the ajax function. That's why I will always tell people to put it inside their ajax function.

devnull69 · 04-28-2011, 09:39 AM

This will work. two() belongs to the global scope and is visible inside one().

Code:

function one() {
   xmlhttp.onreadystatechange = two;
}

function two() {
   ...
}

This won't work.

Code:

function one() {
   var anything = 'whatever';
   xmlhttp.onreadystatechange = two;
}

function two() {
   document.getElementById(anything).innerHTML = ...
}

In two() you try to access something from the local scope of one(). In that case you'll need to create a closure inside one()

Code:

function one() {
   var anything = 'whatever';
   xmlhttp.onreadystatechange = function() {
      document.getElementById(anything).innerHTML = ...
   };
}

bullant · 04-28-2011, 09:51 AM

and

Code:

function one() {    
       var anything = 'whatever';    

       //create ajax object here

       xmlhttp.onreadystatechange = requestHandler;

       function  requestHandler() {                      
            if(xmlhttp.readyState==4 && (xmlhttp.status == 200 || xmlhttp.status == 304))  {
                  //do other stuff
            }
       }
}

also works and is what I normally do. It's very similar to your last example where you use an anonymous function for the onreadystatechange event handler.

bullant · 04-28-2011, 10:09 AM

So is it safe to say that if you have your onreadystatechange event handler outside of the ajax function, then it may or may not work depending on what it does, but if it's inside the ajax function it will always work? Or have I misunderstood something?

devnull69 · 04-28-2011, 11:07 AM

No, this is definitely correct

But you originally stated that the "event handler needs to be located inside the function" which was not the case ;-)

bullant · 04-28-2011, 11:11 AM

yep, no problem - thanks for clearing that up

At least what I posted wouldn't have caused any problems for the op, but doing what I said I can see now is unnecessary in this particular case.

I was going on my own experiences. So for me. I'll continue to always put the event handler inside the ajax function.