JavaScript Forum

**dansgalaxy** · 10-09-2007, 02:07 PM

Hi,

I have seen some stuff about using AJAX to submit forms and things without refreshing or reloading the page like Youtube has for comments and adding to favourites.

etc and i belive VB uses it too when submitting quick posts and editing.

Basically does anyone know a simple tutorial so i can learn how to implement this in my scripts as it will be very useful

Dan

**sri_gan** · 10-09-2007, 05:07 PM

Dan,

The logic is simple.

The things you need are:

1. CGI Script which does the post back for you

2. The client page (which will not be refreshed)

In the CGI script code all you post back events like insert into a database etc... and selecting back the values stored.

With that set.

In the client facing page all you need is a DIV or table with id which preloads with the existing data via AJAX use Sarissa it has built in ajax queries(http://dev.abiss.gr/sarissa/) if you need a simplified one let me know will provide my simplest script.

use the getElementById() function to update the client div or table.

Hope this helps. Good Luck!

**dansgalaxy** · 10-09-2007, 05:21 PM

*jaw drop*

Sorry did i mention im a PHPer and dont know much more than document.write javascript wise.

I need simple copy and paste Lol

please

**tripy** · 10-09-2007, 05:45 PM

Dan, you won't find any ready made js script for that for the simple reason that ever forms are different.

You will need to dig a bit into javascript for that.
What do you use or plan to use as a JS framework?

**dansgalaxy** · 10-09-2007, 06:26 PM

Im sorry im very big noob with javascript.

can you explain further..

(Also when and why has WMT gone back to the old theme im like WAAA? )

**sri_gan** · 10-10-2007, 03:46 PM

Do the Following (common routines):

Put this in file name ajax.js

Code:

//To create an AJAX Object
function createAJAXObj()
{
 var httprequest=false
 if (window.XMLHttpRequest)
 { // if Mozilla, Safari etc
  httprequest=new XMLHttpRequest()
  if (httprequest.overrideMimeType)
   httprequest.overrideMimeType('text/xml')
 }
  else if (window.ActiveXObject)
  { // if IE
   try {
    httprequest=new ActiveXObject("Msxml2.XMLHTTP");
    } 
   catch (e){
     try{
      httprequest=new ActiveXObject("Microsoft.XMLHTTP");
      }
     catch (e){}
     }
  }
return httprequest //return request object
}
 
 
//Common AJAX Reference Object
var ajax=new Object()
ajax.basedomain="<A href="http://"+window.location.hostname">http://"+window.location.hostname
ajax.ajaxobj=createAJAXObj()
ajax.filetype="txt"
ajax.addrandomnumber=0 //Set to 1 or 0. 1 enabled additional IE cache busting
 
 
 
//Get Function
ajax.Get=function(url, parameters, callbackfunc, filetype){
ajax.ajaxobj=createAJAXObj() //recreate ajax object to defeat cache problem in IE
if (ajax.addrandomnumber==1) //Further defeat caching problem in IE?
var parameters=parameters+"&ajaxcachebust="+new Date().getTime()
 if (this.ajaxobj)
 {
 this.filetype=filetype
 this.ajaxobj.onreadystatechange=callbackfunc
 this.ajaxobj.open('GET', url+"?"+parameters, true)
 this.ajaxobj.send(null)
 }
}
 
 
//Post function
ajax.Post=function(url, parameters, callbackfunc, filetype){
ajax.ajaxobj=createAJAXObj() //recreate ajax object to defeat cache problem in IE
 if (this.ajaxobj)
 {
  this.filetype=filetype
  this.ajaxobj.onreadystatechange = callbackfunc;
  this.ajaxobj.open('POST', url, true);
  this.ajaxobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  this.ajaxobj.setRequestHeader("Content-length", parameters.length);
  this.ajaxobj.setRequestHeader("Connection", "close");
  this.ajaxobj.send(parameters);
 }
}

Sample to Initiate Ajax Object (Client HTML)

Code:

<html>
<head><title>some thing of your choice</title>
<script type="text/javascript" src="iiajax.js"> </script>
 
<script>
 
function postSample()
{
ajax.Post('cgi file name','parameter to be sent for post operation',callbackxyz, 'txt')
}
 
//function to handle the post operation ideally this is were the out of cgi is 
//handled.
 
function callbackxyz()
{
   var myajax=ajax.ajaxobj
    var myfiletype=ajax.filetype
    if (myajax.readyState == 4)
    { 
 
         //if request of file completed
        if (myajax.status==200 || window.location.href.indexOf("http")==-1)
         { 
          //update the out put from CGI
          }
   }
}
 
</script>
 
</head>
 
 
 
</html>

**dansgalaxy** · 10-10-2007, 04:00 PM

Ok thanks alot and i will give tp but could i ask for a example of say a simple form

for instance you enter a number it ads 2 and echos the number. so i can see how it would work?

Thanks alot

--edit---
Sorry i cant give you any i have to spread some around

**sri_gan** · 10-10-2007, 07:54 PM

Quote:

Originally Posted by dansgalaxy

Ok thanks alot and i will give tp but could i ask for a example of say a simple form

for instance you enter a number it ads 2 and echos the number. so i can see how it would work?

Thanks alot

--edit---
Sorry i cant give you any i have to spread some around

Here is the simplest version:

http://ajax.sys-con.com/read/351875.htm

**dansgalaxy** · 10-11-2007, 06:47 AM

I will have to remember to look at this when i get home i am at school at the moment.

**sri_gan** · 10-11-2007, 04:22 PM

Yo Dan!! Does the above link help you?

**dansgalaxy** · 10-13-2007, 12:09 PM

Sorry took so long

yea could be useful hopefully i will get a better understanding thanks!