Chuong 5. 1. Ajax

CHƯƠNG 5: MỘT SỐ CHUYÊN ĐỀ LẬP TRÌNH WEB
VỚI PHP và CSDL

1. Ajax
2. File Upload
3. PHP Mailer
4. Paging
5. MVC
18/09/2022 Lập trình Web 1

LẬP TRÌNH AJAX-PHP

5.1. Ajax
5.1.1. Một số Khái niệm cơ bản

 JavaScript là gì? JavaScript là ngôn ngữ lập trình phổ biến
trong số 3 ngôn ngữ chính của lập trình web:
 HTML: Giúp bạn thêm nội dung cho trang web.
 CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của
trang web.
 JavaScript: Cải thiện cách hoạt động của trang web.
<script language="javascript">
alert("Hello World!");
</script>
Hoặc <script language="javascript" src="demo.js"></script>

5.1. Ajax

jQuery là gì?
jQuery là một thư viện được xây dựng từ
Javascript nhằm giúp lập trình viên xây dựng
những chức năng có sử dụng Javascript trở nên
dễ dàng hơn. jQuery được sử dụng đến 99% trên
tổng số website trên thế giới (trừ những website
sử dụng JS Framework).

5.1. Ajax

XML là gì?
XML (eXtensible Markup Language): Ngôn ngữ Đánh dấu Mở
rộng") là ngôn ngữ đánh dấu với mục đích chung do W3C đề
nghị, để tạo ra các ngôn ngữ đánh dấu khác. Đây là một tập con
đơn giản của SGML, có khả năng mô tả nhiều loại dữ liệu khác
nhau. Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ
liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được
kết nối với Internet.
Ví dụ khi bạn xây dựng một ứng dụng bằng C# và một ứng dụng
bằng PHP thì hai ngôn ngữ này không thể hiểu nhau, vì vậy ta sẽ
sử dụng XML để trao đổi dữ liệu.

5.1. Ajax

XML là gì?

5.1. Ajax
5.1.2. Ajax
AJAX là thuật ngữ viết tắt của Asynchronous Javascript
and XML ( JS và XML không đồng bộ).
AJAX có thể đọc là “trao quyền cho javascript” và thông qua
js để cung cấp một công nghệ phía client-script để gọi ngầm
một lệnh background để phía server thực hiện và nhận
thông tin trả về, update thông tin của trang nhanh mà không
cần phải load lại cả trang, rất mất thời gian load lại những
cái không cần update.

5.1. Ajax
5.1.2. Ajax
Ví dụ: Để kiểm tra nickname đã tồn tại trong cơ sở dữ liệu
hay chưa thì khi thành viên vừa nhập xong nick name,
thông tin trên form lập tức javascript nắm thông tin rồi thực
hiện gọi một hàm bằng PHP bên phía server để kiểm tra
thông tin sau đó trả kết quả html về cho javascript xuất ra
cho người dùng biết tính hợp lệ của nickname, lúc đó
ngươid ùng có thể thay đổi ngay chớ không cần đợi submit
rồi kiểm tra và nhập lại như dùng PHP truyền thống.

5.1. Ajax
5.1.2. AJAX hoạt động như thế nào?

AJAX không phải dùng một công nghệ duy nhất, cũng không phải
ngôn ngữ lập trình. AJAX là một bộ kỹ thuật phát triển web. Bộ hệ thống
này bao gồm:
 HTML/XHTML làm ngôn ngữ chính và CSS để tạo styles.
 The Document Object Model (DOM) để hiển thị dữ liệu động và tạo
tương tác.
 XML để trao đổi dự liệu nội bộ và XSLT để xử lý nó. Nhiều lập trình viên
đã thay thế bằng JSON vì nó gần với JavaScript hơn.
 XMLHttpRequest object để giao tiếp bất đồng bộ.
 Cuối cùng, JavaScript làm ngôn ngữ lập trình để kết nối toàn bộ các
công nghệ trên lại.

5.1. Ajax

 Quy trình cơ bản của AJAX.
Mô hình thông thường Mô hình AJAX
1. HTTP được gửi từ trình 1.Trình duyệt tạo một lệnh
duyệt lên máy chủ. gọi JavaScript để kích
2. Máy chủ nhận, sau đó hoạt XMLHttpRequest.
phản truy xuất thông tin. 2.Ở dưới nền, trình duyệt
3.Server gửi dữ liệu được tạo một yêu cầu HTTP gửi
yêu cầu lại cho trình duyệt. lên server.
4.Trình duyệt nhận dữ liệu 3.Server tiếp nhận, truy
và tải lại trang để hiển thị xuất và gửi lại dữ liệu cho
dữ liệu lên. trình duyệt.
Người dùng phải đợi kết 4.Trình duyệt nhận dữ liệu
thúc quá trình, điều này gây từ server và ngay lập tức
tốn thời gian và làm tăng hiển thị lên trang. Không
tải lượng lên server. cần tải lại toàn bộ trang..

5.1. Ajax

 Quy trình cơ bản của AJAX.
Ajax đóng vai trò như là một lớp trung gian giữa giao diện trên trình duyệt
và máy chủ xử lý thông tin. Có thể mô tả cách thức hoạt động của Ajax
như sau:
 Ajax thực hiện tương tác với máy chủ bằng cách sử dụng đối tượng
XMLHttpRequest, nhận kết quả về dưới dạng XML và phân tích kết quả
bằng công nghệ DOM.
 Tương tác giữa Ajax và giao diện người dùng được thực hiện thông
qua các mã Javascript và XHTML + CSS.

5.1. Ajax
5.1.2. Ajax
Cũng như bất kỳ công nghệ khác, AJAX có thể bị sử dụng
quá nhiều trong một website, vì họ chỉ thấy những ưu điểm
mà AJAX mang lại mà không quan tâm đến những khuyết
điểm của AJAX. Mục tiêu cuối cùng của AJAX là mang lại
trải nghiệm tốt nhất cho người dùng, thu hút khách hàng
dùng website.

5.1. Ajax
5.1.2. Ajax - Ưu điểm:
 Callbacks: Ajax được sử dụng để thực hiện một cuộc gọi lại. AJAX thực hiện
việc truy xuất và / hoặc lưu dữ liệu mà không gửi toàn bộ trang trở lại máy chủ.
Bằng cách gửi lại một phần trang web đến máy chủ, việc sử dụng mạng được
giảm thiểu và các hoạt động diễn ra nhanh hơn. Trong các trang web băng
thông hạn chế, điều này có thể cải thiện đáng kể hiệu suất mạng. Dữ liệu được
gửi đến và đi từ máy chủ một cách tối thiểu.
 Thực hiện các cuộc gọi không đồng bộ: Ajax cho phép bạn thực hiện các
cuộc gọi không đồng bộ đến một máy chủ web. Điều này cho phép trình duyệt
của người dùng tránh phải chờ tất cả dữ liệu đến trước khi cho phép người
dùng hành động một lần nữa.
 Thân thiện với người dùng: Vì không phải post lại trang lên server, các ứng
dụng hỗ trợ Ajax sẽ luôn nhanh hơn và thân thiện với người dùng hơn.
 Tăng tốc độ: Mục đích chính của Ajax là cải thiện tốc độ, hiệu suất và khả
năng sử dụng của một ứng dụng web. Một ví dụ tuyệt vời của Ajax là tính
năng xếp hạng phim trên Netflix. Người dùng đánh giá một bộ phim và xếp hạng
cá nhân của họ cho bộ phim đó sẽ được lưu vào cơ sở dữ liệu của họ mà
không cần chờ trang làm mới hoặc tải lại.

5.1. Ajax
5.1.2. Ajax - Nhược điểm:

 Tính không tương thích của trình duyệt: AJAX phụ thuộc nhiều vào
JavaScript được triển khai khác nhau cho các trình duyệt khác nhau. Điều này
hóa ra là một trở ngại đặc biệt là khi AJAX phải hoạt động trên nhiều trình duyệt.
Các trình duyệt không hỗ trợ JavaScript hoặc tắt tùy chọn JavaScript sẽ không
thể sử dụng chức năng của nó.
 Không an toàn: Trang web có thể khó gỡ lỗi, tăng kích thước mã của trang
