Entries Tagged 'AJAX' ↓
August 5th, 2007 — AJAX, User Interface (UI)
AJAX is a very nice tool. It allows us to build web pages that can retrieve bits of information with having to reload the entire page. But some developers can take this to an extreme. These developers want to possibly load the whole site’s content through AJAX. After the user clicks a few links, the user sees new data and finds something of interest. The user may want to “Bookmark” the page. If the user tries to bookmark the current data, they will not be able to. The URL still has the original landing page location.
This is similar to users wanting to bookmark “Framed Pages”, the URL of a Framed site always stays at the www.domainname.com. This is not “Good” for the users, if they go back to the “bookmark” they have to search for that page again(if they remember why they bookmarked it in the first place). If they can’t find the data they were after or couldn’t remember why they had that site, it will probably get deleted from the users bookmarks.
My Theory for the User:
- Create bookmarkable page sections.
- Update Data or Change Data that belongs on that page and will be there (or similar data) in the future.
- Unrelated or more complex changes/updates to the page deserve their own page.
- Don’t make the user “Learn” how to use your site.
Well that seems pretty basic and painless if followed.
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.
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