Cookies are powerful things. Not only are they sweet and tasty, but they store useful information on your visitors’ computers as well! You can use them to check if a user has visited your site before, or store their login information, preferences, favorites, and other stats.

But how do you use them in ASP? This tutorial shows you just that.

The Commands

To write a cookie to the user’s computer, we use the Response.Cookies command.

Response.Cookies("CookieName") = SomeValue

To retrieve a cookie’s value, we simply call the command.

Dim CookieValue = Response.Cookies("CookieName")

ASP has probably one of the easiest implementations of cookies of any programming language. There are other attributes of a cookie we can set as well.

Let’s say our user has logged in.

<%
    Dim strUserName = "Bob123"
    Response.Cookies("UserName") = strUserName
    Response.Cookies("IsLoggedIn") = True
    Response.Cookies("UserName").Expires = Now() + 60
    Response.Cookies("IsLoggedIn").Expires = Now() + 60
%>

We just gave the “UserName” and “IsLoggedIn” cookies an expiration date 60 days in the future (Now() + 60).

What if we want to check if our user is logged in, and display a welcome message accordingly?

<%
    If Response.Cookies("IsLoggedIn") = True Then
        Response.Write("Welcome, " & Response.Cookies("UserName"))
    Else
        Response.Write("Welcome, stranger!")
    End If
%>

It’s as simple as that. But wait, there’s more! You can also make a cookie expire as soon as the user closes his or her browser; don’t set the Expires attribute at all.

To assign a specific date value for the expiration date:

<% Response.Cookies("UserName").Expires = #April 15, 2010# %>

Cookie Arrays

A cookie can contain a collection of multiple values. This is useful for, say, shopping carts where each item in your cart has several values assigned to it: product ID, quantity, base price, etc.

<%
    Response.Cookies("Item")("ItemID") = 1234
    Response.Cookies("Item")("BasePrice") = 74.95
    Response.Cookies("Item")("Name") = "Deluxe 4-Slice Toaster"
%>

Finally, what if you want to get rid of a cookie? Since cookies can’t be removed, per se, you can set them to expire now and they will essentially cease to exist.

<% Response.Cookies("UserName").Expires = Now() %>

As you can see, there are many uses for cookies, and in ASP it is really quite simple to utilize them. I never made any use of cookies for a long time; I stuck to session variables for everything. Once I actually got into cookies, I could never go back. They’re an invaluable resource.

Below are ten JavaScript functions that, over the course of several years, I have found to be indispensable, awesome, and at times life-saving.

1. addEvent()

This function takes all the work out of determining the correct way to add an event to an element (depending on the user’s browser).

function addEvent(obj, eventtpye, functn, usecapture) {
    if (obj.addEventListener) {
        obj.addEventListener(eventtype, functn, usecapture);
        return true;
    } else if (obj.attachEvent) {
       return obj.attachEvent('on' + eventtype, functn);
    } else {
        obj['on' + eventtype] = functn;
    }
}

2. addLoadEvent()

This function adds events that trigger after the page has loaded by attaching them to the onload event handler. It first stores the existing onload contents to a variable. Then, if the onload handler is not set to a function, it assigned the given function to the handler. Otherwise, it adds the function to the existing onload contents.

function addLoadEvent(functn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = functn;
    } else {
        window.onload = function() {
            oldonload();
            functn();
        }
    }
}

Note: Another way of adding events to the onload handler is to simply use the addEvent() function, as described above, like so:

addEvent(window, 'load', functn1, false);
addEvent(window, 'load', functn2, false);
// etc.

3. getElementsByClass()

You would think that JavaScript would already have such a function, but surprisingly (or not, depending on your cynicism) it isn’t an original DOM method. We have getElementById(), getElementsByName(), and getElementByTagName()… so why not a getElementsByClass() method? Well, here it is:

function getElementsByClass(findclass, node, tag) {
    var classElems = new Array();
    if (node == null)
        node = document;
    if (tag == null)
        tag = '*';
    var elems = node.getElementsByTagName(tag);
    var pattern = new RegExp('(^|\\\\s)'+finclass+'(\\\\s|$)');
    var j = 0;
    for (i = 0; i < elems.length; i++) {
        if (pattern.test(elems[i].className)) {
            classElems[j] = elems[i];
            j++;
        }
    }
    return classElems;
}

To return an array of all anchor (<a>) elements of the “foo” class, call the following:

var foos = getElementsByClassName('foo', document, 'a');

