Head First AJAX
Posted by Dan | Posted in JavaScript | Posted on 12-07-2009
2
Currently reading a great AJAX book, Head First AJAX, by Rebecca Riordan. I was a little skeptical at first by the format of these “Head First” books. I had heard so much about these books that I decided to give it a shot. I have to say I’m very pleased. It makes the material very easy to understand, and I certainly need a good book to review my AJAX.
So what is AJAX?
At its core, AJAX is just making a part of the page do something else while not refreshing the entire page. So for example, you can press a button, and just the button alone would load data from the server and display it on another part of the page (maybe right above it) while not loading the entire page. This is benefit one. It uses the JavaScript XmlHttpRequest (XHR) object .
Benefit two, is that with that XHR object, you can make HTTP requests that traditional HTML pages cannot. An HTML page can make a GET or POST request (e.g. via a form). With an XHR object, you have all HTTP request methods available.
When AJAX first came out, it used just XML – the server side script (e.g. ASP page) would generate XML data and the XHR object would retrieve it. Now, you can use JSON (a native JavaScript data structure) or any form of data structure you want. So the “X” in AJAX really is any type of data structure you want to pass the data from the ASP page to the XHR object.
Some JavaScript frameworks make AJAX extremely easy to use. jQuery can make a GET request using one line of code (compared to the many in the example code from my site). Also, jQuery is part of the .NET framework (last I heard MS announcing it) and should be integrated into Visual Studio.NET.
Here’s a great snippet that bundles the logic to return an XmlHttpRequest object if the browser can in fact create the object. I find it quiet useful.
function createRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMS) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } } return request; }
Some additional code, wrapped in functions, that sends the request object to the server, and fires the showUsernameStatus function. This is grabbed from the book site. Posting it here for my own benefit.
window.onload = initPage; function initPage() { document.getElementById("username").onblur = checkUsername; document.getElementById("register").disabled = true; } function checkUsername() { document.getElementById("username").className = "thinking"; request = createRequest(); if (request == null) alert("Unable to create request"); else { var theName = document.getElementById("username").value; var username = escape(theName); var url= "checkName.php?username=" + username; request.onreadystatechange = showUsernameStatus; request.open("GET", url, true); request.send(null); } } function showUsernameStatus() { if (request.readyState == 4) { if (request.status == 200) { if (request.responseText == "okay") { document.getElementById("username").className = "approved"; document.getElementById("register").disabled = false; } else { document.getElementById("username").className = "denied"; document.getElementById("username").focus(); document.getElementById("username").select(); document.getElementById("register").disabled = true; } } } }
Here’s a simple way to read a text file (data.txt), barebones, on Firefox, without checking if XMLHttpRequest object exists or not.
<html> <head> <script language="JavaScript"> ajax = new XMLHttpRequest(); function ShowData() { ajax.open( "GET", "data.txt", true ); ajax.onreadystatechange = function() { if ( ajax.readyState == 4 ) { document.getElementById("DataPanel").innerHTML = ajax.responseText; } } ajax.send(null); } </script> <title>hey!</title> </head> <body> <button onclick="ShowData()">Show Data</button> <div id="DataPanel"></div> </body> </html>
This is data.txt, which is in the same directory as the html page above:
05/12/2009 10:32 PM 1,024 .rnd 10/03/2009 12:55 AM 428 1.txt 05/11/2009 10:37 PM 0 AUTOEXEC.BAT 09/29/2009 09:56 PM 5,256 bar.emf 05/11/2009 10:37 PM 0 CONFIG.SYS 12/06/2009 12:43 AM <DIR> Dan 12/06/2009 12:45 AM 0 data.txt 05/11/2009 11:00 PM <DIR> DELL 05/11/2009 10:40 PM <DIR> Documents and Settings 05/11/2009 11:28 PM <DIR> Intel 11/24/2009 11:53 PM <DIR> Program Files 07/18/2009 12:21 AM <DIR> temp 11/24/2009 11:57 PM <DIR> WINDOWS
