Giáo trình thiết kế Webside bằng Visual Studio 2008 Bài 5: Kỹ Thuật 5 Ajax ASP.NET Ajax

Ajax là nhóm các công nghệ tạo phát triển ứng dụng web Được sử dụng để tạo các ứng dụng web động. Ajax đã được hỗ trợ trong các trình duyệt từ cách đây hàng chục năm Khái niệm về Ajax được ông Jesse James Garrett đưa ra vào tháng 2 năm 2005 Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ: HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript sử dụng XML, JSON, HTML... để trao đổi và hiển thị dữ liệu

Trang 1

Lập trình Web

Trang 3

Ajax

Trang 4

Ajax ( A synchronous J avaScript a nd X ML)

Lịch sử Ajax

• Ajax là nhóm các công nghệ tạo phát triển ứng dụng web

• Được sử dụng để tạo các ứng dụng web động.

• Ajax đã được hỗ trợ trong các trình duyệt từ cách đây hàng chục năm

• Khái niệm về Ajax được ông Jesse James Garrett đưa ra vào tháng 2 năm 2005

• Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

• HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin

• Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript

• sử dụng XML, JSON, HTML để trao đổi và hiển thị dữ liệu

Trang 5

So sánh với web truyền thống

Trang 6

So sánh với web truyền thống (2)

Christopher L Merrill

Using AJAX to Improve the Bandwidth Performance of Web Applications

Scenario/mode First-page size Typical page size Total bandwidth

TOTAL BANDWIDTH SAVINGS > 61%

Trang 7

Trang 8

Trang 9

- Yêu cầu của người sử dụng được gửi

trực tiếp từ browser đến server qua

HTTP Request

- Yêu cầu được gửi đến server qua Ajax Engine bằng các lời gọi JavaScript

- Trong lúc chờ server xử lý, người sử

dụng không được làm gì - Người sử dụng có thể tiếp tục gửi các yêu cầu với Ajax Engine

- Về bản chất, mỗi lần gửi yêu cầu

browser sẽ gửi toàn bộ dữ liệu trên

form lên để server xử lý

- Chỉ gửi các dữ liệu cần thiết phải xử lý

- Sau khi server xử lý xong yêu cầu thì

sinh ra một trang web mới và gửi về

browser

- Sau khi xử lý xong, server chỉ gửi dữ liệu cần thiết về browser

=> Gây lãng phí thời gian, đường truyền

(do gửi nhiều dữ liệu không cần thiết),

hiệu quả sử dụng thấp, hiển thị không

liên tục, thời gian xử lý của máy chủ cao

=> Tiết kiệm thời gian cho người sử dụng, hiệu quả sử dụng đường truyền được cải thiện, hiển thị liên tục, thời gian xử lý của máy chủ thấp (do chỉ xử lý và gửi những dữ liệu cần thiết)

Trang 10

Ưu, nhược điểm của Ajax web

Ưu điểm:

• Giảm lượng lớn băng thông và thời gian nạp trang.

• Hiển thị liên tục

• Làm giảm các kết nối đến server

Nhược điểm:

• Các trang web được tạo động không được ghi vào bộ lưu lịch

sử trình duyệt.

• Nếu trình duyệt bị vô hiệu hóa JavaScript hoặc không hỗ trợ JavaScript hoặc không hỗ trợ Ajax, sẽ đương nhiên không thể

sử dụng Ajax.

• Thiếu các chuẩn cơ bản của Ajax.

• Mở ra một các thức khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển web có thể không kiểm thử hết được

Trang 11

Các trình duyệt hỗ trợ Ajax

• Apple Safari từ 1.2 trở lên

• Konqueror

• Microsoft Internet Explorer từ 4.0 trở lên

• Mozilla/Mozilla Firefox từ 1.0 trở lên

• Netscape từ 7.1 trở lên

• Opera từ 8.0 trở lên

• GreenBrowser 4.3

• Google Chrome tất cả các phiên bản

Trang 12

XMLHttpRequest

• Sử dụng đối tượng XMLHttpRequest để thực hiện gửi các yêu cầu và xử lý các đáp ứng.

• Tạo đối tượng XMLHttpRequest trong JavaScript:

Trang 13

XMLHttpRequest (2)

onreadystatechange Trỏ đến một hàm xử lý khi có sự thay đổi trạng thái yêu cầu

readyState Trả về giá trị số của trạng thái yêu cầu

responseText Nhận chuỗi đáp ứng (dạng text) từ phía server

responseXML Nhận đáp ứng dạng XML từ phía server

status Mã trạng thái đáp ứng từ server

statusText Nội dung trạng thái đáp ứng

Trang 14

XMLHttpRequest (3) - readyState

0 Chưa thiết lập yêu cầu

1 Đã thiết lập yêu cầu

2 Đã gửi yêu cầu

3 Đang trả lời

4 Đã trả lời xong

Trang 15

XMLHttpRequest (4) – Các phương thức

Abort() Hủy bỏ một yêu cầu

getAllResponseHeaders() Lấy tất cả các thông tin trong HTTP headers

getResponseHeader("label") Lấy giá trị của “label” trong HTTP header từ

response

Open("method", "URL"[,

asyncFlag[, "userName"[,

"password"]]])

Tạo một yêu cầu

Send(content) Gửi HTTP request đến server và nhận response

SetRequestHeader("label",

"value")

Thiết đặt giá trị cho các các “label” trong HTTP header

Trang 16

XMLHttpRequest (5) – responseText

Dùng để nhận nội dung dạng text/html do server xử lý yêu cầu và gửi về.

Muốn sử dụng thuộc tính này, server phải thiết lập thuộc

tính ContentType của trang là text/html (mặc định)

Trang 17

Dùng để nhận nội dung dạng XML do server xử lý yêu cầu và gửi về.

Muốn sử dụng thuộc tính này, server phải thiết lập thuộc

tính C ontentType của trang là text/xml

Trang 18

Định dạng
Số trang	19
Dung lượng	1,53 MB