Changing the address of the website, as per the php being used.

Question

I have a button in my abc.html page <input type="button" onclick="javafun();">

on the click it goes to javascript, which further send info to my abc.php ...and the javascript function looks like:

function login()
{   
    xmlhttp=GetXmlHttpObject();
    //alert("pass");
    if(xmlhttp==null)
    {
        alert("Your browser does not support AJAX!");
        return;
    }
    var url="login.php";
    url=url+"?id="+username+"&passwrd="+passwrd;
    xmlhttp.onreadystatechange=statechangedLogin;
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
    }
}

function statechangedLogin()
{
    //alert(xmlhttp.readyState);
    if(xmlhttp.responseText=="<font color='red'>Your User Name or Password is incorrect. Please try again.</font>")
 {
  document.getElementById("response").innerHTML=xmlhttp.responseText;
 }
 else 
 {
  //hwin=window.location="http://forum.research.bell-labs.com/zeeshan/qotw/login.php";
  document.getElementById("mainbody").innerHTML=xmlhttp.responseText;
  //hwin.document.innerHTML=xmlhttp.responseText;
  //alert();
 }
}

Everything works fine, but the address of the website in the address bar remains the same: http://severname.com/abc.html

i want this address bar to change, according to the php. it should come to ... http://severname.com/abc.html/login.php

but still should not show ?id=username&passwrd=passwrd

Is this possible, and if it is how??

Zeeshan

Answer 1

Ajax hides JS interaction with your server. That's what is for. If you want your browser to point to some URL, then you shouldn't use Ajax. The thing you're trying to archieve can be easily implemented using a simple POST request, using the good old <form>. HTTP POST requests hide the parameters of the request from the URL, passing them inside the header of the message itself. So URLs can be clean.

Answer 2

I think you have misunderstood the whole point of AJAX. Ajax is supposed to work in the background, i.e. not changing the url. If you want that, try document.location="foobar";

Answer 3

POST the request to ../login.php ?

instead of using ajax, wrap your form elements in

 <form method=POST action="login.php">
      User Name: <input name="username"><br>
      Password: <input name="passwrd" type="password"><br>
      <input type="submit" name="Login">
 </form>

Why are you doing AJAX if you want the address bar to change?

Edit Added real values to the form

Edit 2 More clarity.

You really should do the login via form (see @nathans post).

• Rename your html login form into a php page. Lets call it loginForm.php.
• Remove all the javascript functions from loginForm.php
• Insert the form into loginForm using the form tag.
• In login.php, you check to see if they user logged in successfully,

• If the login suceeded:

   $failMsg = urlencode("Logged in successfully")
   header("Location: loginForm.php?okMsg=$msg&redirect=home.php");
  

• If the login failed:

   $failMsg = urlencode("Failed to login")
   header("Location: loginForm.php?failMsg=$msg");
  

• In your loginForm.php where you are displaying your error messages now, put:

   <? echo  htmlentities($_REQUEST['failMsg']);?>
  

• In loginForm.php where you are displaying success log in message put

   <? echo  htmlentities($_REQUEST['okMsg']);?>
  

• And in the head tag put

   <? if(array_key_exists($_REQUEST,'redirect'))
      {
          echo "<meta http-equiv='refresh" content='5;url=/".$_REQUEST['redirect']."' />";
      }    
   ?>
  

There no javascript and the user gets nice pretty error messages and is forwarded to the home page after logging in.

Answer 4

<form method="post" action="login.php">

You don't need AJAX to do that at all. If you're using the Javascript to validate the input you can add onSubmit="return my_validation_function() ... your validation function should return true if everything was okay or false if it was not. (The false return value will stop the form from submitting)

Answer 5

As other commenters have touched upon, the real answer is that you can't change the URL of a web page (other than the "#" fragment identifier, but that's not useful to you) without causing the browser to send a request to that url.

You want to not bother trying to change the URL if you're submitting via AJAX. Or, you can make a post request as suggested in other comments.

<form method="post" action="login.php">

Answer 6

It sounds like you don't want AJAX at all, just a regular form, unless I'm missing something.

Answer 7

Your method is somewhat insecure and vulnerable to some scripting attacks. I'd look at not doing an Ajax login and just use a regular form as well. This article helped me a ton:

http://www.evolt.org/PHP-Login-System-with-Admin-Features

Evolt has another one that looks similar to what you were trying to accomplish, but I've not read it -- just Google "evolt ajax login"