Giới thiệu và sử dụng aja xr40

GiỚI THIỆU VÀ SỬ DỤNG
AJAX

Nhóm H1, H3
GVHD: NDHuy

AJAX
(Asynchronous JavaScript And Xml)

Giới thiệu tổng quan

Sự hoạt động của Ajax

Dùng Ajax với đối tượng XmlHttpRequest

Dùng Ajax với thư viện Ajax ASP.Net

Giới thiệu một số website có sử dụng Ajax

AJAX
• Đặt vấn đề
• Ajax là gì
• Các đặc điểm của Ajax

AJAX
1. Đặt vấn đề

Request

Response
Web Server
IIS, Apache,
Tomcat, ..

HTML

Sự hoạt động của một trang web

AJAX

AJAX

Làm thế nào để thay đổi nội
dung trang web mà không
phải refresh lại trang web ?

AJAX

AJAX
• Ajax là gì
– AJAX (Asynchronous JavaScript And XML) :
nghĩa là “JavaScript và XML không đồng bộ”
là một nhóm các công nghệ phát triển web

AJAX
• Ajax là gì
– 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
• Mô hình DOM (Document Object Model)
• Đối tượng XMLHttpRequest
• XML

AJAX
• Các đặc điểm của Ajax
– Ưu điểm :
• Trang web có thể cập nhật lại nội dung cần thiết mà không
phải nạp lại toàn bộ trang web
• Trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi
giữa máy chủ và trình duyệt web giảm đi rất nhiều.
– Nhược điểm :
• Các chức năng Back, Bookmark của trình duyệt hoạt động
của trình duyện hoạt động không đúng
• Để xem được các trang web Ajax thì trình duyệt phải hỗ trợ
javascript
• Mở ra một cách 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.

AJAX
Máy khách
Trang web
Javascript HTML + CSS

Ajax Engine

HTTP request XML Data

Máy chủ web

Máy chủ CSDL

Phía máy chủ

Mô hình hoạt động của Ajax

Hoạt động người dùng

Truyền dữ Máy khách
Xử lý
đồng bộ
u liệ

Máy chủ
Hệ thống xử lý

Trang
Hoạt động người dùng
web
Máy khách
Ajax Engine
Truyền

Xử lý
d

bất đồng bộ
ữ liệu

Máy chủ
Hệ thống xử lý

AJAX
Máy khách Máy khách
Trang web Trang web

Javascript HTML + CSS

HTML + CSS
HTTP request

Ajax Engine

HTTP request XML Data

Máy chủ web Máy chủ web

Máy chủ CSDL Máy chủ CSDL

Phía máy chủ Phía máy chủ

So sách ứng dụng web truyền thống (bên trái) với Ajax

AJAX
Dùng Ajax với đối tượng
XmlHttpRequest
• Giới thiệu
• Các bước thực hiện

AJAX
XmlHttpRequest
 XmlHttpRequest
– Là lớp thư viện của javascript
– Được dùng để yêu cầu (Request) về Web
Server và nhận phản hồi (Response) từ Web
Server.
– Dữ liệu phản hồi từ Web Server là xml hoặc
text

AJAX
XmlHttpRequest
– Bước 1 : Khởi tạo đối tượng XmlHttpRequest
– Bước 2 : Gán giá trị cho đối tượng
XmlHttpRequest và gửi về Web Server
– Bước 3 : Nhận phản hồi từ Web Server và xử
lý kết quả nhận được
– Bước 4 : Viết xử lý ở Web Server

AJAX
XmlHttpRequest
• Các bước thực hiện – mô tả bẳng mô hình
– Bước 1 : Khởi tạo đối tượng XmlHttpRequest
//Biến toàn cục dùng để tham chiếu đến đối tượng XmlHttpRequest
var xmlHttp = null;

//Phương thức tạo đối tượng XmlHttpRequest
function createXmlHttpReques()
{
var kq;
try{
kq = new XMLHttpRequest();
}
catch(e){
//IE6 hoặc cũ hơn
kq = new ActiveXObject("Microsoft.XMLHttp");
}
}

AJAX
XmlHttpRequest
– Bước 2 : Gán giá trị cho đối tượng XmlHttpRequest
và gửi về Web Server
Có 2 phương thức để gửi yêu cầu: GET và POST
//Gửi bằng phương thức GET
var request = "XuatLoiChao.aspx?hoten=" + hoten;

xmlHttp.open("GET", request, true);
//Tham chiếu đến hàm xử lý kết quả trả về
xmlHttp.onreadystatechange = HienThiLoiChao;
//Gửi yêu cầu về Server
xmlHttp.send(null);

