Ajax Revolution -With Example

Here you can find many useful articles for webmasters, anything from web design to web marketing! Feel free to add your own articles too! Don't forget to check out our Articles Blog!
Welcome! AdminMania is your source when it comes to anything related to Web Design and Forum administration. We are a friendly community of webmasters sharing knowledge and resources to make our websites successful and profitable. We have many articles and free resources to help you along the way. Our registered members have access to a wide range of information and even contests! So go ahead, Register and become a member of our community today :)

Ajax Revolution -With Example

Postby dectroo on Tue Jul 22, 2008 1:18 am

Many writers have attaqued the Ajax utilities, but don't explain how it can make your page more attractive by adding a new auto form.So i decide to write this article to explain to Adminmania members what we can do with Ajax Proto-language (like i nomed it).
Fisrt, we find Ajax in any CMS Forum; it's used on PHPBB to let poster sumbit her reply without referesh the page.

Ajax=Asyncronous Javascript and XML , have been made to encompassethe idea of using XMLHttpRequest objects in JavaScript to avoid needlessly refreshing a web page. Used first place by Google on Google Suggest and Google Maps.Possibilities are growing that go beyond what an iframe and DHTML could handle, let alone pure page refreshes. The Internet is finally truly going stateless, and the challenge posed now by the adaptive path article is as follows: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

In that regard, I started a project on the weekend that I wasn't sure was possible: creating a fully secure "ajax"-powered login system, ideal for blogs, forums, and other similar sites. I had a barebones secure case working within a few hours, and a few more hours gave the final result that I will share today.
Check my example on site bellow: http://www.jamesdam.com/ajax_login/login.html#login .

Trying out the username and password combinations "user1 / pass1" and "user2 / pass2". Once you get a grasp for what is going on, we'll continue.
So in essence the system does exactly what you just saw, and exactly what I described. While I will not go through the code, I'll briefly go over how the system as a whole works:
You signal that you intend to log in by focussing on the username or password text box on the page.
The server then obtains a random number ("seed" in the code) for the transaction that will be used only for the current transaction, and once the transaction is complete, the seed is useless. (Note this means that if data is intercepted, it cannot be reconstructed to log in the user that was intercepted.)
Once you enter a username and password, the server md5 hashes your password, and then md5 hashes that hash with the seed, and sends thi to the server for authentication (along with your username and the id of the transaction).
The server compares the hash it recieved with the hash of the password hash stored in the database concatenated with the seed for the transaction given by the id from the client.
If these two hashes match, the user is logged in. Otherwise, the appropriate error message is sent back to the client.
Notice how I haven't discussed the presentation issues, as in reality they have little to do with the problem. When I moved from my barebones ugly example to the somewhat more aesthetically pleasing one that I've linked to today, I didn't change any of the backend, nor the login_controller.js file. In designing the system this way, it can be applied to any number of applications, such as a blog comment, a forum, etc.
Also notice that this is seemingly more secure than a traditional login system since the password is never transmitted in plain text.
In the example I have given, I didn't provide any allowances for older browsers, however it would be very simple to modify it such that it degrades gracefully.
Finally, I didn't actually use XML anywhere in my implementation. It simply wasn't necessary, plain text served just as well. In more complicated situations XML might be the answer, but don't over-complicate the problem.
It is my hope that this application of ajax and XMLHttpRequest gets your creativity going for more applications of the technology, and makes you more aware of just how cool it can be.
The last line of the Adaptive Path article I referenced to at the beginning of this article says "It's going to be fun." So far it's been great fun for me, and I trust it will be for you too.
dectroo
Starting Out
Starting Out
 
Posts: 3
Joined: Mon Jul 21, 2008 9:05 pm

Return to Useful Articles

Who is online

Users browsing this forum: No registered users and 0 guests

the best webmaster forum AdminMania
cron