4. toggle()

The strict definition of “toggling” is hiding or showing an element upon the occurence of an event. This function, which does just that, is short, simple, and to the point.

function toggle(objid) {
    var elem = document.getElementById(objid);
    elem.style['display'] = (elem.style['display'] == 'none') ? '' : 'none';
}

5. insertAfter()

One would think that this would be a DOM core method (like getElementsByClassName()) but, sadly, it is not. Fortunately, it only requires one line of code, though it is hard to remember and is thus suited to having its own function.

function insertAfter(parent, node, refNode) {
    if (refNode.nextSibling)
        parent.insertBefore(node, refNode.nextSibling);
    else
        parent.appendChild(node);
}

6. inArray()

This is yet another simple method that really should already be built into the JavaScript DOM. While not a function, it is a prototype that extends the existing Array object to add this functionality.

Array.prototype.inArray = function(value) {
    for (i = 0; i < this.length; i++) {
        if (this[i] === value) return true;
    }
    return false;
}

7. getCookie(), setCookie(), delCookie()

I included all three of these methods into one entry because they all go together like gears in a machine. PHP’s implementation of cookies is such an easy, painless process, but this is not so for JavaScript. These three will be like Vicodin after the pain of dealing with cookies in JS.

function getCookie(name) {
    var start = document.cookie.indexOf(name + '=');
    var len = start + name.length + 1;
    if (!start && name != document.cookie.substring(0, name.length)) return null;
    if (start == -1) return null;
    var end = document.cookie.indexOf( ';', len );
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len, end));
}

function setCookie(name, value, expires, path, domain, secure) {
    var today = new Date(today.getTime());
    if (expires)
        expires = expires * 1000 * 60 * 60 * 24;
    var expires_date = new Date(today.getTime() + expires);
    document.cookie = name + '=' + escape(value) +
        (expires ? ';expires=' + expires_date.toGMTString() : '') +
        (path ? ';path=' + path : '') +
        (domain ? ';domain=' + domain : '') +
        (secure ? ';secure' : '' );
}

