www.webdeveloper.com
Results 1 to 5 of 5

Thread: AJAX call based on results of a previous call

  1. #1
    Join Date
    Dec 2010
    Location
    Newton Aycliffe, Co Durham, England
    Posts
    72

    AJAX call based on results of a previous call

    This might be a simple question, but Google hasn't helped me out with the answer despite hours of trying.

    The general framework is a simple user login function. The user name is selected and a password entered as usual. The function grabs the element values and passes them to a php page that queries the database. An AJAX call returns the password to the function and then I want the innerHTML to be a choice of two web pages, depending on success or failure of validation. There are existing AJAX functions available on the internet but they are overly complicated for what I think should be a simple, quick to load function.

    Where I am stuck is that the standard procedure to make an AJAX call is the browser window event. How do you make the call from within the function? I have tried creating two new variables, "success" and "again" to replace xmlhttp, but still stumble on the event to assign a value. I left the blank password protection (if statement) with that variable to demonstrate what I mean.

    I've put in my code below, which is in development and successfully alters the innerHTML text depending on user input but I can't figure out how to insert the relevant php page. I have '// out' the testing bits, but left them for info. (I have tried full 'scripting' as the innerHTML, but it's messy.)

    function login()
    {
    var keyid = document.getElementById("keyid").value;
    var password = document.getElementById("password").value;
    alert(keyid + ", " + password);

    if (password=="")
    {
    var again = xmlhttp.open("GET","re_associates.php",true);
    again.send();
    document.getElementById("text").innerHTML=again.responseText;
    //document.getElementById("text").innerHTML='re_associates.php';
    return;
    }

    if (window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

    if (xmlhttp.responseText == password)
    {
    xmlhttp.open("GET","announcement.php",true);
    xmlhttp.send();
    document.getElementById("text").innerHTML=xmlhttp.responseText;
    //document.getElementById("text").innerHTML='announcement.php';
    }
    else
    {
    xmlhttp.open("GET","re_associates.php",true);
    xmlhttp.send();
    document.getElementById("text").innerHTML=xmlhttp.responseText;
    //document.getElementById("text").innerHTML='re_associates.php';
    }

    }
    }
    xmlhttp.open("GET","password.php?id="+keyid,true);
    xmlhttp.send();
    }


    Any advice would be gratefully received.
    Last edited by Gledders; 12-14-2010 at 01:57 AM.

  2. #2
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    Why bother with a request if the password is blank? Just validate and make them enter one.

    As for your PHP login script you are calling, why not check the entry against the database and return either a "true" or "false" to your AJAX return> If the responseText == true then display your links, if not, give them a login failure.

  3. #3
    Join Date
    Dec 2010
    Location
    Newton Aycliffe, Co Durham, England
    Posts
    72
    Thanks for your time and I hope I have not misunderstood your reply. I am a little unsure what you mean.

    The idea for checking for a blank password is simple. It would be the same response as if the password was incorrect. It is actually more work to validate seperately, surely? I just incorporated it into the function.

    I believe that your second point is actually what I have done only rather than use a conditional statement within the php file, which is well within my capability, I simply 'echoed' out the password and compared the result in the function.

    The technical point that defeats me is the actual event, state or condition that I could use to trigger a call to fetch the correct php file for the innerHTML to be returned and whether or not the xmlhttp calls require naming as a seperate variable or perhaps need to be a nested function.

  4. #4
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    You could use global variable declaration but it will be easier if you will return a true or false from your PHP login page.


    On your checklogin.php page, read the querystring ID and password from the AJAX call



    function GetXmlHttpObject(handler)
    {
    var objXmlHttp=null;

    if (navigator.userAgent.indexOf("MSIE")>=0)
    {
    var strName="Msxml2.XMLHTTP";
    if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
    {
    strName="Microsoft.XMLHTTP";
    }
    try
    {
    objXmlHttp=new ActiveXObject(strName);
    objXmlHttp.onreadystatechange=handler;
    return objXmlHttp;
    }
    catch(e)
    {
    alert("*******Error*******\n\nYour browser does not meet the minimum requirements to run the console.\n\nPlease upgrade your browser. We suggest using Firefox.\n\nQuestions? Please contact us!");
    return;
    }
    }
    if (navigator.userAgent.indexOf("Mozilla")>=0)
    {
    objXmlHttp=new XMLHttpRequest();
    objXmlHttp.onload=handler;
    objXmlHttp.onerror=handler;
    return objXmlHttp;
    }
    }


    function login()
    {
    var keyid = document.getElementById("keyid").value;
    var password = document.getElementById("password").value;

    //do your validation here first
    if (password == "") {
    alert("Please provide a password");
    return false;
    }

    var url="checklogin.php?id=" + keyid +"&password="+ password +";
    xmlHttp=GetXmlHttpObject(returnlogin);
    xmlHttp.open("GET", url , true);
    xmlHttp.send(null);
    }

    function returnlogin()
    {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
    var rspnse = xmlHttp.responseText;
    if (rspnse == "true") {
    alert("Welcome!");
    //do whatever you want if passed
    }
    else {
    alert("Invalid password. Try again");
    }
    }
    }

  5. #5
    Join Date
    Dec 2010
    Location
    Newton Aycliffe, Co Durham, England
    Posts
    72
    Many thanks for the answer there Yamaharuss.

    It got me thinking that perhaps the best way forward here is to actually do all the transactions server-side for the very simple reason: security. Therefore I shall only need one AJAX call.

    However without your suggestion for true or false I would not have thought server side (which is actually my comfort zone anyway.)

    This forum is superb for people like me who apart from basic training, have largely self-taught several languages and work alone at home. We all need a little help occasionally! Very grateful.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles