JavaScript Ajax Class

JavaScript
1

Hey,

Here is a script I found on the web: http://sanalksankar.blogspot.co.nz/2010/02/ajax-class-object-javascript-simple.html

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:


	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:


<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

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:


<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 !