June 15th, 2007 — AJAX, SEO and AJAX
Tired of the “Spambots” that crawl around the internet and find email adresses and forms to send and submit spam to. This can help hide your forms from bots. This is also a way to hide “affiliate forms” from the likes of Google, Yahoo and MSN. The current trend is to devalue affiliate sites that are there just to send traffic to another site. By inserting your left or right column list of affiliate links or a submission form that sends data to the affiliated company. This will help reduce the detection of such links and forms.
This is really a simplistic approach and if you are really trying to hide a number of links or forms, there should be more validation and care to not display the forms and links to Google bots or Google employees. Renaming the script file and the name of the script to more of a general function name may also help from automated detection.
You need the XHConn.js script to use the code below. Download XHConn here.
Do to the browser caching ajax pages called, I added a random number to the XHConn xmlhttp.open call. This forces a “unique” page call to prevent caching and not displaying updated data. Changes are highlighted.
<!--link XHConn.js in <head> of HTML -->
<script type="text/javascript" src="XHConn.js" ></script>
<!--script can go most anywhere in the HTML code, but is more proper to put in the <head> or top of HTML in the Body -->
<script type="text/javascript" >
window.onload = displayForm
// Requires Javascript and compliant browser on client for Form to be displayed.
function displayForm()
{
// Simple AJAX Form Insert to Hide Form from Spam Bots and Search Engines
var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var fnWhenDone = function (oXML)
{
document.getElementById("FormHolder").innerHTML = oXML.responseText;
// ID of <div> or other HTML element to hold the form.
};
myConn.connect("/formpage.php", "GET", "" , fnWhenDone);
// formpage.php should hold just HTML to display the form.
return false;
}
</script>
Real Users that don’t have javascript enabled will also not see the form as Javascript is required. If the page you are calling in the AJAX call is .php, .asp, .cfm or other server side scripting language you can take further actions to protect the page from being displayed to the bots or provide an alternate form that does point to your site.
Another option would be having a “fake” form that is in the original pages HTML code and then replace that form with the new one. When looking at the “source code” the user get the originally loaded HTML not the dynamically updated code.
June 14th, 2007 — JavaScript, User Interface (UI)
IE Select Box Bug: this is when you have a dropdown <select> box and you need to place an element over it temporarily like a pop up navigation menu similar to the ypslideout menu or any other <div> element. I mention the ypslideoutmenu because I was just using it because of it being “Search Engine Friendly” and needed to make one of the menus longer to add an additional page, but it went into a select box that I used for filtering data on multiple but similar pages.
I did not want to modify all the pages and place the select’s in a “less user friendly” location, nor did I want to change the menu system that users were comfortable with. With a fair amount of researching the issue, I found a potential solution. That was the “Iframe Select Box Hack and Bug Fix”. Here is a version using JavaScript to create the Iframe and get ride of it when you don’t need it here is the Javascirpt Iframe link.
Below is my static version that I got to work for my needs. The object is to create an IFrame (which actually can cover the select box) and then place your other code and text in front of the Iframe. You don’t actually load anything in the Iframe. I found that the Iframe could not be “visibility:hidden;” or “display:none;” and still cover the select item, so I turned the “alpha(opacity=0)” so that it is invisible to the user.
<div id="menu4Container" style="">
<!--IFRAME IE HACK to cover SELECT dropdown list boxes. Iframe needs to be resized for menu height and width. -->
<iframe id="menu4iframe" src="javascript:'';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" style="position:absolute; left:0; top:0px; display:block; filter:alpha(opacity=0);" ></iframe>
<div id="menu4Content" class="menu">
<div class="navlist" >
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</div>
</div>
<br> </div>
June 10th, 2007 — SEO and AJAX, Search Engine Optimization
This is a topic I am looking into. I feel that with search engines focusing on links on your home page or other landing pages and if you don’t want to pass value or rather just “hide” affiliate links from Google, Yahoo, or MSN you could load that section of links through AJAX.
AJAX calls are loaded and placed on the page after the page is initially loaded, but it is usually very quick depending on the data being loaded and should be nearly unnoticeable from the users. This can also be used to make it harder for form submitting bots that read your code and then hit that page directly with their spam information.
Look for more shortly on this topic and I hope to have a few examples of ajax code.
June 9th, 2007 — JavaScript
Is it “Old School” Java Scripting yet to traverse the Document Object Model (DOM) of the form to get to your data?
Is there a reason that someone would recommend to use the Form DOM like “document.formName.element.—”?
function DropDownSelectAll()
{
for(var i = 0; i < document.formName.selectName.options.length; i++) // cycle through the object list
{
document.formName.selectName.options[i].selected = true; // select each item
}
document.formName.submit();
return false;
}
Why Not use getElementById(”id”)? Is not the attribute name=”elementName” being depricated to using the id=”uniqueID”?
function DropDownSelectAll()
{
for(var i = 0; i < document.getElementById(”selectid”).options.length; i++) // cycle through the object list
{
document.getElementById(”selectid”).options[i].selected = true; // select each item
}
document.formName.submit();
return false;
}
May 29th, 2007 — AJAX
Download XHConn here.
XMLHTTP is a technology with which a developer can access external resources over HTTP from a static web page without ever having to reload the page itself. This library is meant to simplify and unify the code necessary to successfully send and receive simple data via XMLHTTP.
Do to the browser caching ajax pages called, I added a random number to the xmlhttp.open call. This forces a “unique” page call to prevent caching and not displaying updated data. Changes are highlighted.
/** XHConn – Simple XMLHTTP Interface – bfults@gmail.com – 2005-04-08 **
** Code licensed under Creative Commons Attribution-ShareAlike License **
** http://creativecommons.org/licenses/by-sa/2.0/ **/
function XHConn()
{
var xmlhttp, bComplete = false;
var rndXHConnNumber = Math.round(100000*Math.random());
try { xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”); }
catch (e) { try { xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false; }}}
if (!xmlhttp) return null;
this.connect = function(sURL, sMethod, sVars, fnDone)
{
if (!xmlhttp) return false;
bComplete = false;
sMethod = sMethod.toUpperCase();try {
if (sMethod == “GET”)
{
xmlhttp.open(sMethod, sURL+”?”+sVars+”&rndXHConnNumber=”+rndXHConnNumber, true);
sVars = “”;
}
else
{
xmlhttp.open(sMethod, sURL, true);
xmlhttp.setRequestHeader(”Method”, “POST “+sURL+”&rndXHConnNumber=”+rndXHConnNumber+” HTTP/1.1″);
xmlhttp.setRequestHeader(”Content-Type”, “application/x-www-form-urlencoded”);
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && !bComplete)
{
bComplete = true;
fnDone(xmlhttp);
}};
xmlhttp.send(sVars);
}
catch(z) { return false; }
return true;
};
return this;
}
ADDED:
Another good XMLHttpRequest article