web của bạn và khiến trang web của bạn dễ bị đe dọa bảo mật nghiêm trọng.
 Bookmark: Khi người dùng muốn bookmark một trang lại thì khi sử dụng ajax
sẽ ảnh hưởng đến người dùng vì không thể bookmark lại trang có ajax được.

5.2. Sử dụng AJAX trong Javascript
5.2.1 Tìm hiểu về XMLHttpRequest

Đối tượng XMLHttpRequest là trái tim của lập trình Ajax nghĩa
là XMLHttpRequest chính là đối tượng được dùng để gửi
request và nhận response.
 Các bước khởi tạo đối tượng Ajax:
 Bước 1: Tạo đối tượng (object) XMLHttpRequest:

5.2.1. Tìm hiểu về XMLHttpRequest

Tạo một ứng dụng Ajax

5.2.1. Tìm hiểu về XMLHttpRequest

Bước 1: Kiểm tra trình duyệt

5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính

a. Thuộc tính onreadystatechange
• Sau khi một yêu cầu gởi đến máy chủ, chúng ta cần một hàm
để tiếp nhận dữ liệu được máy chủ trả về.
• Thuộc tính onreadystatechange lưu giữ hàm này, hàm sẽ xử lý
dữ liệu trả về từ máy chủ.


b. Thuộc tính readyState
• Thuộc tính readyState lưu giữ trạng thái phản hồi của máy chủ.
Mỗi lần readyState thay đổi, hàm onreadystatechange sẽ được
thi hành.
• Đây là những giá trị hợp lệ cho thuộc tính readyState:


5.2.2 Tìm hiểu về XMLHttpRequest – thuộc tính

c. Thuộc tính responseText
• Dữ liệu được gởi trả về từ máy chủ có thể được tiếp nhận với
thuộc tính responseText.
• Trong đoạn mã, chúng ta sẽ đặt giá trị của trường văn bản “check"
bằng với responseText:


d. status: Trả về trạng thái của request. VD:
200: "OK"
403: "Forbidden"
404: "Not Found"
e. statusText: Trả về trạng thái của request dưới dạng text.
VD: Ok, Not Found.

5.2.2 Tìm hiểu về XMLHttpRequest – phương thức

 AJAX - Gởi yêu cầu đến máy chủ
Để gởi ngầm một yêu cầu đến máy chủ, chúng ta sử dụng
phương thức open() và send().


 Phương thức open() nhận ba tham số.
• Tham số đầu tiên định nghĩa cách thức nào được sử dụng khi
gởi yêu cầu (GET hoặc POST).
• Tham số thứ hai chỉ ra đường dẫn của tập tin mã kịch bản phía
máy chủ.
• Tham số thứ ba chỉ ra yêu cầu có thực hiện bất đối xứng hay
không.


 AJAX - Mã kịch bản ASP phía máy chủ
• Giờ đây chúng ta sẽ tạo mã kịch bản hiển thị thời gian hiện hành
của máy chủ.
• Thuộc tính responseText (đã giải thích trước đây) sẽ lưu giữ dữ liệu
được trả về từ máy chủ. Ở đây chúng ta muốn gởi trở lại user
name.
• Tạo tập tin process.php như sau:
<?php
echo 'lequan';
?>


 Chạy ứng dụng AJAX


a) abort(): Hủy Request hiện tại.
b) getAllResponseHeaders(): Lấy ra thông tin header.
c) getResponseHeader(): Trả về cụ thể thông tin header.
d) send(string): Gửi dữ liệu đến server đã được cấu hình ở
phương thức open(). Trong đó string là data các bạn muốn
truyền theo nếu request là POST.
e) setRequestHeader(): Thiết lập các thông số header gửi lên.

5.3. Kỹ thuật Ajax trong jQuery
5.3.1. jQuery Ajax là gì?

 jQuery Ajax là jQuery cung cấp một số phương thức để
thực hiện các chức năng ajax. Chúng ta có thể yêu cầu
các text, HTML, XML và JSON từ server sử dụng cả giao
thức HTTP GET và HTTP POST, chúng ta cũng có thể lấy
dữ liệu từ bên ngoài trực tiếp vào trong phần tử được chọn.
Link download: http://jquery.com/download

5.3.1. jQuery Ajax là gì?

 Khai báo: download file min.js và khai báo đường dẫn
<script type="text/javascript"
src="jquery-3.6.0.min.js"></script>
Hoặc sử dụng online
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.m
in.js"></script>

5.3.2. Các phương thức cơ bản của jQuery Ajax

jQuery Ajax có khá nhiều phương thức khác nhau. Tuy
nhiên dưới đây sẽ đề cập 4 phương thức cơ bản nhất gồm:
 Phương thức jquery load () jQuery Ajax
 Phương thức Post () trong JQuery Ajax
 Phương thức Get () trong Jquery Ajax
 Phương thức Ajax()


Phương thức load() lấy dữ liệu từ server và trả dữ liệu cho
phần tử được chọn.
Cú pháp:$(selector).load(URL,data,callback);
• URL: mà bạn muốn lấy dữ liệu.
• Data: cặp key/value gửi đi cùng với yêu cầu.
• Callback: tên của hàm sẽ được thực thi sau khi phương
thức load hoàn thành.


Ví dụ:


Ví dụ:


Ví dụ 2: nội dung file demo_test.txt như sau:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>


Phương thức Post (): Có tác dụng lấy dữ liệu từ server bằng phương thức HTTP
POST REQUEST
Cú pháp: $(selector).post(URL,data,function(data,status,xhr),dataType)
 url: required , đường dẫn đến file cần lấy thông tin
 data: không bắt buộc ,là một đối tượng object gồm các key : value sẽ gửi lên
server
 function(data, status , xhr): là function sẽ xử lý khi thực hiện thành công với
các parameters. Với:
data : bao gồm các dữ liệu trả về từ request
status : gồm trạng thái request (“success” , “notmodified” , “error” , “timeout” ,
or “parsererror”)
xhr : gồm các đối tượng XMLHttpRequest
 dataType: là dạng dữ liệu trả về. (text, json, script, xml,html,jsonp )


Ví dụ 2: Tạo trang post.html


Ví dụ 3: Tạo trang vidu2.html


Phương thức Get () Là phương pháp lấy dữ liệu
từ server bằng phương thức HTTP GET
 Tương tự như phương thức Post
Cú pháp:
 $.get(URL,data,function(data,status,xhr),dataType)


Ví dụ 4. tạo trang get.html
Tạo trang vidu4.html

5.3.Các phương thức cơ bản của jQuery Ajax

Phương thức “ajax()”
 Cách sử dụng phương thức này vẫn giống cách gọi của các
phương thức “get() ” và “post() ” nhưng chúng ta thay vì
truyền đường dẫn trực tiếp vào phương thức thì phương
thức “ajax() ” lại chấp nhận đối số đầu tiên chính là cấu hình
cho kĩ thuật Ajax. Cả 2 phương thức get và post đều cách
viết tắt của phương thức “ajax()”

5.3.Các phương thức cơ bản của jQuery Ajax

Ví dụ 5. tạo trang ajax.html

5.4. Lập trình Ajax với ngôn ngữ PHP
Ngôn ngữ lập trình PHP và cơ sở dữ liệu MySQL là sự kết

hợp hoàn hảo cho những những ứng dụng web động, hơn
nữa khi kết hợp PHP và Ajax cung cấp thêm một nền tảng
mạnh để tạo ra các trang web hoặc các ứng dụng dựa trên
web với các tính năng vững mạnh, tiện dụng như các ứng
dụng Desktop.
Sử dụng Ajax để tạo ra một cập nhật cho trang web chứ
không phải là làm mới toàn bộ trang.

1. Tạo một cá thể của đối tượng

