The obligatory “My Ajax Tutorial” Post

calendar Posted on January 8, 2006   comments 4 Comments

[Major help from "dutch" at work and all the other's who have "gone before" me...]

I posted about my battle with trying out "Ajax" last week. I learned some stuff. While there are tons of Ajax Primers out there, I figured I could have one too, since I didn't find one that would teach me quite what I wanted to do (granted, I'm *not* a Javascript expert).

Some context here. I consider myself a pretty decent coder. In one language or another I have over 20 years under my belt. (not that you'll guess that from the below samples!). But javascript is not a forte of mine, by any stretch of the mind. And this XMLHTTPRequest stuff is very new to me. But I like it!

Here's some silly/simple stuff that I cobbled together while I was doing some of my troubleshooting.

First off, I needed a simple little "client" page. All this page had was the bare minimum html and a form with one checkbox. I called this page xmlhttp_client.asp. Here's the form, with one wrinkle:

PLAIN TEXT
ASP:
  1. <form action="post" name="test">
  2. <input type="checkbox" name="chkTest" onclick="submitTest(event);" />
  3. <%
  4. httpSetting = request.ServerVariables("HTTPS")
  5. if httpSetting = "on" then
  6.    httpPrefix = "https://"
  7. else
  8.    httpPrefix = "http://"
  9. end if
  10. fullPathInfo = httpPrefix & request.ServerVariables("Server_Name") & Request.ServerVariables("Path_Info")
  11. pathInfo = mid(fullPathInfo, 1, (InStrRev(fullPathInfo, "/")))
  12. %>
  13. <input type="hidden" name="root" value="<%=pathInfo%>" />
  14. </form>

See the wrinkle? Yeah, that big chunk of vbscript embedded in there. Gotta make sure the url's match coming and going from the server so I just build it up, stuff it in a form field and grab it from the javascript routines before I make my call (you'll see that next). If your goal isn't to be able to run your stuff on any old server without touching code, you can leave all that ASP/vbscript gunk out, of course.

Note this line, it is where all the magic really starts:

PLAIN TEXT
HTML:
  1. <input type="checkbox" name="chkTest" onclick="submitTest(event);">

Click the box, fire SubmitTest(). What does SubmitTest() look like? Funny you should ask.

PLAIN TEXT
JavaScript:
  1. function submitTest(evt){
  2.    var buff
  3.    // process event here, handles both IE and Mozilla event models
  4.    evt = (evt) ? evt : ((window.event) ? window.event : "")
  5.    if (evt) {
  6.       elem = (evt.target) ? evt.target : evt.srcElement;
  7.       URLString = document.test.root.value + "xmlhttp.asp";
  8.       //alert(URLString);
  9.  
  10.       http.open("POST", URLString, true);
  11.       http.onreadystatechange = processReqChange;
  12.       http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  13.       http.send("action=submitTest");
  14.    }
  15. }

Remember that goofy ASP logic in the HTML? You can see it actually means something now -- here's where it gets used:

PLAIN TEXT
JavaScript:
  1. URLString = document.test.root.value + "xmlhttp.asp";

xmlhttp.asp is, of course, the name of the file that contains all the server processing logic. Now, I'm insulated against moving my code from one server to another. Presumably, I won't be renaming xmlhttp.asp, of course.

Thing is, that function isn't quite as clear as it could be. You see an object named "http" referenced frequently, but I haven't showed where it came from yet! Oops. Well, easily remedied... This next bit just lives in the same block as all the rest:

PLAIN TEXT
JavaScript:
  1. function getHTTPObject()
  2. {
  3.     var xmlhttp;
  4.     /*@cc_on
  5.     @if (@_jscript_version>= 5)
  6.         try {
  7.             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  8.         } catch (e) {
  9.             try {
  10.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.              } catch (E) {
  12.                 xmlhttp = false;
  13.             }
  14.         }
  15.     @else
  16.         xmlhttp = false;
  17.     @end @*/ 
  18.    
  19.     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  20.         try {
  21.             xmlhttp = new XMLHttpRequest();
  22.             xmlhttp.overrideMimeType('text/xml');
  23.             } catch (e) {
  24.             xmlhttp = false;
  25.         }
  26.     }
  27.     return xmlhttp;
  28. }
  29.  
  30. var http = getHTTPObject(); // We create the HTTP Object

That code was cheerfully lifted from about a dozen other tutorial pages. I like it and it seems to work well. It is the epitome of a "cut, paste and don't overthink it" piece of code. :-)

Look back to the SubmitTest() function and the use of that http object:

PLAIN TEXT
JavaScript:
  1. ...
  2.    http.open("POST", URLString, true);
  3.    http.onreadystatechange = processReqChange;
  4.    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  5.    http.send("action=submitTest");
  6.    ...

I'm doing a POST, to URLString (my server stuff in xmlhttp.asp) and, by setting "true" I indicate that it will be an async call. Thus, the next line. It sets my "callback" function -- processReqChange() in this case.

Because I'm doing this as a POST, I need to set the content-type (which was my personal waterloo for a day...). And finally, send it with whatever I care to post. If there are multiple vars to post, just format as if they're in a querystring (this=that&foo=bar&do=doot).