function delCookie(name, path, domain) {
    if (getCookie(name))
        document.cookie = name + '=' +
        (path ? ';path=' + path : '') +
        (domain ? ';domain=' + domain : '') +
        ';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

8. $()

The Prototype Dollar Function

In all honesty, this function was new to me as of recently. It never really occurred to me to have a function whose name consists of one character (a dollar sign, no less!), that takes in either strings or objects and any number of arguments, and that returns either one object or an array of objects.

Now I can’t live without it. Here it is:

function $() {
    var elems = new Array();
    for (var i = 0; i < arguments.length; i++) {
        // For each argument passed to $()
        var elem = arguments[i];
        if (typeof elem == 'string')
            elem = document.getElementById(elem);
        if (arguments.length == 1)
            return elem;
        elems.push(elem);
    }
    return elems;
}

It’s only a few lines of code, too! You can use it to call up one object in one way:

var textbox = $('mytextbox');

or many objects in many ways:

var images = $(objImage1, 'myimg', 'badimage', objImagePlaceHolder);

The return value is always an object, or an array of objects.

9. getXMLHttpObject()

If you’re working with AJAX and have to keep checking your notes for the function that returns the XML-HTTP object, this one’s for you. This works for nearly all browsers in existence.

function getXMLHttpObject() {
    var xmlHttp;
    // IE only...
    try {
        xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
        } catch (E) {
            xmlHttp = false;
        }
    }
    // All other browsers...
    if (!xmlHttp && typeof xmlHttpRequest != 'undefined') {
        try {
            xmlHttp = new xmlHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    return xmlHttp;
}

10. randomRange()

Last, but certainly not least, is the ultra-useful randomRange() function, which returns a random integer between two numbers, inclusive.

function randomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Conclusion

I keep every single one of these functions inside one external JavaScript file called common.js and call it in the header file that I include in all pages of whatever site I’m working on. That way, all the code is available to me no matter what, whenever I need it. And trust me, I’ve needed it plenty of times in the past, and will continue to need them well into the future.

Many sites are starting to add rich text boxes, which are text fields that let you create text and alter formatting in a WYSIWYG environment: “What You See Is What You Get”. This basically means a text box that is like a word processor; if you select text and click on the “Bold” button (such as a bold letter B), the text will actually show up in bold.

If such a concept has eluded you, look no further for a detailed tutorial on how to create one.

If you have been thinking of a rich text field as its own control (like the <textarea> element), then you are thinking about it all wrong. Instead, think of the text field as being its own web page. It makes sense, doesn’t it? You’re applying HTML formatting to the text, after all.

The Structure

The text field itself is an <iframe> element, which (quite conveniently) comes with a JavaScript function called execCommand(). This function will become your colleague and your confidant. Your most trusted ally, and your most intimate friend.

To start off, create a new page with an iframe, a regular button, a submit button, and a hidden text field. The regular button will toggle the bold setting of any selected text within the iframe. The submit button is there for decoration only, and as a reminder that sometimes a form will need to be submitted. As such, the iframe cannot be used as a form input field; instead, we will use the hidden text field to store the HTML code of the iframe element. Its contents will be updated upon submitting the form, as we will see later.

<html>
<head>
	<title>Rich Text Editor</title>
</head>
<body>
<form method="post" name="myform">
	<input type="button" onclick="formatText('bold')" value="Bold" /><br/>
	<iframe id="textbox" style="width: 300px; height: 150px"></iframe><br/>
	<input type="submit" value="Submit" />
	<input type="hidden" id="text" name="text" />
</form>
</body>
/html>

The Backbone

The formatText() function, called by clicking the “Bold” button, is defined below. You can either save it in an external .js file and call it from the HTML page, or add it to the <head> section.

var objEditor;	// Globally define the text box object
unction formatText(action) {
	objEditor.execCommand(action, false, null);
}
window.onload = function() {
	objEditor = document.getElementById('textbox').contentWindow.document;
	objEditor.designMode = 'on';
	document.myform.onsubmit = function() {
		document.getElementById('text').value = objEditor.body.innerHTML;
	}
}

As you can see above, the text editor object (with the ID “textbox”) is set to a global variable, which can then be called by any other functions. The formatText() function calls the omnipotent execCommand() function, which applies only to the <iframe> object and is extremely powerful. There is a complete list of commands below. The command used above is the “bold” command. The second argument determines whether a user interface is displayed. Since this is not needed, it is set to false. The third argument is the value of the command. Since we are toggling the “bold” setting, we set this to null.

Next, we define what will happen when the page loads by setting the document’s onload event handler to do a few things. First, the text editor object variable is set to the object itself. Next, the text editor iframe’s designMode setting is turned on; this makes it so that the HTML within the iframe is editable. This is a huge deal, because this is essentially what turns the iframe into a rich text field.

(Actually, you can even set the entire document’s designMode variable to “on”, rendering the entire document editable. Just imagine the possibilities!)

Finally, we set it so that when the user submits the form, it sets the “text” hidden field’s value to the HTML of the iframe.

The Commands

The following commands are some of the simpler commands that can be used: Bold (<b></b>), Italic (<i></i>), Underline (<u></u>), StrikeThrough (<s></s>), SuperScript (), SubScript (), Cut, Copy, Paste, Undo, Redo, InsertOrderedList (<ol></ol>), InsertUnorderedList (<ul></ul>), Outdent, Indent, JustifyLeft, JustifyCenter, JustifyRight, and JustifyFull.

SuperScript and SubScript raise or lower text, for things such as mathematic variables (like 7² and H₂O). The commands Cut, Copy, Paste, Undo and Redo function the same way they do in word processors. InsertOrderedList inserts a numbered (ordered) list, while InsertUnorderedList inserts a bulleted (unordered) list. Outdent moves a paragraph of text to the left, while Indent moves it inward (to the right). The Justify commands align the text to the direction specified.

Change Font Size

The FontSize command changes the size of the selected text in the iframe, and requires a value from 1 to 7, 1 being the smallest size, 7 being quite large. This command is based on the soon-to-be obsolete <font> tag, which uses the same values for its size attribute.

This function is best used with a drop-down list whose onchange event handler calls a custom function that changes the font size to the selected value. To most accurately show the user what the end result would be, each line should resemble the following.

<option value="X"><font size="X">X</font></option>

Each item’s value is the size number, while the item is shown in that size, displaying the size number.

Change Font Name

There is a certain list of fonts that is safe to assume all users have installed on their systems. Known as the Core Fonts, these include Andale Mono, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, and Webdings. It is also safe to include a few fonts that are on most users’ systems, but not all: Arial Black, Lucida Console, Lucida Sans Unicode, Tahoma, and Wingdings.

Like we did with the font sizes, if we had a drop-down list of fonts, each displayed in its own font, we could then set the list’s onchange event handler to call up the FontName command, like so:

objEditor.execCommand("FontName", false, "Times New Roman");

It’s pretty straightforward how it works.

Further Inspiration

There are so many possibilities, especially with the sheer number of commands available at your disposal. For example, there is the 2D-Position command, which allows absolutely positioned elements to be moved by dragging. There is also the CreateLink, which adds a hyperlink or changes text into a hyperlink. InsertButton, InsertImage and
SaveAs are just a microscopically small selection of commands also at your disposal. For a full list of commands available, check out http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx.

In my years as a web developer, there are many security issues with which I have had to become familiar. There are a lot of people out their with malicious intent. One of them could come across your site and expose a flaw that allows them access to crucial information, or the entire site itself. Don’t let this happen! Below are the 10 most common errors programmers make that could prove fatal.

1. SQL Injection

SQL injection is the act of maliciously adding SQL code that is then processed along with SQL code. This happens when the programmer neglects to properly check user input or query string variables before using it in SQL statements.

For example:

$id = $_GET['id'];
$result = mysql_query("SELECT * FROM tblComments WHERE fldCommentID = $id");

You may be asking yourself, “What’s wrong with the above code?” Plenty… just enough for any hacker to exploit it. What would happen if the visitor entered in the URL page.php?id=0 UNION SELECT * FROM tblAdminUsers ? Because the $id variable is not properly checked for injected code, it is added to the SQL query and processed. Here is what the resulting SQL query would look like:

SELECT * FROM tblComments WHERE fldCommentID = 0 UNION SELECT * FROM tblAdminUsers

It is a common enough table naming convention to give it a try, and the results would be damaging, exposing information you never intended to become public. Knowing that $id is supposed to be an integer, one approach to preventing injection is to get the integer value of the variable.

$id = intval($_GET['id']);

The above code would then only return a number, and therefore be safe.

There are many other methods of injection, however, so keep your eyes open for any possible vulnerabilities!

2. Cross-Site Scripting

Cross-site scripting, or XSS, is the act of inputting HTML or JavaScript code such that it is called and then run. Failing to properly check for HTML tags will allow this to happen. A good example is if you echo a variable taken from the query string. If the user altered the query string such that it included JavaScript code, the possibilities would be endless for hacking and other mischief.

page.php?something=<script>alert("hello");</script>

Visiting the above URL could potentially run the script, as it could be echoed in its entirety. Once that doorway is open, anything is then possible. Suppose the visitor is posting a comment and include JavaScript in his comment. Without proper checking, it would affect anybody viewing the page on which the comment then appears.

One possible solution would be to escape all tag brackets (< and >) with their HTML entity equivalent (< and >) or, if there is no reason for anybody to be using such characters, replace them with nothing at all.

3. GET Variable Manipulation

If a site has a form on it that sends to another page via GET method (like PayPal does), it quite possible to go through all the hard work of constructing a URL and altering a variable or two in the process. Consider the following code:

<p>Checkout below!</p>
<form action="checkout.php" method="get">
<input type="hidden" name="grandtotal" value="1234.00" />
<input type="submit" value="Checkout" />
</form>

If the visitor simply clicked on the Checkout button, she would then be taken to checkout.php?grandtotal=1234.00 where, presumable, the site would then deduct $1,234.00 from a stored credit card or account balance of some sort, and so forth. One method of simple hacking would involve examining the form code, and then manually entering in a new URL: checkout.php?grandtotal=5.00 where the visitor would then only have to pay $5.00. Such oversights could prove extremely costly.

To fix such a mistake, the grand total could be stored in a database or session variable, or passed via POST instead of GET; however, a better solution would be to double-check the grand total sent to checkout.php, comparing it to what it should be. It is well worth the extra effort and work to prevent losing thousands or even millions of dollar in revenue.

4. System Calls

The exec(), passthru() and system() functions all allow you to execte system commands from within your PHP code. Failing to check the commands processed by these functions can potentially result in hackers accessing private information by altering the input. Two function exist to assist in your fight against malicious destruction: escapeshellarg() and escapeshellcmd().

The escapeshellarg() function removes potentially harmful parts of user input by adding single quotes around the string and escaping any single quotes within. It would be used like so:

$command_fixed = escapeshellarg($command);

The escapeshellcmd() function is similar to the former, except that it only escapes characters that have a special meaning to the operating system at hand.

5. File Uploads

When uploading content to a site, PHP creates a file but does not automatically check the validity of the file name, the file type, or the size. A user could create his own form specifying some other file to upload instead.

The functions move_uploaded_file() and is_uploaded_file() are useful to assist in solving this problem, but it is best to check the $_FILES global array to ensure the file size and type are allowable for your application.

6. Includes

PHP allows you to include external files as if it were within the page itself, and is useful for code that is used extensively, class definitions, and for better organization of your site. However, if the included files are dependent upon user input, this could prove to be a big mistake if not properly checked. If the user visits index.php?p=article, let’s say our index.php page runs the following:

include_once($_GET['p'].'php');

Then a page called article.php would be called up and run. If, however, the user visits index.php?p=http://mysite.com/mycode, then the code would include http://mysite.com/mycode.php, which could potentially contain malicious and destructive code. The code from that page would be run as though it were running on the site’s own server, which is never a good idea.

Even if you restricted all included files to begin with something like “include-” (so that include-articles.php would be called up instead), any hacker could go through the trouble of registering a domain name beginning with “include-” and doing the same thing as before.

The only solution is to check the query string variable for illegal characters, such as slashes, colons, and even periods.

NOTE: Make sure all included files end in the proper extension, whether it’s .php for PHP or .aspx/.asp for ASP. Otherwise, if a visitor somehow finds out what files you are including, they could view a file such as lib.inc, as opposed to lib.inc.php, which would not expose the PHP code within.

7. Unrestricted Access and Permissions

If your site has an administration section, it is best to only allow certain IP addresses (ones you know you will be on when logging in). Another good idea an Apache .htaccess file with a username and password. This is a common mistake not native to PHP; it could happen to anybody.

On a similar note, never EVER back up PHP files by changing or adding an extension. This will most likely result in the PHP code being displayed in its raw format, exposed to the entire world, rather than parsed by the server. Servers usually only recognize certain extensions for certain languages (like .php for PHP, etc.) and any other extension wil display as an ASCII text file. NOT a good idea.

8. Session IDs

It is very easy for any hacker to hijack another user’s session, if they know that user’s session ID, and potentially see information that they really shouldn’t. While not completely avoidable, there are steps you can take to increase security.

One solution is to regenerate the session ID upon login using the session_regenerate_id() function. A hacker could try to set her own session ID prior to login; regenerating the session ID would prevent this action from doing anything significant.

9. Error Reporting

Before your site goes live, you should get rid of all display_errors() functions, as well as set the display_errors variable in your php.ini file to 0. Errors that are displayed could reveal crucial information about your database structure, connection string, and other credentials.

If you still want to be able to view errors, you can set the error_log variable in php.ini to 1 and check your PHP error log frequently for caught errors. You can also create your own code to handle errors.

10. Unvalidated Access to Protected Areas

I’ve been guilty of this once before. If your site has an administration or members-only area, each and every single page that should be available to members only, should be protected properly.

At the top of every protected page, make sure that their login credentials are validated, and that the session or cookie variable you use for logging in users is still flagged and active. Otherwise, users would be able to view certain information without ever logging in. Nobody should be able to view any protected pages by bypassing the login screen.

Conclusion

There are so many ways that people can hack into your code and your site. The above covers just a handful of mistakes you could make in your code that would expose vulnerabilities and crucial information. Be safe, be informed, and be cautious!

First off, what is AJAX? AJAX stands for Asynchronous JavaScript And XML. What does that mean? Basically, it means that you can call up other scripts and retrieve dynamically generated content (or perform simple actions) without ever leaving the current page. It’s how a large number of sites let you log in nowadays, and on what Yahoo! Mail Beta is based. It became popular through Google Suggest, where AJAX is the framework behind that little list that pops up below the search bar while you type in your query.

In Google Suggest, AJAX calls up an external script while you type, looking through a list of popular search queries, and return those that start with the text you are typing, providing suggestions for your search. It is quite useful in that it allows the visitor to see a search query that might return more (or better) results than the one the visitor had in mind.

AJAX isn’t a programming language in itself; it is simply a method of combining JavaScript and the dynamic programming language of your choice (ASP, PHP, etc.) to run another page’s server-side script. There are two parts to an AJAX script: the originating page, where the user is located; and the external page, containing the script that AJAX calls.

We’re going to create our own little page with a “name” text field. When somebody types text into that field, the page will call up an external script that returns the current time. (Sure, we can use plain JS to do this, but this is just a demonstration!)

To start off, we will create the HTML page with the form.

<html>
    <head>
        <title>AJAX Test Page</title>
    </head>
    <body>
        <form name="testform">
            Name: <input type="text" name="inputname" /><br />
            Time: <input type="text" name="currtime" />
        </form>
    </body>
</html>

Pretty basic, right? So far we have the text “Name”, followed by a text field in which the user can enter text. Nothing else happens at the moment, as you can see.

We need to call up our script when the user types in text. The best handler to use for this is the onkeyup event handler. Add the event handler and have it call up a function we will then create:

<input type="text" name="inputname" onkeyup="getTime()" />

Different browsers use different methods to create the XML-HTTP Request object we will need. Internet Explorer uses an ActiveX object, while most other browsers use a built-in JavaScript object. We will use try and catch statements to generate the correct object.

Let’s define the function that will return the XMLHttpRequest object. In the <head> section, add some JavaScript:

<script language="javascript" type="text/javascript">
    function getXHObject() {
        var xmlHttp = null;
        try {
            // For Firefox, Opera 8.0+, and Safari:
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // Internet Explorer (below 7.0, and 7.0+):
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
</script>

The above script will attempt to create the built-in JS object, which will work for most non-IE browsers. If that doesn’t work, then it tries to call up one of the IE-supported methods. The first one works with versions of IE from 5.5 to under 7.0. The second one works with IE 7.0+. Finally, it returns the XML-HTTP object.

What if none of them work? In that case, the user’s browser is incredibly obsolete and does not support AJAX at all. Sure, this isn’t 100% compatible with all browsers, but so few people use ancient web browsers that it doesn’t matter much anyway. It comes to the point where they really should upgrade anyway, to be totally honest.

Next, we will create the getTime() function, which will call up the external script and retrieve the needed information.

var xmlHttp;    // This var must be global
function getTime() {
    // If the input mattered, we would check for blank or invalid input here
    // Create XML-HTTP object
    xmlHttp = getXHObject();
    // Check if null - browser is obselete
    if (xmlHttp == null) {
        alert('Your browser does not support AJAX!');
        return;
    }
    // The URL we will call - if input mattered, we would add a query string of some sort.
    var url = 'gettime.php';
    // Required AJAX code
    xmlHttp.onreadystatechange = stateChanged; // Specify function that will output info.
    xmlHttp.open('GET', url, true);            // Open the URL for sending...
    xmlHttp.send(null);                        // ...and send the request.
}

If the input affected the output (such as getting information based on user input), then the above getTime() function would have included the input as a parameter, and we would have checked the input to make sure it was valid. We would also have generated a URL with the input in the query string, such as getusername.php?id=123.

Next, we will define the stateChanged() function, which is called while the XML-HTTP request is working.

function stateChanged() {
    if (xmlHttp.readyState == 4) {
        // Output was received
        document.testform.currtime.value = xmlHttp.responseText;
    } else {
        // Nothing was received yet, but the XML-HTTP request is working.
        // We may want to generate a message that asks the user to wait.
    }
}

The above function will set the currtime text field’s value to the response text — the output received from the gettime.php external script.

Finally, we will set up the gettime.php page itself. Whatever we echo out will be the response text when called via AJAX. In a new file, we will use PHP to get the current time.

<?php
    echo date('g:i:s A');
    // Return something like "1:45:23 AM"
?>

And that’s it!

Basically, here’s how it works: The user types in a value into the “Name” field. After each keystroke, the getTime() function is called and creates an XML-HTTP object. This is then used to communicate silently with gettime.php, which outputs the time. This output triggers a Ready State of 4. The stateChanged() function is then used to take the output and put it into the “Time” text field.

Now you know how to utilize AJAX, and have just increased your web development arsenal. As stated above, you can have output that changes depending on the user input. For example, you could have a text field that receives a User ID as input, and the external script will take that ID, query a database, and return that user’s full name, or some other piece of information.

Furthermore, instead of using onkeyup as the event handler, you could have a button click (onclick) or a click away from the text field (onblur) act as the trigger.

On a side note, I promise that future posts will not be as long as this one. I just wanted to get an AJAX primer out of the way, kind of as our starting big bang.

Happy coding!

Welcome to the blog of Xylot Design!

The purpose of this blog is to share code snippets, functions, programming methods, design ideas, and other innovations with the world. We’ll be posting informational and extremely useful pieces of code. Just wait until we show you what we have in store for you!