Các kỹ thuật sử dụng Ajax

(Neu khong doc duoc tieng Viet, ban nen dung IE7, FireFox, hoac Mozilla)

I. Sử dụng các Frame ẩn (The Hidden Frame)

Ý tưởng cơ bản của phương pháp này là tạo một frameset mà trong đó có một Frame ẩn . Bạn có thể ẩn một frame bằng cách thiết lập thuộc tính width và height bằng 0, có nghĩa là nó sẽ không được hiển thị. Mặc dù một vài trình duyệt cũ không thể dấu được hoàn toàn các frame ẩn (vẫn còn các border), kỹ thuật này vẫn được sử dụng khá rộng rãi trong lập trình web.

1.Hình mẫu

Kỹ thuật sử dụng frame ẩn tương đối rõ ràng trên hình ảnh minh hoạ. Bước đầu tiên mà người dùng luôn tương tác là frame hiển thị. Bình thường, người dùng không biết một trang web có một frame ẩn, và tương tác với trang web như bình thường. Khi người dùng thực hiện hành động mà đòi hỏi dữ liệu tương tác với server, thì có sự kiện được phát sinh: một hàm Javascript thực thi gọi tới frame ẩn. Lệnh thực thi này có thể chỉ đơn giản là tải một trang khác vào frame ẩn hoặc phức tạp hơn là đẩy dữ liệu lên server. Không quan tâm tới chi tiết của các hàm Javascript, bước thứ 2 sẽ thực thi là: một yêu cầu được gửi tới server.

BÆ°á»›c thứ 3 trong hình mẫu là sá»± trả lời từ server. Vì bạn làm việc vá»›i frame ẩn, nên dữ liệu trả về sẽ  tác Ä‘á»™ng lên frame ẩn, và trên frame ẩn đó bạn có dữ liệu trả về từ server. Bạn sẽ viết hàm Javascript để "copy" dữ liệu từ frame ẩn sang frame hiển thị, công việc này hoàn toàn làm ở trên trình duyệt, và bạn sẽ không thấy trang web bị refresh lại.

2.Sử dụng Frame ẩn với yêu cầu GET (Get Requests)

Bạn đã được giải thích hình mẫu làm việc của frame ẩn, bây giờ ta sẽ tìm hiểu sâu hơn về nó. Ta hãy tìm hiểu ví dụ sau:

Bạn tạo  má»™t trang web tìm kiếm ca sÄ©, bạn nhập ID của ca sÄ©  và sẽ nhận về các thông tin của ca sÄ© đó. Các thông tin của ca sÄ© được lÆ°u trữ trong database trên server. Ví dụ sá»­ dụng ngôn ngữ PHP và database server MySQL

Đầu tiên bạn tạo một bảng chứa các thông tin về ca sĩ, bạn có thể sử dụng đoạn script sau để tạo:

CREATE TABLE `casi` (
`idcasi` int(11) NOT NULL auto_increment,
`hoten` varchar(25) collate latin1_general_ci NOT NULL default '',
`dongnhac` varchar(25) collate latin1_general_ci default '',
`albumhaynhat` varchar(100) collate latin1_general_ci NOT NULL default '',
`email` varchar(30) collate latin1_general_ci NOT NULL default '',
`baihathaynhat` varchar(100) collate latin1_general_ci NOT NULL default '',
PRIMARY KEY (`id`)
)ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
 

INSERT INTO `casi` VALUES (1,'Dam Vinh Hung','Nhac Tre','MrDam','damvinhhung@gmail.com','Lang thang');
INSERT INTO `casi` VALUES (2,'Phuong Thanh','Nhac Tre','Dem co don','phuongthanh@vnn.vn','Chia tay tinh dau');
INSERT INTO `casi` VALUES (3,'Cam Van','Tru Tinh','Ha Noi ','camvan@hnn.vn','Ha Noi mua vang nhung con mua');

