Results 1 to 1 of 1

Thread: Ajax Routine Help

  1. #1
    Join Date
    Dec 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ajax Routine Help

    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:
    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")
    The HTML document:

    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>
    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.
    Last edited by fszone; 12-11-2006 at 04:06 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •