On this page... (hide)
1. jQuery
jQuery is a very lightweight but powerful javascript library. I've started using it - documentation can be found here.
2. Sending a POST request
This is just a bits and pieces post so you'll have to know something about Ajax in order to read it.
// convert (&, +, =) to string equivs. Needed so URL encoded POST won't choke.
var str1 = posName.value;
str1 = str1.replace(/&/g,"**am**");
str1 = str1.replace(/=/g,"**eq**");
str1 = str1.replace(/\+/g,"**pl**");
var stuff = "selfCC="+strCC+"&posName="+str1+"&posEmail="+str2+"&posRegard="+str3+"&posText="+str4;
loadXMLPosDoc(page,stuff)
pos.open("POST", url, false);
pos.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
pos.send(posData);
Information borrowed from http://www.dustindiaz.com/testJax/ »
3. News ticker based off of an RSS
This script reads an RSS file via aj_get_alerts.php which takes as an argument the item number from the RSS. It returns an item formatted for display on the web. The JavaScript is recursive, so it runs ws_show_alert() which runs ws_get_alerts() and updates the division with the output from aj_get_alerts.php. After that, it ups the alert number by 1 and then runs setTimeout() on ws_show_alert(). This is where the recursiveness kicks in and will repeat. aj_get_alerts.php performs a modulus on the alert number based on the number of alerts or items in the RSS. So if there are 3 alerts, the number 0, 1 and 2 correspond to them. As soon as we get to alert number 3, there isn't an alert, but since there are 3 items, we do a mod 3 on the current alert number. so 3 mod 3 = 0 and 4 mod 3 = 1 and 5 mod 3 = 2 so you can see the items will rotate infinitely.
<html>
<head>
<title>News Ticker</title>
<script type="text/javascript">
function ws_http_request()
{
var http;
try
{
// Firefox ...
http = new XMLHttpRequest();
}
catch(e)
{
// IE
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Ajax not supported.");
return false;
}
}
}
return http;
}
function ws_ticker(some_id)
{
ws_show_alert(some_id,0);
}
function ws_get_alerts(some_id,alert_number)
{
http = ws_http_request();
http.onreadystatechange=function()
{
if(http.readyState == 4)
{
document.getElementById(some_id).innerHTML = http.responseText;
}
if(http.readyState == 1)
{
document.getElementById(some_id).innerHTML = "Still Loading...";
}
}
http.open("POST","aj_get_alerts.php?alert_number=" + alert_number,true);
http.send(null);
}
function ws_show_alert(some_id,alert_number)
{
ws_get_alerts(some_id,alert_number);
alert_number += 1;
setTimeout("ws_show_alert('" + some_id + "'," + alert_number + ")",5000);
}
</script>
</head>
<body onLoad="ws_ticker('alerts')">
<div id="alerts"></div>
</body>
</html>
4. Using Prototype
In this sample, when you click "Get Time", the script runs time.php which just prints the date and time, which is returned in the division with ID "box". The second function showURL runs parse.php which will output html to the division.
<script type="text/javascript" src="ssi/prototype-1.5.1.1.js"></script>
<script type="text/javascript">
var random_variable = "rv=" + parseInt(Math.random()*99999999999);
function getTime(){
new Ajax.Request('time.php?' + random_variable,
{
method:'post',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! " + response);
},
onFailure: function(){
alert('Something went wrong...');
}
}
);
}
function showURL(some_id,action){
new Ajax.Request('parse.php?action=' + action + '&' + random_variable,
{
method:'post',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
document.getElementById(some_id).innerHTML = response;
},
onFailure: function(){
alert('Something went wrong...');
}
}
);
}
</script>
<p><a onclick="showURL('box','open_dir')" href="#">Show Directories</a>
<a onclick="showURL('box','show_pictures_1')" href="#">Show Pictures</a>
<a onclick="showURL('box','show_pictures_2')" href="#">Show Pictures 2</a></p>
<div id="box">
</div><!--box-->
5. Avoiding the back button or cache
You can add some headers that try to prevent reading cache, but a trick I learned is to append a random variable to your script url's. This way the server thinks you are always going to a different page and doesn't load you're cache. You can use something like
myscript.php?rand=2lkj3lkj99je9j9jef
I generate my random variable within PHP or JavaScript with something like,
/* PHP */
$random_variable = 'rand=' . md5(rand(0,999999) . date("Y-m-d H:i:s");
/* JavaScript */
var random_variable = parseInt(Math.random()*9999999999999);
I just append $random_variable to all of my URL's.
6. Creating an instance of XMLHttpRequest via script
<script type="text/javascript">
function getXMLHttpRequest(){
var request = false;
try {
request = new XMLHttpRequest(); /* Firefox */
}
catch(err1){
try {
vrequest = new ActiveXObject("Msxml2.XMLHTTP"); /* Some IE */
}
catch(err2){
try {
request = new ActiveXObject("Microsoft.XMLHTTP"); /* Some more IE */
}
catch(err3){
request = false;
}
}
}
return request;
}
</script>
7. Prototype Framework
Here are a few functions I've used on my image gallery that use the prototype framework (free).
var random_variable = "rv=" + parseInt(Math.random()*99999999999);
function open_directory(some_id,dir,page,page_start,page_end){
new Ajax.Request('open_dir.php?dir=' + dir + '&' + random_variable,
{
method:'post',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
document.getElementById(some_id).innerHTML = response;
},
onFailure: function(){
alert('Something went wrong...');
}
}
);
}
function open_directory2(some_id,dir,page,page_start,page_end){
new Ajax.Updater(some_id,'open_dir.php?dir=' + dir + '&' + random_variable,
{
method:'post',
}
);
}
// rightcolumnbody
function show_image(some_id,file,page,page_start,page_end){
new Ajax.Updater(some_id,'show_image.php?file=' + file + '&' + random_variable,
{
method:'post',
}
);
}
