Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Workign with Ajax

    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.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    Yes of course ... just open the HTML file in the browser

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

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Also, your triggered(), which is your onreadystatechange event handler needs to be located inside
    your function loadurl(dest). It is currently outside of it.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    Quote Originally Posted by bullant View Post
    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?

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    are you suggesting it will work with the event handler outside?

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    It will. In that case there is no need to create a closure because he doesn't access anything from the surrounding scope.

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    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 = ...
       };
    }

  • Users who have thanked devnull69 for this post:

    bullant (04-28-2011)

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.
    Last edited by bullant; 04-28-2011 at 09:53 AM.

  • #11
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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?
    Last edited by bullant; 04-28-2011 at 10:15 AM.

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    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 ;-)

  • Users who have thanked devnull69 for this post:

    bullant (04-28-2011)

  • #13
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •