Since this level can be kind of hard for those that haven’t used much javascript before, I decided to go trough the code function by function. I hope someone will find this post useful.
I would strongly recommend you to try to solve the level yourself before reading this post. I’m not going to give away the password, but reading this explanation might take away large parts of the level.
First some background. This level is based on something called AJAX (http://en.wikipedia.org/wiki/Ajax_(programming). It is essentially javascript sending and receiving data to the server after the page has loaded, without the need to reload the page. Ajax is used almost everywhere nowadays, the feed to the right on this site is updated using ajax. So is the feed on facebook, twitter and most other sites.
Anyway, let’s start from the beginning.
<input type="button" value="Login" onclick="loadimage();" />
This line, as you most likely know by now, is the HTML code for the Login button. When the button is clicked a (javascript) function called “loadimage” is called.
To simplify things I’ve broken it into two parts;
function loadimage(_imagepath) {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
URL= "members/" + username + " " + password + ".htm";
imagepath = URL;
document.getElementById("status").innerHTML = 'Checking details...';
// ...
The first 2 lines of the function should be pretty self-explanatory, it grabs the value of the username and password and saves them to two variables.
The third line then uses these two values to create a variable called URL. For example, with a username “USER” and the password “PASS” we would get a URL variable with the value “members/USER PASS.html”.
The next few lines are quite uninteresting. Do notice though that the variable “imagepath” is set the the same value as URL.
// ...
req = getreq();
req.onreadystatechange = imagexists;
req.open("get", imagepath, true);
req.send(null);
}```
This is where things get a bit weird if you haven't used ajax before. The first line uses a function "getreq". This function isn't very interesting, and i see no point in going into much detail about it, but what it essentially does is creating a new, and empty, "ajax request".
Next line, "req.onreadystatechange = imagexists;", sets a callback function to the ajax request. Simply put, this function will be called when the request changes status (keep in mind that we haven't sent it yet though).
The last two lines are responsible for sending the request. The open method's first three arguments, as can be seen [here](http://docs.webplatform.org/wiki/apis/xhr/methods/open), are "method", "url" and "async".
In our example, we are sending a "GET" request to the url imagepath (remember, we set this variable earlier in the function). The last parameter is not important to us.
finally, the function called when the status of the ajax request changes.
if(req.readyState == 4) {
if(req.status == 200) {
document.getElementById(“status”).innerHTML = ‘Correct!’;
document.location = “/levels/r2.php?in&user=” + document.getElementById(‘username’).value + “&pass=” + document.getElementById(‘password’).value;
} else {
document.getElementById(“status”).innerHTML = ‘Incorrect username/password’;
}
}
}```
The first if statement, readyState == 4, checks whether the request is done or not (https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#Properties).
If it is, it goes on the check if the status code (http://en.wikipedia.org/wiki/List_of_HTTP_status_codes) is 200 (OK). If it is, you have entered a correct password and you’ll pass the level.