XMLHttpRequest cần có và gửi
yếu cầu đến server.
2. Web server sẽ xác định yêu
cầu và gửi PHP xử lý.
3. Lưu trữ hoặc truy xuất dữ liệu
từ database thông qua PHP
4. Trả về kết quả theo yêu cầu
cho server.
5. JS thực hiện phản hồi không
đồng bộ(nội dung sẽ được cập
nhật tại khu vực trang đã yêu
cầu).
5.4.2. Xây dựng ứng dụng

Ví dụ 1. Tạo giao diện


Ví dụ 1. tại trang ajaxsubmit.php

Ví dụ 1. tạo trang js điểm kiểm tra dữ liệu

Ví dụ 2. Tạo danh sách chọn theo từng lớp

Ví dụ 2. Tạo danh sách chọn theo từng lớp

Ví dụ 3. Lấy danh sách từ nhiều bảng dữ liệu

Ví dụ 4. Phân trang

Chuong 5. 1. Ajax

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chuong 5. 1. Ajax

Uploaded by

Copyright:

Available Formats

CHƯƠNG 5: MỘT SỐ CHUYÊN ĐỀ LẬP TRÌNH WEB

VỚI PHP và CSDL

18/09/2022 Lập trình Web 1

18/09/2022 Lập trình Web 2

5.1.1. Một số Khái niệm cơ bản

18/09/2022 Lập trình Web 3

5.1.1. Một số Khái niệm cơ bản

18/09/2022 Lập trình Web 4

5.1.1. Một số Khái niệm cơ bản

18/09/2022 Lập trình Web 5

5.1.1. Một số Khái niệm cơ bản

18/09/2022 Lập trình Web 6

18/09/2022 Lập trình Web 7

18/09/2022 Lập trình Web 8

5.1.2. AJAX hoạt động như thế nào?

18/09/2022 Lập trình Web 9

5.1.2. AJAX hoạt động như thế nào?

18/09/2022 Lập trình Web 10

5.1.2. AJAX hoạt động như thế nào?

18/09/2022 Lập trình Web 11

18/09/2022 Lập trình Web 12

18/09/2022 Lập trình Web 13

5.1.2. Ajax - Nhược điểm:

18/09/2022 Lập trình Web 14

5.2.1 Tìm hiểu về XMLHttpRequest

18/09/2022 Lập trình Web 15

5.2.1. Tìm hiểu về XMLHttpRequest

18/09/2022 Lập trình Web 16

5.2.1. Tìm hiểu về XMLHttpRequest

18/09/2022 Lập trình Web 17

5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính

18/09/2022 Lập trình Web 18

5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính

18/09/2022 Lập trình Web 19

5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính

18/09/2022 Lập trình Web 20

5.2.2 Tìm hiểu về XMLHttpRequest – thuộc tính

18/09/2022 Lập trình Web 21

5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính

18/09/2022 Lập trình Web 22

5.2.2 Tìm hiểu về XMLHttpRequest – phương thức

18/09/2022 Lập trình Web 23

5.2.2 Tìm hiểu về XMLHttpRequest – phương thức

18/09/2022 Lập trình Web 24

5.2.2 Tìm hiểu về XMLHttpRequest – phương thức

18/09/2022 Lập trình Web 25

5.2.2 Tìm hiểu về XMLHttpRequest – phương thức

18/09/2022 Lập trình Web 26

5.2.2 Tìm hiểu về XMLHttpRequest – phương thức

18/09/2022 Lập trình Web 27

5.3.1. jQuery Ajax là gì?

18/09/2022 Lập trình Web 28

5.3.1. jQuery Ajax là gì?

18/09/2022 Lập trình Web 29

5.3.2. Các phương thức cơ bản của jQuery Ajax

18/09/2022 Lập trình Web 30

5.3.2. Các phương thức cơ bản của jQuery Ajax

18/09/2022 Lập trình Web 31

5.3.2. Các phương thức cơ bản của jQuery Ajax

18/09/2022 Lập trình Web 32

5.3.2. Các phương thức cơ bản của jQuery Ajax

18/09/2022 Lập trình Web 33

5.3.2. Các phương thức cơ bản của jQuery Ajax

18/09/2022 Lập trình Web 34