AJAX
XmlHttpRequest
– Bước 2 : Gán giá trị cho đối tượng XmlHttpRequest
và gửi về Web Server
//Gửi bằng phương thức POST
var request = "XuatLoiChao.aspx";
xmlHttp.open("POST", request, true);
//Tham chiếu đến hàm xử lý kết quả trả về
xmlHttp.onreadystatechange = HienThiLoiChao;
//Gửi bằng phương thức POST phải gán Header cho Request
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//Gửi yêu cầu về Server
xmlHttp.send("hoten=" + hoten);

AJAX
XmlHttpRequest
– Bước 3 : Nhận phản hồi từ Web Server và xử lý kết
quả nhận được
function HienThiLoiChao()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{ //nhận kết quả trả về
var loi_chao = xmlHttp.responseText;
//Truy xuất đến vùng để hiển thị lời chào
var divLoiChao = document.getElementById("divLoiChao");
//Hiển thị
divLoiChao.innerHTML = loi_chao;}
}
}

AJAX
XmlHttpRequest
– Bước 4 : Viết xử lý ở Web Server
protected void Page_Load(object sender, EventArgs e)
{
//Lấy họ tên mà Client gửi tới
string hoten = Request["hoten"];
//Tạo lời chào
string loi_chao = string.Format("Chào bạn {0}!", hoten);
//Gửi lời chào về Client
Response.Write(loi_chao);
//Kết thúc việc gửi dữ liệu về Client
//Nếu không có dòng này thì nó sẽ gửi luôn phần html trong trang aspx
Response.End();
}

AJAX
XmlHttpRequest
• Thuộc tính readyState
Giá trị Ý nghĩa
0 Request chưa được khởi tạo
1 Request đã được thiết lập
2 Request đã được gởi
3 Request đang được xử lý
4 Request đã được xử lý xong

AJAX
XmlHttpRequest
• Thuộc tính status
Giá trị Ý nghĩa
200 Ok
400 Bad request
401 Unauthorized
403 Forbidden
404 Not found
505 Interanl Server Error

AJAX
• Giới thiệu
• Cài đặt
• Cấu hình cho các Website cũ
• Các control trong ASP.Net Ajax

AJAX
• Giới thiệu
– ASP.Net AJAX Framework là thư viện hỗ trợ
lập trình Ajax cho ASP.Net của Microsoft
– ASP.Net AJAX giúp các ứng dụng ASP.Net
hoạt động theo cơ chế Ajax với cách lập trình
không thay đổi.
– Ngoài ra, ASP.Net còn cung cấp các file script
giúp chúng ta lập trình ở Client mà không phụ
thuộc vào bất kỳ ngôn ngữ xử lý ở Server nào
(ta có thể dùng PHP, ASP.Net, JSP,…để xử
lý ở Server)

AJAX
• Download gói cài đặt ASP.NET AJAX tại
địa chỉ
http://go.microsoft.com/fwlink/?LinkID=77296

AJAX
• Cấu hình cho các Website cũ
– Lần lượt thêm các phần tử chưa có từ file
web.config mẫu vào file web.config của
website :
• <configSection>element
• <controls>element
• <assemblies>element
• <httpHandlers>element
• <httpModules>element
• <system.web.extensions>element
• <system.webserver>element

AJAX
– ScriptManager
– UpdatePanel
– UpdateProgress
– Timer

AJAX
– ScriptManager :
• ScriptManager dùng để quản lý các client script
(javascript) cho các trang ASP.Net AJAX
• ScriptManager bắt buộc phải có trong các trang
ASP.Net AJAX

Luôn có khi mới tạo một trang web

AJAX
– UpdatePanel :
• UpdatePanel dùng để cập nhật nội dung nằm
trong nó mà không phải load lại toàn bộ trang web
• Trong 1 trang web ASP.Net AJAX, có thể có nhiều
UpdatePanel control. Ta có thể kiểm soát việc các
UpdatePanel cập nhật nội dung cho các vùng nằm
bên trong các UpdatePanel

AJAX
– UpdatePanel :
UpdatePanel và các property

AJAX
– UpdatePanel :
• ChildrenAsTrigger (Boolean): nếu = true thì khi
các control nằm bên trong UpdatePanel có xảy
ra PostBack thì UpdatePanel sẽ cập nhật lại nội
dung nằm trong nó
• UpdateMode:
Always: luôn luôn cập nhật nội dung của
UpdatePanel
Conditional: Cập nhật UpdatePanel có điều kiện.