If I was doing this as a sync call, it gets a bit simpler. Just toss all my logic after that send to catch the response. But suppose there's some network issues? Or [insert hand-waving here to explain why I want this to be async besides "because it is neat-o"!]?

Our callback function doesn't do much:

PLAIN TEXT
JavaScript:
  1. function processReqChange()
  2. {
  3.     var response;
  4.     var result;
  5.     
  6.    // only if http shows "complete"
  7.     if (http.readyState==4) {
  8.         if (http.status==200) {
  9.             //alert("success");
  10.         response = http.responseXML.documentElement;
  11.             result = response.getElementsByTagName('result')[0].firstChild.data;
  12.             alert(result);
  13.         }
  14.         else {
  15.             alert("Failed: " +http.status);
  16.         }
  17.     }
  18. }

Very light weight. Originally, it solely existed to pop an alert message so I knew I just got that far. In the real world, I actually fill a <div> tag set with some user feedback so that my user knows something happened. In this case though, I just wanted to throw an alert either with what my server function sent back or what the http error might be. What about this readyState thing? There are 4 values:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

[source]
In this case (most?) we really aren't all that interested until it is complete... but our callback will get called on each (change it, put in some alerts and watch each one roll by = exercise for the reader).

And there's the client.

----------

What does the server stuff look like? I have that all in a file called xmlhttp.asp (such clever names, I know). For this sample/testing, all I wanted to do was hit a specific row in the database, retrieve the boolean value and flip it. True to False. False to True. Then I could not only check my http response, and the xml I returned, but also independently just query that database.

PLAIN TEXT
ASP:
  1. <!-- #include File="db.asp" -->
  2. <%
  3.  
  4. dim action, sSQL, rsRecord, responseString
  5.  
  6. 'Get query string variables
  7. action = request.querystring("action")
  8. if action = "" then action = request.Form("action")
  9.  
  10. Select Case action
  11.  
  12.     Case "submitTest"
  13.         set rsRecord = Server.CreateObject("ADODB.Recordset")
  14.         sSQL = "SELECT * FROM PARTY_EXTENSION where PRTY_ID = 9999"
  15.         rsRecord.Open sSQL,cnSM,1,3
  16.         if rsRecord("extension_value") = "true" then
  17.             rsRecord("extension_value") = "false"
  18.         else
  19.             rsRecord("extension_value") = "true"
  20.         end if
  21.         rsRecord.Update
  22.         responseString = "<?xml version=""1.0"" encoding=""UTF-8"" ?><response><result>Updated "&rsRecord("extension_value")&"</result></response>"
  23.         rsRecord.Close
  24.        
  25.        
  26.     Case Else
  27.         'No action
  28.         responseString = "<?xml version=""1.0"" encoding=""UTF-8"" ?><response><result>Error - No Such Action Exists-"&action&"</result></response>"
  29. End Select
  30.  
  31. Response.ContentType ="text/xml"
  32. response.Write responseString

Nothing too fancy. Again, I just wanted to make sure the server was doing something and that I could independently verify it.

Summary
User loads up xmlhttp_client.asp and is presented with a single checkbox.
User clicks that checkbox, this firing the onChange event which calls...
... SubmitTest() so it lights up and makes the call to the server.
Server looks up the value in the database, flips the boolean and tosses it into an xml string and ...
... ProcessChangeRequest catches the xml and displays what just happened on/to the client.

Neat-o.

tags Tags: , ,

Related Posts Possibly Related Posts

Comments

4 Responses to “The obligatory “My Ajax Tutorial” Post”

  1. Stephen Hill on July 22nd, 2006 5:20 am

    Hello,

    This tutorial was really good and I stumbled across your site because I was having the same 411 Problem in FF. Even with adding the content-type it still wouldn’t work. I then noticed I was using the following code:

    xmlHttp.send(null);

    and null doesn’t have a length, so changing it to:

    xmlHttp.send(”");

    Made the error go away :D

    Many Thanks
    GK

  2. » pingback » Ajax battle rejoined - won! » Solo Technology on January 8th, 2007 8:05 am

  3. amit on January 21st, 2008 11:42 pm

    Hello,

    This tutorial was really good.
    I was having the length required. 411 Problem
    I then noticed I was using the following code:

    AjaxXmlHttp.send(null);

    and null doesn’t have a length, so changing it to:

    AjaxXmlHttp.send(”");

    Made the error go away :D

    Many Thanks
    amit

  4. Chandra Prabha on March 6th, 2008 4:18 am

    Hi,

    I am also having the same problem. “POST” method is working fine in IE6/IE7. Even in firefox/WinXP. Its not working in firefox/WinNT and firefox/Win98…

    I gone through some other topics also in this site. And tried every thing. But its of no use.

    FYI: My server is APACHE.

    Here is my code.
    var repa = “re=” + escape(window.location.href);
    request.open(”POST”, uri, true);
    request.setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded’);
    request.setRequestHeader(’Date’, new Date().getTime());
    request.setRequestHeader(’Content-length’, repa.length);
    request.setRequestHeader(”Connection”, “close”);
    request.send(repa);

    Help me to fix this.
    Thanks in advance

Leave a Reply




Have you read the Comments section on the Disclaimer page?

About

Wandering the Internet, looking at all things bright and shiny. Playing with many, writing about some. More …

Recent Posts

Recent Comments: