SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Bowling Green
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with code from "Ajax Web Applications' book

    I just bought "Build Your Own Ajax Web Applications" by Matthew Eernisse, and I am running into a problem with his Ajax code.

    I keep getting an error (from the JavaScript Console in Firefox) telling me that ajax.doGet is not a function. I have copied the code exactly as it is found in the book--so could someone help me find the problem. I am not familiar with JavaScript enough to troubleshoot something as complicated as Object Oriented JS.

    I am using a perl script to serve the fakeserver page, but it functions the same as PHP and is sending the data correctly. Any help would be wonderful since I can't fully utilize this book until I can get the basic script working.


    Thanks in advance!!

    Shane

    EDIT: I kid you not, 30 seconds after I sent the message I figured it out--ain't that the way it works. For anyone else having the same problem, it is as simple as moving the closing } bracket from your first code block all the way to the bottom of the file. If you don't enclose all of your functions within the main Ajax() function then this. loses it's scope.

    Easy fix, I hope it helps another newbie sometime




    The code is as follows:

    ajax.js
    Code:
    function Ajax() {
     this.req = null;
     this.url = null;
     this.method = 'GET';
     this.async = true;
     this.status = null;
     this.statusText = '';
     this.postData = null;
     this.readyState = null;
     this.responseText = null;
     this.responseXML = null;
     this.handleResp = null;
     this.responseFormat = 'text', // 'text', 'xml', or 'object'
     this.mimeType = null;
    }  <--- MOVE TO BOTTOM OF FILE!!   
    
    
    this.init = function() {
     if (!this.req) {
       try {
         // Try to create object for Firefox, Safari, IE7, etc.
         this.req = new XMLHttpRequest();
       }
       catch (e) {
         try {
           // Try to create object for later versions of IE.
           this.req = new ActiveXObject('MSXML2.XMLHTTP');
         }
         catch (e) {
           try {
             // Try to create object for early versions of IE.
             this.req = new ActiveXObject('Microsoft.XMLHTTP');
           }
           catch (e) {
             // Could not create an XMLHttpRequest object.
             return false;
           }
         }
       }
     }
     return this.req;
    };
    
    
    this.doReq = function() {
     if (!this.init()) {
       alert('Could not create XMLHttpRequest object.');
       return;
     }
     req.open(this.method, this.url, this.async);
     if (this.mimeType) {
     try {
       req.overrideMimeType(this.mimeType);
     }
     catch (e) {
       // couldn't override MIME type  --  IE6 or Opera?
     }
    }
     var self = this; // Fix loss-of-scope in inner function
     this.req.onreadystatechange = function() {
     var resp = null;
     if (self.req.readyState == 4) {
       switch (self.responseFormat) {
         case 'text':
           resp = self.req.responseText;
           break;
         case 'xml':
           resp = self.req.responseXML;
           break;
         case 'object':
           resp = req;
           break;
       }
       if (self.req.status >= 200 && self.req.status <= 299) {
         self.handleResp(resp);
       }
       else {
         self.handleErr(resp);
       }
     }
    };
     this.req.send(this.postData);
    };
    
    
    this.setMimeType = function(mimeType) {
     this.mimeType = mimeType;
    };
    
    
    this.handleErr = function() {
     var errorWin;
     try {
       errorWin = window.open('', 'errorWin');
       errorWin.document.body.innerHTML = this.responseText;
     }
     catch (e) {
       alert('An error occurred, but the error message cannot be '
         + 'displayed. This is probably because of your browser\'s '
         + 'pop-up blocker.\n'
         + 'Please allow pop-ups from this web site if you want to '
         + 'see the full error messages.\n'
         + '\n'
         + 'Status Code: ' + this.req.status + '\n'
         + 'Status Description: ' + this.req.statusText);
     }
    };
    
    
    this.setHandlerErr = function(funcRef) {
     this.handleErr = funcRef;
    }
    
    
    this.setHandlerBoth = function(funcRef) {
     this.handleResp = funcRef;
     this.handleErr = funcRef;
    };
    
    
    this.abort = function() {
     if (this.req) {
       this.req.onreadystatechange = function() { };
       this.req.abort();
       this.req = null;
     }
    };
    
    
    this.doGet = function(url, hand, format) {
     this.url = url;
     this.handleResp = hand;
     this.responseFormat = format || 'text';
     this.doReq();
    };

    ajaxtest.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta http-equiv="Content-Type"
           content="text/html; charset=iso-8859-1" />
       <title>A Simple AJAX Test</title>
       <script type="text/javascript" src="ajax.js"></script>
    </head>
     <body>
    
    <script>
       var hand = function(str) {
       alert(str);
       }
       var ajax = new Ajax();
       ajax.doGet('/fakeserver.cgi', hand);
    </script>
    
     </body>
    </html>

    fakeserver.cgi
    Code:
    #!/usr/bin/perl
    
    print "Content-type: text/html\n\n";
    
    $lower=1;
    $upper=5;
    $random = int(rand( $upper-$lower+1 ) ) + $lower;
    $sleeptime = $random;
    
    sleep($sleeptime);
    print 'ok';
    
    exit;
    Last edited by edwa5823; Oct 9, 2006 at 11:51. Reason: Error Solved


Bookmarks

Posting Permissions

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