RSS Reset

Hướng dẫn AJAX _ Form đăng kí

Em đang muốn tạo 1 form đăng ký bằng php. vấn đề dặt ra ở đây là: như ở trang đăng ký Gmail. khi ta nhập tên vào phần “chọn tên người dung của bạn” sau đó ta ấn chuột ra chỗ khác thì nó tự kiểm tra và báo luôn cho mình biết tên người dùng đó có khả dụng hay không hay đã có người dùng rồi.

Để giải quyết được vấn đề của bạn, bạn cần sử dụng AJAX (Asynchronous JavaScript and XML) để giải quyết , AJAX là  một phương thức trao đổi dữ liệu với máy chủ, và cập nhật các phần của một trang web mà không cần tải lại toàn bộ trang.

Trước hết, bạn cần có phải có một CSDL, ở đây tôi ví dụ CSDL có tên là demo, gồm 01 bảng users gồm 2 cột idusername

Bước 2: Bạn tạo 2 file: index.php, và kiem_tra.php :

+ File index.php bạn thiết kế  như sau:

<form action=”" method=”">
<table>
<tr>
<td>Username </td>
<td><input type=”text” name=”username” id=”username” onblur=”if (this.value!=”) makeRequest()” size=”30″>
<span id=’loading’></span></td>
</tr>
</table>
</form>

+ File kiem_tra.php: dùng để kết nối xuống CSDL mysql để đọc thông tin, kiểm tra thông tin người dùng đã nhập có hữu dụng hay không?

<?php
if(empty($_GET['username'])) exit;
$db = mysql_connect(“localhost”,”root”,”");
if(!$db)
{
echo “Không thể kết nối được dữ liệu”;
exit;
}
$db_selected = mysql_select_db(“demo”,$db);
if(!$db_selected)
{
die (“Không thể sử dụng CSDL : “. mysql_error());
}
$sql = “SELECT * FROM `users` WHERE `username`=’”.$_GET['username'].”‘”;
$query = mysql_query($sql);
$kiem_tra =mysql_num_rows($query);
if($kiem_tra == NULL)
{
echo “NO”;
}
else
{
echo “YES”;
}

Bước 3:

+ Xong bước 2, vẫn bình thường đúng không? File index.phpkiem_tra.php chưa có quan hệ gì đến nhau cả.
+ Công việc tiếp theo là làm sao, khi người dùng nhấn nhập thông tin vào TextField, nhấp chuột đi vị trí khác thì trình duyệt lập tức gửi ngầm thông tin mà người dùng vừa nhập về cho trang kiem_tra.php xử lý.
+ Ta sẽ dùng ứng dụng ajax để làm xử lý vấn đề này. Bạn thêm đoạn sau vào sau thẻ <title>

<script language=”javascript” type=”text/javascript”>
var http_request = false;
function makeRequest() {

// khởi tạo đối tượng http_request………….
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType(‘text/xml’);
http_request.overrideMimeType(‘text/html’);
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}

// kiểm tra đối tượng http_request đã khởi tạo được hay chưa?
if (!http_request) {
alert(‘Cannot create XMLHTTP instance’);
return false;
}

// khai báo thông số cho đối tượng —- http_request ——
http_request.onreadystatechange = alertContents;//http_request.onreadystatechange = …. tên hàm mà sever sẽ đổ dữ liệu sau khi đã kết nối thành công

http_request.open(‘GET’, ‘kiem_tra.php?username=’+document.getElementById(‘username’).value , true); // khai báo phương thức gửi….tên file cần xử lý

http_request.send(null); //những giá trị cần gửi đi, nếu sử dụng phương thức GET thì giá trị gửi là NULL
}

function alertContents() {
// thông báo của sever trả về — http_request.readyState—-
// http_request.readyState == 1 sever đã kết nối thành công đến file xử lý
// http_request.readyState == 4 sever đã xử lý thành công và trả kết quả về
// http_request.status == 200 quá trình xử lý thành công, không có lỗi
//document.getElementById(‘loading’).innerHTML….. —innerHTML—can thiệp nội dung vào giữa thẻ html
if (http_request.readyState == 1) {
document.getElementById(‘loading’).innerHTML=’<img src=”images/loading.gif” style=”border:none; margin:-5px 2px” />’;
}

if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
if(result==’YES’){
document.getElementById(‘loading’).innerHTML = “<span style=’color:#F00;font-size:14px’><img src=’images/danger.png’ width=’15px’ height=’15px’ style=’border:none; margin:-4px 2px’ />&nbsp;Nickname này đã tồn tại.Vui lòng thử lại!</span>”;
}
else{
document.getElementById(‘loading’).innerHTML = “<span style=’color:#68AADF;font-size:14px’><img src=’images/ok.png’ width=’15px’ height=’15px’ style=’border:none; margin:-4px 2px’/>&nbsp;Bạn có thể sử dụng nickname này</span>”;
}
} else {
alert(‘There was a problem with the request.’);
}
}
}
</script>

Bước 4: Còn chần chừ gì nữa. Ta thử test xem nào…

Bạn có thể tham khảo thêm ở file demo ví dụ nói trên tại http://www.mediafire.com/?k0y2ypfx272u3da

Password là:  laptrinhwebphp

No comments yet.

Leave a Comment