CODEWITHSUNDEEP
javascriptajax
Elliott
Elliott

Reputation: 3864

Why doesn't my AJAX script work?

I am trying to get the below code to call to a PHP file, and show the returned data. In Firefox, the alert shows blank, and in IE it shows sometimes but mostly nothing. The PHP script is a simple echo "hello";.

The script

function make_request()
{
  try
  {
    // Firefox, Opera 8.0+, Safari
    httpxml=new XMLHttpRequest();
  }
  catch (e)
  {
    // Internet Explorer
    try
    {
      httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        httpxml=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
}


function check_login(username, password)
{
  var httpRequest;
  make_request()

  var parameters = 'username=' + username.value + '&password=' + password.value;
  httpxml.onreadystatechange = stateck;
  httpxml.open('POST', 'login.php', true);
  httpxml.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
  httpxml.setRequestHeader('Content-Length', parameters.length);
  httpxml.send(parameters);

  function stateck() 
  {
    if(httpxml.readyState==4)
    {
      alert(httpxml.responseText);  
    }
  }
}

The markup

<table class="form" id="form" cellpadding="10" >
  <form id="signup_form" name="form" method="post" />
  <tr>
    <td>Username</td>
    <td><input type="text" name="username" id="username" size="26" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="password" id="password" size="26"/></td>
  </tr>

    <td>
      <input type="submit" name="button" id="button" value="Submit" onClick="check_login(username, password);"/>
    </td>
  </form>
</table>
</div>

Thanks

Upvotes: 0

Views: 220

Answers (1)

Shog9
Shog9

Reputation: 159618

A few notes that I couldn't fit into a comment (some of these should have no effect on the success of your XMLHttpRequest call; others might - so fix all of them):

The script

Nothing checks the return value of make_request(), so return false; is sorta pointless (just... return). Why not make httpxml a local variable instead of an implicit global, and return that? Then use the return value to indicate to the caller whether or not the function succeeded...

The local variable httpRequest in check_login() is never used. Perhaps you intended to assign it the return value of make_request() (and... have make_request() actually return something useful?)

You're not actually URL-encoding the values of username or password. (Pass them through encodeURIComponent() to accomplish this easily)

You should not need to set the Content-Length header explicitly. (And if you get it wrong, this could easily cause the request to fail)

And the worst script error: you're not canceling the default behavior for the submit button. Return false from check_login(), and change your event handler to onclick="return check_login(username, password);

The markup

You've made your <form> tag self-closing (<form ... />). And included a closing </form> tag. It's unlikely that's what you want (and even less likely that'll behave reliably cross-browser)

Your last cell (<td>) is defined outside of any row (<tr>).

You close a <div> that was never opened.

Upvotes: 3

Related Questions