PDA

View Full Version : Ajax Routine Help



fszone
12-11-2006, 02:47 AM
1) Script Title:
Basic Ajax Routine (get & post)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxroutine.htm

3) Describe problem:
Hi everyone! I am trying to implement a bit of Ajax into my site, but I am having the hardest time doing so.

I am trying to make an Ajax reporting system. A user clicks a link, once it is clicked 3 variables are POSTed to a PHP script, the PHP script inserts the data to MySQL, and returns a result.

I am trying to use the Ajax files from here (http://www.dynamicdrive.com/dynamicindex17/ajaxroutine.htm) as a base. Here is what I have...

I've included "ajaxroutine.js" in my head, and here is what that file reads:


//Basic Ajax Routine- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: Jan 15th, 06'

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
}

var ajaxpack=new Object()
ajaxpack.basedomain="http://"+window.location.hostname
ajaxpack.ajaxobj=createAjaxObj()
ajaxpack.filetype="txt"
ajaxpack.addrandomnumber=0 //Set to 1 or 0. See documentation.

ajaxpack.getAjaxRequest=function(url, parameters, callbackfunc, filetype){
ajaxpack.ajaxobj=createAjaxObj() //recreate ajax object to defeat cache problem in IE
if (ajaxpack.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)
}
}

ajaxpack.postAjaxRequest=function(url, parameters, callbackfunc, filetype){
ajaxpack.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);
}
}

//ACCESSIBLE VARIABLES (for use within your callback functions):
//1) ajaxpack.ajaxobj //points to the current ajax object
//2) ajaxpack.filetype //The expected file type of the external file ("txt" or "xml")
//3) ajaxpack.basedomain //The root domain executing this ajax script, taking into account the possible "www" prefix.
//4) ajaxpack.addrandomnumber //Set to 0 or 1. When set to 1, a random number will be added to the end of the query string of GET requests to bust file caching of the external file in IE. See docs for more info.

//ACCESSIBLE FUNCTIONS:
//1) ajaxpack.getAjaxRequest(url, parameters, callbackfunc, filetype)
//2) ajaxpack.postAjaxRequest(url, parameters, callbackfunc, filetype)

///////////END OF ROUTINE HERE////////////////////////

//////EXAMPLE USAGE ////////////////////////////////////////////

//Define call back function to process returned data
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ if request was successful or running script locally
if (myfiletype=="txt")
alert(myajax.responseText)
else
alert(myajax.responseXML)
}
}
}

//Define function to construct the desired parameters and their values to post via Ajax
function getPostParameters(){
var type=document.getElementById("report").type.value //get value to post from a form field
var id=document.getElementById("report").id.value //get value to post from a form field
var ip=document.getElementById("report").ip.value //get value to post from a form field
var poststr = "type=" + encodeURI(type) + "&id=" + encodeURI(id) + "&ip=" + encodeURI(ip)
return poststr
}

var poststr=getPostParameters()

ajaxpack.postAjaxRequest("_report.php", poststr, processGetPost, "txt")


The HTML document:


<div id="report">
<form id="report">
<input type="hidden" id="type" name="type" value=" . $tab . ">
<input type="hidden" id="ip" name="ip" value=" . $_SERVER['REMOTE_ADDR'] . ">
<input type="hidden" id="id" name="id" value=" . $id. ">

<script type="text/javascript">
function createpoststring(){
var type=document.getElementById("report").type.value //get value to post from a form field
var id=document.getElementById("report").id.value //get value to post from a form field
var ip=document.getElementById("report").ip.value //get value to post from a form field
var poststr = "type=" + encodeURI(type) + "&id=" + encodeURI(id) + "&ip=" + encodeURI(ip)
return poststr
}
</script>


<a href="#" onclick="var poststr=createpoststring(); ajaxpack.postAjaxRequest('_report.php', poststr, processGetPost, 'txt'); return false"><img src="images/flag_no.png" onmouseover="this.src='images/flag_yes.png';" onmouseout="this.src='images/flag_no.png';"></a>
</form>
</div>
Now, for some reason when I click on Report, it doesn't do anything... It appears that it doesn't send any data at all. I've made sure that _report.php works properly, so I know it is something up with the Javascript.

An help would be greatly appreciated, thanks. :)