AJAX
– UpdatePanel :
• Ví dụ: Tìm kiếm thông tin học viên
Ta sẽ thiết kế giao diện như sau:

UpdatePanel1:
-ChildrenAsTrigger = true
Các control nằm bên trong
UpdatePanel sẽ tự động cập nhật
khi ta click vào nút Tìm kiếm

AJAX
– UpdatePanel :
• Ví dụ: Tìm kiếm thông tin học viên

AJAX
– UpdatePanel :
• Triggers: UpdatePanel cập nhật nội dung khi
các biến cố của các control được cấu hình làm
trigger xảy ra
Ví dụ: ta thiết kế màn hình danh mục nhà xuất
bản như sau:
- DetailsView để thêm dữ liệu nhà xuất bản
- UpdatePanel để cập nhật lưới khi thêm nhà xuất bản
- Lưới GridView nằm bên trong UpdatePanel
- Cho phép xóa, sửa, sắp trên trên Lưới

Ví dụ: dùng UpdatePanel với Triggers

UpdatePanel cập
nhật nội dung khi sự
kiện ItemInserted
của DetailsView xảy
ra

AJAX
– UpdatePanel :
• Phương thức Update: cập nhật nội dung
nằm bên trong UpdatePanel

Ví dụ: cập nhật nội dung UpdatePanel1 khi
Click vào Button thì trong biến cố Click của
Button viết lệnh như sau:
UpdatePanel1.Update();

AJAX
– UpdatePanel : Một số điểm cần lưu ý
• Sử dụng nhiều UpdatePanel Control: Giả sử trang
ASP.NET AJAX của ta có nhiều vùng nội dung muốn cập
nhật thì ta có thể chứa các vùng này trong các UpdatePanel
khác nhau
• Để kiểm soát được việc cập nhật của các UpdatePanel
control thì ta nên lưu ý đến thuộc tính UpdateMode của nó.
Ta gán UpdateMode = Conditional. Sau đó kiểm soát việc
cập nhật nội dung của UpdatePanel bằng Trigger hoặc gọi
phương thức Update của Panel

AJAX
– UpdatePanel : Một số điểm cần lưu ý
• Nếu ta để UpdateMode = Always thì khi có
PostBack, tất cả các UpdatePanel đều cập nhật
nội dung. Điều này sẽ ảnh hưởng tới cập nhật

AJAX
– Update Progress:
• UpdateProgress được dùng kèm với UpdatePanel
• UpdateProgress cho ta biết quá trình xử lý ở
Server của UpdatePanel có hoàn tất chưa.
• Ví dụ: như để cập nhật nội dung hiển thị cho lưới
thì bước đầu ta phải lấy dữ liệu, sau đó hiển thị dữ
lịêu cho lưới. Trong lúc chờ Server lấy dữ liệu cho
lưới thì ta có thể dùng UpdateProgress để xuất
thông báo : “Đang load dữ liệu..”

AJAX
• Thuộc tính AssociatedUpdatePanel dùng để gắn
UpdateProgress với UpdatePanel

AJAX
• Ví dụ: Màn hình tìm kiếm học viên

Update
Progress

AJAX
– Timer
• Dùng để qui định sau một khoảng thời gian thì sẽ
tự động xử lý cái gì đó.
• Ví dụ: Sau mỗi giây thì cập nhật lại UpdatePanel.
Ta làm chương trình đồng hồ điện tử như sau:

protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString("hh:mm:ss"); }

AJAX
(Asynchronous JavaScript And Xml)



Dùng Ajax với đối tượng XmlHttpRequest


Các thư viện khách cho Ajax

Giới thiệu một số website có sử dụng Ajax

Các thư việc khách cho ajax
– MS Atlas
– Dojo
– Zimbra kabuki AJAX toolkit
– Google web toolkit
– Open Rice và Prototype
– Yahoo! AJAX Library

AJAX
Giới thiệu một số website có sử dụng
Ajax
• Flickr(http://www.flickr.com): website chia
sẽ hình ảnh
• Gmail (http://gmail.com)
• Thắng cảnh đẹp (http://thangcanhdep.com
)
• Music Online
(http://music.congnghiep4.com)

Giới thiệu và sử dụng aja xr40

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Giới thiệu và sử dụng aja xr40

Similar to Giới thiệu và sử dụng aja xr40 (20)

Recently uploaded

Recently uploaded (20)

Giới thiệu và sử dụng aja xr40

Editor's Notes