Tài liệu Lập trình Ajax Suggestion pdf

Lập trình Ajax Suggestion

Từ khi xuất hiện vào đầu năm 2005 trên một bài báo của
Jesse James Garette, Ajax đã ngày càng trở nên phổ biến
và được ứng dụng rộng rãi, điển hình là các dịch vụ như
Google Maps, Google Suggest, Gmail, Yahoo! Mail
beta... Đặc biệt là công cụ Google Suggest gợi ý trước
cho bạn một số từ khoá liên quan ngay khi bạn mới chỉ
gõ một phần của từ khoá và số lượng kết quả tìm kiếm
có được nếu bạn thực hiện tìm kiếm với từ gợi ý được
chọn.




Cách gợi ý như của Google Suggest có thể áp dụng vào rất nhiều ứng dụng khác nhau như từ
điển, tìm kiếm nhanh trên một danh sách dữ liệu... Và để áp dụng tính năng gợi ý đó vào trang
web của bạn cũng không quá khó. Bài viết này hướng dẫn cách xây dựng tính năng như vậy cho
một trang web, ngôn ngữ lập trình sử dụng là Java (đòi hỏi bạn phải biết lập trình web với JSP,
Servlet, biết sử dụng web server Tomcat, lập trình Javascript, HTML, và một chút CSS).

Trang web chỉ có một trang duy nhất và có chức năng tìm kiếm tên các nước trên thế giới. Khi
bạn gõ một phần tên của nước cần tìm vào ô tìm kiếm, Ajax sẽ hiển thị danh sách tên các nước
có bắt đầu bằng cụm từ mà bạn đang gõ, cùng một số thông tin liên quan như thủ đô, dân số, diện
tích và mã điện thoại quốc tế. Bạn có thể dùng bàn phím hoặc chuột để chọn một nước trong
danh sách này.

Để cho đơn giản, dữ liệu về các nước trên thế giới được lưu trong một file text (trong thực tế có
thể là một hoặc nhiều bảng trong cơ sở dữ liệu). File này gồm có nhiều dòng, mỗi dòng là thông
tin về một nước, cấu trúc của một dòng như sau:

Tên nước-Thủ đô-Dân số-Diện tích-Mã điện thoại

Các thông tin trên một dòng
được ngăn cách bằng dấu gạch nối (-). Ví dụ:

Argentina-Kabul-21.92-647,497-54

Australia-Canbera-19.10-7,686,848-61

Austria-Vienna-8.10-83,853-43

Vietnam-Hanoi-84.51-329,556-84

Kiến trúc hoạt động của ứng dụng này xây dựng trên mô hình ba lớp, được thể hiện như sau:

Trong đó ở tầng nghiệp vụ (Business tier) ta dùng web server là Tomcat để triển khai ứng dụng
web viết bằng Java, gồm có Servlet để phân tích và xử lý yêu cầu từ trình duyệt (client);
Business object thực hiện việc tìm dữ liệu theo yêu cầu của client và chuyển kết quả tìm được
thành JavaBean. Tầng cơ sở dữ liệu (Database tier) có thể dùng các hệ quản trị CSDL phổ biến
như MySQL, MS SQL, ... Tuy nhiên để cho đơn giản, trong ứng dụng này ta chỉ dùng một text
file để lưu dữ liệu.

Sơ đồ các thao tác thực hiện ở phía server như sau:


Sơ đồ xử lý ở phía client như sau:

Như đã nói ở trên, để đơn giản ta không dùng hệ quản trị CSDL nào mà chỉ dùng một file text để
lưu thông tin về các nước trên thế giới. Bạn tạo một text file có cấu trúc như mô tả ở trên và đặt
tên là countries.txt chẳng hạn.

Chúng ta tạo ra một JavaBean để chứa đựng thông tin về các quốc gia, bao gồm các thuộc tính
sau (tất cả các thuộc tính đều có hàm setXxx() và getXxx(), trong đó Xxx là tên thuộc tính):







STT


Tên thuộc tính


Kiểu dữ liệu


Mô tả


1 area String Diện tích
2 capital String Thủ đô
3 code String Mã điện thoại
4 name String Tên nước
5
population

String Dân số

Lớp này ta đặt tên là CountryBean.java, mã nguồn rất đơn giản:

package com.hainasoft.ajax.suggestion;

public class CountryBean {

private String name;

private String capital;

private String population;

private String area;

private String code;

public CountryBean(String name, String capital, String pop, String area, String code) {

this.name = name;

this.capital = capital;

this.population = pop;

this.area = area;

this.code = code;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getCapital() {

return capital;

}

public String getArea() {

return area;

}

public void setCapital(String capital) {

this.capital = capital;

}

public void setArea(String area) {

this.area = area;

}

public String getPopulation() {

return population;

}

public String getCode() {

return code;

}

public void setPopulation(String population) {

this.population = population;

}

public void setCode(String code) {

this.code = code;

}

}

Bạn để ý trong mã nguồn trên thì gói ứng dụng của chúng ta là com.hainasoft.ajax.suggestion.

Tiếp theo chúng ta cần có một lớp để thực hiện thao tác nghiệp vụ, ở ứng dụng này là đọc dữ liệu từ file
text và ánh xạ (mapping) các thuộc tính trong file text vào JavaBean. Chúng ta đọc qua từng dòng trong
file. Với mỗi dòng đọc được, ta tách các thuộc tính trong chuỗi bằng ký tự ngă
n cách là dấu gạch nối (-),
kết quả được một mảng String với phần tử thứ 0 là tên nước, phần tử thứ 1 là thủ đô, ... Sau đó chúng ta
tạo một object của lớp CountryBean để ánh xạ các thuộc tính này vào thông qua constructor của lớp, và
mỗi object chứa thông tin của một nước này lại được thêm vào một List là kết quả trả về. Tất cả đặt trong
một phương thức duy nhất là getCountries() của l
ớp CountryManager.java, mã nguồn của lớp này cũng
rất đơn giản:

package com.hainasoft.ajax.suggestion;

import java.io.*;

import java.util.*;

public class CountryManager {

private static final String countryFile = "countries.txt";

public List getCountries() throws FileNotFoundException, IOException {

List result = new ArrayList();

File f = new File(countryFile);

FileInputStream fis = new FileInputStream(f);

BufferedReader reader = new BufferedReader(new InputStreamReader(fis));

String strLine = null;

while((strLine = reader.readLine()) != null) {

String[] lineData = strLine.split("-");

result.add(new CountryBean(lineData[0], lineData[1], lineData[2], lineData[3], lineData[4]));

}

reader.close();

return result;

}

}

Tiếp theo chúng ta xây dựng một Servlet để nhận yêu cầu từ client, phân tích yêu cầu này và trả kết quả
tương ứng về cho client, đặt tên cho servlet này là AjaxServlet.java. Mọi thứ chúng ta sẽ làm trong
phương thức doGet() của servlet, còn phương thức doPost() thì gọi lại doGet(). Chúng ta xem qua mã
nguồn trước:

package com.hainasoft.ajax.suggestion;

import javax.servlet.*;

import javax.servlet.http.*;

import java.io.*;

import java.util.*;

public class AjaxServlet extends HttpServlet {

private static final String CONTENT_TYPE = "text/xml; charset=utf-8";

//Initialize global variables

public void init() throws ServletException {

}

//Process the HTTP Get request