Lập trình bảng login với ngôn ngữ Ajax

Bài này hướng dẫn các bạn viết 1 form login bằng Ajax. Mục tiêu không nhằm giới thiệu 1 ajax framework nào mà viết toàn bộ từ bước cơ bản nhất kỹ thuật Ajax để có thể hiểu sâu về ngôn ngữ Ajax.

I – Tạo form login:

<body>

<!– Include AJAX Framework –>
<script src=”ajax/ajax_framework.js” language=”javascript”></script>

<!– Show Message for AJAX response –>
<div id=”login_response”></div>
<div id=”divForm”>
<!– Form: the action=”javascript:login()”call the javascript function “login” into ajax_framework.js –>
<form action=”javascript:login()” method=”post”>
<input name=”email” type=”text” id=”emailLogin” value=””/>
<input name=”psw” type=”password” id=”pswLogin” value=””/>
<input type=”submit” name=”Submit” value=”Login”/>
</form>
</div>
</body>

Để ý thấy khi submit, ta dùng một JS function để khởi tạo lời gọi Ajax: login(). Bạn không tìm thấy đoạn JS cho login() ở đây vì tôi link với 1 file .js bên ngoài tên là ajax-framework.js.

II – Tạo file .js để viết code Ajax

/* —————————- */
/* XMLHTTPRequest Enable */
/* —————————- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
request_type = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

/* ————————– */
/* LOGIN */
/* ————————– */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function login() {
// Optional: Show a waiting message in the layer with ID ajax_response
document.getElementById(‘login_response’).innerHTML = “Loading…”
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var email = encodeURI(document.getElementById(’emailLogin’).value);
var psw = encodeURI(document.getElementById(‘pswLogin’).value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open(‘get’, ‘login.php?email=’+email+’&psw=’+psw+’&nocache = ‘+nocache);
http.onreadystatechange = loginReply;
http.send(null);
}
function loginReply() {
if(http.readyState == 4){
var response = http.responseText;
alert(response);
if(response == ‘0’){
// if login fails
document.getElementById(‘login_response’).innerHTML = ‘Login failed! Verify user and password’;
// else if login is ok show a message: “Welcome + the user name”.
} else {
document.getElementById(‘login_response’).innerHTML = ‘Welcome ‘+response;
document.getElementById(‘divForm’).style.display = ‘none’;
}
}
}

Tập trung vào hàm login(), công việc của chúng ta là lấy được dữ liệu nhậu của user thông qua JS, dùng document.getElementById() để tìm đúng textbox cần lấy giá trị.

Sau đó, ta tạo một chuỗi query string, có thêm một giá trị nocache là giá trị phát sinh random nhằm chống lại việc trình duyệt cache file login.php, không truyền về server.

Đối tượng http là một đối tượng XMLHTTPRequest, giúp ta gửi 1 request tới server, đối tượng này tạo ra bởi hàm CreateObject().

Đoạn lệnh mock up này giúp chúng ta biết khi nào nhận được kết quả từ server thì sẽ gọi tiếp hàm loginReply() để xử lý.
http.onreadystatechange = loginReply;

Sau khi đã đặt thông tin hàm xử lý (gọi là hàm CallBack) thì http.send() sẽ gửi thông tin cần xử lý tới server. Ở đây, chúng ta gửi tới 1 file chuyên xử lý lời gọi Ajax là login.php

III – Tạo file xử lý lệnh gọi Ajax
Lập trình trong file login.php

<?php
if(isset($_GET[’email’]) && isset($_GET[‘psw’])){

$email = $_GET[’email’];
$psw = $_GET[‘psw’];

if ($email==’info@thietkeso.vn’ && $psw == ‘123’)
echo $email;
else
echo ‘0’;
}
?>

Bạn thấy rằng việc xử lý này cốt trả về một giá trị (hãy coi nó như 1 hàm trả về giá trị) nên ta chỉ trả về giá trị qua lệnh echo và giá trị đó phải dễ xử lý như là 0 hay $email.

Tiếp theo, function loginReply() xử lý giá trị trả về để hiển thị kết quả.

Bài viết chỉ tới đây để đơn giản cho các bạn thử nghiệm. Reply tiếp theo sẽ phân tích sâu hơn bản chất của Ajax và về đối tượng XMLHttpRequest.

Chúc bạn thành công,

FOLLOW US
Comments
  1. truc

    – Đăng nhập thành công, nhưng F5 lại thì bắt đăng nhập lại, chỉnh giúp em phần đó đi!, Thanks

    • Admin

      Bạn cho mình xem qua demo đc ko? mình test thấy bt mà. Đã có session chưa?

      • truc

        Demo là em lấy trên đoạn code ví dụ ở trên, khi đăng nhập thành công rồi, F5 lại thì nó lại hiện ra cái form bắt đăng nhập lại

Leave a Reply

Your email address will not be published. Required fields are marked *