Trường quan trọng nhất là idcasi , bạn sẽ sử dụng trường này để tìm kiếm thông tin của ca sĩ.

Sau khi tạo database, bạn bắt đầu thiết kế các trang web. Để sử dụng kỹ thuật frame ẩn, bạn thiết kế trang web casi.html với frameset như sau:

   
   

Phần quan trọng trong đoạn code trên là thuộc tính rows của tag , được thiết lập là 100%,0. trình duyệt sẽ hiểu là không hiển thị phần nội dung của frame thứ 2, có tên là hiddenFrame. Tiếp theo, thuộc tính frameborder được thiết lập bằng 0, nghĩa là sẽ không hiển thị các đường viền. Điều quan trọng cuối cùng là thiết lập thuộc tính noresize là noresize để người dùng không thể thay đổi kích thước của các frame. Nội dung của frame ẩn sẽ không được hiển thị cho người dùng.

Như trên ta thấy, frameset có gọi 2 trang là display.htm và about:blank, trang about:blank là trang trắng mặc định của trình duyệt, ta không phải thiết kê. Ta sẽ thiết kế trang display.htm, trang này có nhiệm vụ yêu cầu và hiển thị thông tin của ca sĩ. Trang này khá đơn giản, bao gồm một textbox để nhập idcasi, một button để kích hoạt thực hiện yêu cầu, và một

tag để hiển thị thông tin trả về.

Tìm thông tin cua ca si:

Ca si ID:

<input type=" button" value=" Tìm thông tin"
          onclick=" requestCasiInfo()" />

Bạn để ý thấy khi Click , button sẽ gọi má»™t hàm có tên là requestCasiInfo(), hàm này tÆ°Æ¡ng tác vá»›i frame ẩn để nhận về dữ liệu. Nó Ä‘Æ¡n giản nhận giá trị ở  textbox vá»›i id là txtCasiId  và Ä‘Æ°a nó vào truy vấn ở trang getcasidata.php, tạo má»™t URL dạng nhÆ° getcasidata.php?id=1. URL này sẽ được tải về frame ẩn . Hàm của nó nhÆ° sau:

function requestCasiInfo(){
    var sId = document.getElementById("txtCasiId").value;
    top.frames["hiddenFrame"].location = "getcasidata.php?id=" + sId;
}

Bước đầu tiên của hàm trên là nhận số idcasi từ textbox txtCasiId. Để làm điều đó bạn gọi document.getElementById() với textbox có id=txtCasiId và gọi tới thuộc tính value, giá trị trong textbox txtCasiId được gán vào biến sId. Tiếp theo, sId được gán vào chuỗi getcasidata.php?id=" để tạo thành một URL đầy đủ. Dòng lênh tiếp theo sẽ tạo một URL và gán nó vào frame ẩn. Để tham chiếu tới frame ẩn, bạn cần truy cập vào trình duyệt bằng cách sử dụng đối tượng top . Đối tượng này chứa một danh sách mảng các frame có trong trình duyệt. Mỗi frame có thể coi là một đối tượng để duyệt URL riêng rẽ, bạn có thể thiết lập URL gán vào nó bằng thuộc tính location.

Tiếp theo chúng ta cần tạo một hàm với chức năng hiển thị thông tin được nhận về. Hàm displayCasiInfo(), sẽ được gọi bởi frame ẩn khi nó nhận dữ liệu trả về. Tham số trong hàm chính là thông tin ca sĩ được hiển thị.

function displayCasiInfo(sText) {
    var divCasiInfo = document.getElementById("divCasiInfo");
    divCasiInfo.innerHTML = sText;
}

Trong hàm trên, dòng lênh đầu tiên sẽ được gán tới tag

có chức năng hiển thị dữ liệu. Trong dòng lệnh tiếp theo, thông tin ca sĩ sText sẽ được gán vào thuộc tính innerHTML của tag

. Thuộc tính innerHTML chứa dữ liệu hiển thị của một tag

