xmlhttprequest: "password" from txt-file

Question

Hi, I'm new to javascript/ajax and a bit stuck right now. The assignment is to use only javascript/ajax.

I'm supposed to make a login-form, and when typing in the right password it will display a "secret message". Currently this message is an alert-box.

This is in the script for validating the form input:

var riktigPassord = 'password';     
var passord = window.document.passordSkjema.passord.value;
     if (passord == riktigPassord ) {
      alert("Dette er en hemmelig beskjed");
      window.document.passordSkjema.passord.focus();
      return true;
     }
     else {
      alert("Innlogging mislyktes. Passord er feil!");
      window.document.passordSkjema.passord.focus();
      return false;
     }
    }//slutt på funksjonen her

And this is the code for the form:

<form name="passordSkjema" action="#" method="post" 
onSubmit="return validerPassord();">
Passord: <input type="text" name="passord"><br>
<input type="submit" name="knapp">
</form>

I'm supposed to get the password from a txt-file. (still using only javascript) and in my case, the txt-filename is "password.txt".

I've never done this before, but I think I know how to make a XHR-object... xD

// New XMLHttpRequest-object
function newXHRobjekt() {
 try {
  XHRobjekt = new XMLHttpRequest(); // Firefox, Opera, ...
 } catch(err1) {
  try {
   XHRobjekt = new ActiveXObject("Microsoft.XMLHTTP"); // Noen IE
  } catch(err2) {
   try {
    XHRobjekt = new ActiveXObject("Msxml2.XMLHTTP"); // Noen IE
   } catch(err3) {
    XHRobjekt = false;
   }
  }
 }
 return XHRobjekt;
}

So.. My question is. How do I use a XHR-object to get use the functions above to check the password-input against password.txt. the file only contains the password (for instance only "12345"). and also I would like to know how to get the "secret message" from another txt-file.

I'm aware that this isn't secure at all, but it's a part of understanding javascript/Ajax, in my classes.

Thanks!

Answer 1

Hi,

add the following code to the onload event of the body.

var passwordLoaded = false;
var password = "";
var secretMessageLoaded = false;
var secretMessage = "";

var xhr = newXHRobjekt();
xhr.open("GET", "password.txt");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        password = xhr.responseText;
        passwordLoaded = true;
    }
}
xhr.send(null);

xhr = newXHRobjekt();
xhr.open("GET", "secret_message.txt");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        secretMessage = xhr.responseText;
        secretMessageLoaded = true;
    }
}
xhr.send(null);

If both passwordLoaded and secretMessageLoaded are set to true you can use the variables password and secretMessage.

Answer 2

Like many of the Javascript APIs XHR object too have an async interface. So you will need to define callback functions to handle the responses:

xmlhttp.open("POST", "http://example.com",true);
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   alert(xmlhttp.responseText)
  }
}
xmlhttp.send('my request data');

Search for example on the net. I found a post, a bit old but seem to have good examples.