1) Script Title:
Basic Ajax Routine (get & post)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...jaxroutine.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 as a base. Here is what I have...
I've included "ajaxroutine.js" in my head, and here is what that file reads:
The HTML document:Code://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")
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.HTML Code:<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>
An help would be greatly appreciated, thanks.![]()



Reply With Quote
Bookmarks