TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
GIÁO TRÌNH
TỐI ƯU HOÁ WEBSITE VÀ AJAX
(Lưu hành nội bộ)
Hà Nội năm 2025
1
MỤC LỤC
Bài 1. Tổng quan về Ajax ......................................................................................... 4
1. Ajax là gì? ......................................................................................................... 4
2. Viết chương trình Ajax Javascript .................................................................... 4
Bài 2. Tìm hiểu jQuery Ajax ..................................................................................... 7
1. Download thư viện jQuery ................................................................................ 7
2. Xây dựng các file trong ứng dụng ..................................................................... 7
3. Viết code jquery ajax ........................................................................................ 7
4. Tìm hiểu các thuộc tính jquery ajax .................................................................. 8
Bài 3. Phương thức POST trong jQuery Ajax ........................................................ 10
1. Phương thức post với $.ajax ............................................................................ 10
2. Phương thức post với $.post ............................................................................ 12
Bài 4. Phương thức GET trong jQuery Ajax .......................................................... 14
1. Phương thức GET với $.ajax........................................................................... 14
2. Phương thức GET với $.get ............................................................................ 15
3. Truyền dưới dạng tham số trong url................................................................ 16
Bài 5. Sử dụng Ajax kết quả trả về kiểu Text ......................................................... 17
1. Tạo CSDL bảng người dùng ........................................................................... 17
2. Tạo trang index.php hiển thị danh sách .......................................................... 17
3. Tạo trang text.php để lấy danh sách người dùng ............................................ 18
Bài 6. Sử dụng Ajax lấy kết quả trả về dạng XML ................................................. 20
1. Giới thiệu sơ lược về XML ............................................................................. 20
2. Tạo trang hiển thị danh sách thành viên. ........................................................ 20
3. Tạo trang lấy danh sách thành viên và trả về định dạng xml .......................... 21
Bài 7. Sử dụng Ajax kết quả trả về kiểu JSON ....................................................... 23
1. Tạo trang hiển thị danh sách thành viên ......................................................... 23
2
2. Tạo trang lấy danh sách thành viên và trả kết quả về dạng json ..................... 24
Bài 8. Validate form đăng ký thành viên với Ajax ................................................. 26
1. Tạo form đăng ký thành viên .......................................................................... 26
2. Tạo database table member ............................................................................. 28
3. Tạo trang kiểm tra dữ liệu và lưu dữ liệu để ajax gọi đến .............................. 28
4. Viết code ajax validate thông tin ..................................................................... 29
Bài 9. Phân trang ajax có thay đổi URL cho SEO .................................................. 32
1. Tạo cơ sở dữ liệu ............................................................................................. 32
2. Viết thư viện phân trang .................................................................................. 32
3. Viết thư viện xử lý database ............................................................................ 36
4. Xây dựng trang hiển thị danh sách phân trang ................................................ 37
Bài 10. Xử lý tiến trình khi làm việc với ajax ......................................................... 42
1. Tính toàn cục trong javascript ......................................................................... 42
2. Hàm always trong jquery ajax......................................................................... 42
3. Tạo trang trả về kết quả chuỗi json để ajax gọi tới ......................................... 43
4. Tạo file xử lý tiến trình ajax ............................................................................ 43
Bài 11. Viết thư viện captcha và kiểm tra mã captcha bằng ajax ........................... 46
1. Tạo thư viện captcha bằng php ....................................................................... 46
2. Tạo file hiển thị hình ảnh captcha bằng php ................................................... 49
3. Tạo form liên hệ hiển thị captcha .................................................................... 49
4. Tạo trang nhận request ajax kiểm tra mã captcha bằng php ........................... 52
Bài 12. Search ajax Autocomplete có phân trang ................................................... 54
1. Xây dựng database .......................................................................................... 54
2. Xây dựng thư viện phân trang ......................................................................... 55
3. Xây dựng model xử lý database ...................................................................... 57
4. Xây dựng hàm lấy danh sách search autocomplete và trả về chuỗi JSON ..... 59
5. Xây dựng trang hiển thị danh sách và search autocomplete ........................... 59
3
Bài 13. Delay the keyup event for jquery ajax ........................................................ 62
1. Tạo các file xử lý liên quan ............................................................................. 62
2. Không sử dụng delay keyup event để gửi ajax ............................................... 63
3. Kỹ thuật Delay the keyup event for jquery ajax ............................................. 63
Bài 14. jQuery Ajax scrolling pagination với PHP và MYSQL ............................. 65
1. Ajax Scrolling Pagination với PHP và MYSQL ............................................. 65
2. Viết jQuery Ajax Scrolling Pagination ........................................................... 66
Bài 15. jQuery Ajax pagination load more với PHP và MYSQL ........................... 70
1. Ý tưởng kỹ thuật jQuery ajax pagination load more....................................... 70
2. Các bước thực hiện ajax pagination load more ............................................... 70
Bài 16. Kỹ thuật xử lý hàng đợi khi gửi ajax .......................................................... 75
1. Tình huống bài toán hàng đợi ......................................................................... 75
2. Xử lý ajax theo hàng đợi ................................................................................. 76
Bài 17. Validate form Modal Bootstrap với jQuery Ajax ....................................... 81
1. Tạo form đăng ký thành viên với Modal Bootstrap ........................................ 81
2. Tạo file xử lý truy vấn CSDL ......................................................................... 82
3. Xử lý jQuery Validate thông tin ...................................................................... 84
4. Bổ sung phần xử lý thông báo lỗi ................................................................... 86
Bài 18. Hướng dẫn crawl dữ liệu trang chonbaihat bằng Ajax + PHP ................... 87
1. Ý tưởng bóc tách dữ liệu trang chonbaihat ..................................................... 87
2. Code bóc tách dữ liệu trang chonbaihat .......................................................... 87
4
BÀI 1. TỔNG QUAN VỀ AJAX
1. Ajax là gì?
Ajax (Asynchronous JavaScript and XML) là một kỹ thuật giúp tạo ra trang
Web động mà hoàn toàn không reload lại toàn bộ trang. Đối với công nghệ web hiện
nay thì ajax không thể thiếu, nó là một phần làm nên sự sinh động cho website. Còn
đối với ngành SEO thì khi sử dụng ajax lại không tốt, tại vì bot Google sẽ không
index được. Nhưng thực tế ta có cách khắc phục và vấn đề này ta sẽ tìm hiểu nó ở
một bài khác.
Ajax được viết bằng ngôn ngữ Javascript nên nó chạy trên client, tức là mỗi
trình duyệt sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau. Hiện nay có nhiều
thư viện javascript như [jQuery], [Angular], [React JS] đều hỗ trợ kỹ thuật này nhằm
giúp chúng ta thao tác dễ dàng hơn. Nhưng tôi muốn các bạn nắm rõ bản chất của
ajax nên trong bài này chúng ta sẽ code thuần javascript 100% nhé.
2. Viết chương trình Ajax Javascript
Chúng ta viết một chương trình đơn giản đó là lấy nội dung trả về của một file
PHP, các bước thực hiện như sau:
Tạo file index.php để xử lý ajax
Các bạn tạo một project và tạo một file index.php với nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script language="javascript">
function load_ajax(){
alert('Clicked');
}
</script>
</head>
<body>
<div id="result">
Nội dung ajax sẽ được load ở đây
</div>
<input type="button" name="clickme" id="clickme"
onclick="load_ajax()" value="Click Me"/>
</body>
</html>
Trong đó tôi đã tạo một thẻ div dùng để chứa nội dung load ajax, một button
trong đó có sự kiện onclick, sự kiện này sẽ gọi đến hàm load_ajax. Các bạn test thử