A simple basic and easy AJAX call for Javascript

Anyone looking to extend the use of their website or webpage will find that using AJAX calls will add a added dimension to the site. The use of AJAX allows you to call any external page and get the requested information and post it to your page without refreshing. It is rather simple. The following code can be transformed to do what you need but it gives the basic structure.

What you need is an event to fire.

<span onclick="AJAXCall('http://kcwaldo.blogspot.com/2008/10/simple-sql-select-statement.html','&Action=test','myspan')"> Click me</span>

<div id='myspan'>
Return information goes here.
</div>

Below is the script needed to run the event.

<script>

var hURL = '';
var hParamValues = '';
var hAc = '';
var hParamValuesa = '';

function handleHttpResponse()
{
if (http.readyState == 4)
{
if (http.responseText.indexOf('invalid') == -1)
{
document.getElementById(ActiveContainer).innerHTML = http.responseText;
isWorking = false;
//This is the queue.
if (hURL != '' && hParamValues != hParamValuesa){
AJAXCall(hURL,hParamValues,hAc);
hParamValuesa = hParamValues;
}
}
}
}
//url = url you are to get the data from
//paramvalues = are posted to the url. If you need querystring values then include //them in the URL.
//ac = the active container that the data returned will be pasted into. probably a //div or td or span

function AJAXCall(url,paramvalues,ac)
{

try
{
if (!isWorking && http)
{
if (ac == ''){return false;}
ActiveContainer = ac
document.getElementById(ActiveContainer).innerHTML = '';
http.open("Post", url, true);
http.onreadystatechange = handleHttpResponse;
isWorking = true;
http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
http.send(paramvalues);
}
else{
hParamValues = paramvalues;
hURL = url;
hAc = ac;
return false;
}
return true;
}
catch (e)
{
return false;
}
}

//This function creates a HTTP Object. It works in any browser, so far at least.
function getHTTPObject()
{
var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{ // Internet Explorer
//alert(e.description);
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
//alert(e.description);
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
//alert(e.description);
//alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}

var ActiveContainer = '';
var isWorking = false;
var http = getHTTPObject();

</script>

Something the function above will do is to Queue up a second call so that. This is so if you have a list of links that you are showing a picture for it will make the first and last call but very few in between. Without the queue you can get very clunky behavior.

Please leave me a comment if you find this useful or something wrong.

Creating Watermarks on Textboxes using Javascript

Anymore watermarks are becoming more and more popular on websites. WaterMarks help to save space and can give a user more guidance than just the label does. I use watermarks to save space and give the proper format. For instance I may label a textbox "Phone" and place the watermark within the text box as "#-###-###-####" When the user click or tabs into the box it removes the watermark. If the users clicks or tabs out of the text box I check for a blank and then replace the watermark otherwise I leave the text alone.

The code I use is only javascript and I add a attribute named "WaterMark" to the textbox. An example would be

<input value="" id="myTextBox" WaterMark="#-###-###-####" type="text">

Below is the Javascript functions. Add them to your page within <script> tags or to your .js file.

function SetWaterMarks() {
var inputs = document.getElementsByTagName('input');

for (var f = 0; f < inputs.length; f++) {
var input = inputs[f]
if (input.type != 'text') continue;
if (input.getAttribute('WaterMark') != null) {
input.onfocus = function() { WaterMarkOff(this); }
input.onblur = function() { WaterMarkOn(this); }
if (input.value == '') {
WaterMarkOn(input);
}
}
else {
input.style.backgroundColor = '';
}
}
}
function WaterMarkOn(obj) {
if (obj.value == '') {
obj.style.color = 'silver';
obj.value = obj.getAttribute("WaterMark");
}
}
function WaterMarkOff(obj) {

if (obj.value == obj.getAttribute("WaterMark")) {
obj.style.color = '';
obj.value = '';

}
}
function ClearWaterMarks() {
var inputs = document.getElementsByTagName('input');
for (var f = 0; f < inputs.length; f++) {
var input = inputs[f]
if (input.type != 'text') continue;
if (input.getAttribute('WaterMark') != null) {
if (input.value == input.getAttribute('WaterMark')) {
input.value = '';
}
}
}
//return true;
}
SetWaterMarks();

When the page loads it will search the page for "text" boxes and look for a WaterMark attribute. If it finds th watermark attribute it will apply the water mark. The only thing left to do is to clear the watermarks prior to postback. The ClearWaterMarks() function will do that for you but you must place it on the form submit function or on the onclick event of the button that is expected to be used.

To Add or Create a watermark on a textbox could not be easier.
Hope this helps someone, it is much lighter than other versions I have seen.