SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Ajax Class

    Hey,

    Here is a script I found on the web: http://sanalksankar.blogspot.co.nz/2...pt-simple.html

    Code:

    Code:
    function ajaxRequest(url, method, postData) {
        //validation start
        if (url == undefined) return false;
        this.method = method == undefined ? "GET" : method.toUpperCase();
        if (this.method != "GET" && this.method != "POST") return false;
        if (url == undefined || url == "") return false;
        //validation end
        this.url = url + ((url.indexOf('?') > 0) ? "&ajts" : "?ajts") + new Date().getTime();
        var mainCls = this;
        this.inProgress = false;
        this.xmlHttpObj = null;
        this.postData = postData;
        this.toString = function() { return "Ajax by Sanal"; }
        this.abort = function() {
            if (mainCls.inProgress) {
                mainCls.xmlHttpObj.abort();
                mainCls.inProgress = false;
                mainCls.xmlHttpObj = null;
            }
        }
        this.execute = function(statusChangeFunction) {
            try {
                // Firefox, Opera 8.0+, Safari
                mainCls.xmlHttpObj = new XMLHttpRequest();
            }
            catch (e) {
                // Internet Explorer
                try {
                    mainCls.xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        mainCls.xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
    
                        return false; //No support for AJAX
                    }
                }
            }
    
            mainCls.xmlHttpObj.onreadystatechange = function() {
                if (statusChangeFunction) {
                    statusChangeFunction(mainCls.xmlHttpObj.readyState, typeof (mainCls.xmlHttpObj.responseText) == "unknown" ? null : mainCls.xmlHttpObj.responseText, typeof (mainCls.xmlHttpObj.responseXML) == "unknown" ? null : mainCls.xmlHttpObj.responseXML, mainCls.xmlHttpObj.readyState==4 ? mainCls.xmlHttpObj.status : null);
                }
                if (mainCls.xmlHttpObj.readyState == 4) {
                    mainCls.inProgress = false;
                    mainCls.xmlHttpObj = null;
                }
            }
    
            mainCls.xmlHttpObj.open(mainCls.method, mainCls.url, true);
            if (mainCls.method == "POST") {
                mainCls.xmlHttpObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                mainCls.xmlHttpObj.setRequestHeader("Content-Length", mainCls.postData.length);
            }
            mainCls.inProgress = true;
            mainCls.xmlHttpObj.send(mainCls.method == "POST" ? mainCls.postData : null);
            return true;
        }
    }
    I cant seem to get the post side of it to work.. seems the entire page reloads and no variable are captured..

    My code to access the class:

    Code:
    	function testAjax() {
                var myAjaxRequest = new ajaxRequest("ajaxcall.php","POST","key1=value1&key2=value2");  
                myAjaxRequest.execute(processMyRequest);
                myAjaxRequest = null;
            }
            function processMyRequest(readyState, responseText) {            
                if (readyState == 4)
                    document.getElementById("myDIV").innerHTML = responseText;
                else if (readyState == 1)
                    document.getElementById("myDIV").innerHTML = "Loading...";            
            }
    My Form:

    Code:
    <form action="" id="myform" method="post">
    <input name="fname" type="text" id="fname"/>
    <br />
    <input name="lname" type="text" id="lname" />
    <input name="submit" type="submit" onClick="testAjax()" />
    </form>
    
    <div id="myDIV"> </div>
    What am I doing wrong?

    Thanks

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't checked the whole class/functions but in a quick look it is due to submit type button in the form. The submit is directly submitting the form that's why your page is being redirected. Otherwise it seems your AJAX/JS is working as it should. Try once:
    Code html4strict:
    <input name="submit" type="submit" onClick="testAjax();return false;" />

    See return false after the function call. Try this once if it works for you.

    But I would still recommend using jQuery which is quite easier and handy !
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


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
  •