I seem to have a sneaky little problem in my ajax-based function. The function is supposed to check at the server if the given username/password-combination is valid. On server-side everything is working correctly (Output is either "OK" or "Error") but within the js-application I always receive an alert-box stating "undefined" in the very end.
Could you please take a look at my code and give me a hint where the problem is?
Expand|Select|Wrap|Line Numbers
- ajaxRequest = function(u,f,m,b,h,s)
- {
- alert ('ajaxRequest');
- this.url = u;
- this.wState = f || function() { };
- this.method = m || "GET";
- this.body = b || null;
- this.headers = h || false;
- this.sync = s || true;
- this.abortReq = false;
- this.req = (window.XMLHttpRequest) //Gecko-Browser?
- ?
- new XMLHttpRequest() //Gecko-Browser!
- :
- ((window.ActiveXObject) //Internet Explorer?
- ?
- new ActiveXObject("Microsoft.XMLHTTP") //Internet Explorer!
- :
- false //some Error occured
- );
- this.doRequest = function() //function to perform the request
- {
- alert('doRequest');
- this.req.open(this.method,this.url,this.sync); //Open connection
- if (this.headers) //additional headers given?
- {
- for (var i=0; i<this.headers.length; i+=2)
- {
- this.req.setRequestHeader(
- this.headers[i],this.headers[i+1] //construct keyvalue pairs for the header
- );
- }
- }
- this.req.onreadystatechange = this.wState; //function-call
- (!this.abortReq) ? this.req.send(this.body) : this.req.abort();
- //send request if not aborted somehow
- }
- }
- /**
- * function to check whether the connection can
- * be established for given username and password
- *
- * @param: string username Username
- * @param: string password Password
- */
- var checkConnection = function (username, password) {
- xmlhttp = new ajaxRequest(
- 'http://url*****',
- function()
- {
- alert('callback-function');
- var r = xmlhttp.req;
- if (r.readyState==4) //transfer complete
- {
- alert('readystate!')
- document.getElementById('test-label').value =
- (r.status == 200) //insert Data in DOM
- ? r.responseText : r.status+"ERROR"; //Error occured
- alert ('responsetext inserted');
- }
- },
- 'POST', //type
- '&username='+username+'&password='+password, //query
- ["Content-Type","application/x-www-form-urlencoded"] //header
- );
- xmlhttp.doRequest();
- }
1.) ajaxRequest
2.) doRequest
3.) callback-function
4.) callback-function
5.) callback-function
6.) readystate!
7.) responsetext inserted (*it actually is updated*)
8.) callback-function
9.) readystate!
10.) responsetext inserted
11.) undefined (appears always)
My question is: Why is the callback-function called again (debug no. 8) and why do I always receive the alert-box "undefined", whithout calling any alert?!
Thanks for your help in advance!
Greets,
mischie