.

Trong hàm requestCasiInfo() có gọi tới trang php getcasidata.php, tiếp theo chúng ta sẽ thiết kế trang này.

   
        Get Customer Data
<?php

    //ma php xu ly du lieu

?>
   
   
       

   

Trong trang trên, đoạn mã php thứ nhất sẽ xử lý dữ liệu về ca sĩ (sẽ được bàn chi tiết ở dưới), đoạn mã php thứ hai hiển thị thông tin ca sĩ trả về trong tag

bằng cách nhận dữ liệu từ biến $sInfo . Bạn cần đọc dữ liệu từ tag

và gửi (copy) chúng tới frame hiển thị. Để làm điều này, bạn cần tạo một hàm Javascript, hàm này sẽ được gọi tới khi trang getcasidata.php được duyệt hoàn chỉnh.

window.onload = function () {
    var divInfoToReturn = document.getElementById("divInfoToReturn");
    top.frames["displayFrame"].displayCasiInfo(divInfoToReturn.innerHTML);
};
Hàm trên được gán trực tiếp vào sự kiện window.onload. Đầu tiên nó tham chiếu tới

có chứa dữ liệu trả về (trong trường hợp này là

), tiếp theo nó truy cập vào frame hiển thị và gọi hàm displayCasiInfo() đã được tạo ở phần trên. Tóm lại chức năng chính của hàm này là copy dữ liệu từ một tag

trong frame này tới một tag

trong frame khác.

Bây giờ, chúng ta sẽ viết đoạn mã php để nhận dữ liệu:

<?php

    $sID = $_GET["id"];
    $sInfo = "";

    $sDBServer = "localhost";
    $sDBName = "database";
    $sDBUsername = "username";
    $sDBPassword = "password";
    $sQuery = "Select * from casi where `idcasi` =".$sID;

    $oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
    @mysql_select_db($sDBName) or $sInfo=" Không the ket noi database";

    if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {
        $aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
        $sInfo = $aValues['hoten']."
".$aValues['dongnhac']."
".
        $aValues['albumhaynhat']."
".$aValues['baihathaynhat']."
".
        "".
        $aValues['email']."";
    } else {
        $sInfo = "Không có ca si ID =  $sID .";
    }
    mysql_close($oLink);
?>
Đoạn code trên sẽ gọi tới database và nhận lại dữ liệu thích hợp. Biến $sID sẽ nhận giá trị id từ URL: "getcasidata.php?id=" bằng phương thức GET, tiếp theo là truy vấn vào database với điều kiện thoả mãn $sID. Dữ liệu trả về được gán vào biến $sInfo.

Đến đây, bạn đã có thể test chương trình của mình rồi đấy. Bạn có thể download mã chương trình tại đây.

3.Sử dụng Frame ẩn với yêu cầu POST (Post Requests)

Trong phần trên, chúng ta sử dụng GET Request để nhận dữ liệu từ database. Nhưng nếu bạn muốn gửi một yêu cầu POST (POST Request) thì làm thế nào?

POST Request thường được sử dụng khi muốn gửi lên Server, ngược lại với GET Request là nhận dữ liệu từ server. Mặc dù GET Request có thể gửi một khối lượng lớn dữ liệu thông qua các câu lênh truy vấn (query string), nhưng một vài trình duyệt chỉ cho phép tới 512KB dữ liệu trong câu lệnh truy vấn. POST Request có thể gửi tới 2GB dữ liệu, đáp ứng phần lớn yêu cầu của người dùng.

Theo mặc định, chỉ có một cách để gửi POST Request là sử dụng một form với thuộc tính method được thiết lập là post. Sau đó, dữ liệu được gửi vào POST Request tới URL được thiết lập trong thuộc tính action. Một vấn đề phát sinh trong thực tế là khi bạn submit thì trang web sẽ chuyển đến một URL mới. Điều này làm tiêu tan mục đích sử dụng Ajax trong hoàn cảnh này. May mắn thay, có một cách khắc phục khá đơn giản là: trong form sử dụng thuộc tính target.

Thuộc tính target trong tag sử dụng tương tự như thuộc tính target trong tag : nó chỉ định rõ nơi nào(URL nào) sẽ khởi động quá trình duyệt. Bằng cách thiết lập thuộc tính target trên form, bạn sẽ không thấy sự thay đổi ở trang web hiện tại khi submit, mà kết quả của submit được thể hiện ở một frame khác hoặc trên 1 cửa sổ khác (trong trường hợp này là frame ẩn)

Để bắt đầu, chúng ta cần thiết lập một frameset, tương tự như phần trên, chỉ thay đổi display.htm thành entry.htm

 
   
   

Phần nội dung của entry.htm được chứa trong tag và có các textbox tương ứng với các trường trong database(trừ idcasi được database tự động tăng lên). Sau đó là cặp

được sử dụng để thông báo tình trạng kết nối giữa trình duyệt và server.

   

Nhap du lieu ve ca si:

   

Ten ca si:

    Dong nhac:

    Album hay nhat:

    Bai hat hay nhat:

    E-mail:

   

Chú ý răng thuộc tính target được thiết lập gọi tới hiddenFrame và khi bạn Click button GHI THONG TIN, sự thi hành sẽ thực hiện trên frame ẩn này.

Trong ví dụ này, chỉ có duy nhất một hàm Javascript trong trang chính, đấy là : saveResult(). Hàm này sẽ được gọi khi frame ẩn trả lại kết quả từ việc ghi dữ liệu về ca sĩ lên database.

function saveResult(sMessage) {
    var divStatus = document.getElementById("divStatus");
    divStatus.innerHTML = "Thong bao:: "+ sMessage;
}

Đó là nhiệm vụ của frame ẩn để gá»­i thông tin  tá»›i người sá»­ dụng. Đó là các thông tin xác nhận về tình hình dữ liệu về ca sÄ© đã được gá»­i lên hay chÆ°a, nếu chÆ°a thì tạo sao.

Tiếp theo là file  SaveCasi.php, file này chịu trách nhiệm xá»­ lý POST Request. Đoạn mã PHP được sá»­ dụng để nhận dữ liệu từ POST Request và ghi chúng vào database. Khi sá»­ dụng POST Request, mảng $_POST sẽ chứa toàn bá»™ dữ liệu được submit.

<?php

    $shoten = $_POST["txthoten"];
    $sdongnhac = $_POST["txtdongnhac"];
    $salbum = $_POST["txtAlbum"];
    $sbaihat = $_POST["txtbaihat"];
    $sEmail = $_POST["txtEmail"];

    $sStatus = "";

    $sDBServer = "localhost";
    $sDBName = "test";
    $sDBUsername = "username";
    $sDBPassword = "password";

    $sSQL = "Insert into casi(hoten,dongnhac,albumhaynhat,baihathaynhat,email) ".
              " values ('$shoten','$sdongnhac','$salbum','$sbaihat','$sEmail')";


    $oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
    @mysql_select_db($sDBName) or $sStatus = "Khong the ket noi database";

    if($oResult = mysql_query($sSQL)) {
        $sStatus = "Da ghi du lieu ca si voi ID la  ".mysql_insert_id();
     } else {
        $sStatus = "Co loi, du lieu chua duoc ghi.";
    }


    mysql_close($oLink);
?>
Hàm mysql_insert_id() luôn trả về tham số nhảy tự động mới nhất. Trong trường hợp này là idcasi.

Biến $sStatus được đưa vào hàm Javascript.

    window.onload = function () {
        top.frames["displayFrame"].saveResult("");
    }

Vậy là bạn đã có thể sử dụng POST Request theo cách của Ajax rồi đây. Bạn có thể downloadchương trình demo tại đây.