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

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

Nhóm H1, H3GVHD: NDHuy

AJAX(AAsynchronous synchronous JJavaScript avaScript AAnd nd XXml)ml)

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

AJAXGiới thiệu tổng quan

1. Đặt vấn đề

2. Ajax là gì

3. Các đặc điểm của Ajax



Web ServerIIS, Apache, Tomcat, ..

Request

Response

HTML

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


Làm thế nào để thay đổi nội dung trang web mà không

phải refresh lại trang web ?

AJAX



2. Ajax là gì



• 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 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



2. Ajax là gì



• 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(AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXml)ml)






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

Trang webMáy khách

Ajax Engine

Máy chủ web

Máy chủ CSDL

Phía máy chủ

Javascript HTML + CSS

HTTP request XML Data

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

Máy chủ

Trang web

Máy khách

Ajax Engine

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

Truyền dữ

liệu

Hệ thống xử lý

Máy khách

Máy chủ

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

Hệ thống xử lý

Truyền dữ

liệu

Xử lý đồng bộ

Xử lý bất đồng bộ

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

Trang web

Máy khách

Ajax Engine

Máy chủ web

Máy chủ CSDL

Phía máy chủ

Javascript HTML + CSS

HTTP request XML Data

Trang web

Máy khách

Máy chủ web

Máy chủ CSDL

Phía máy chủ

HT

ML

+ C

SSH

TT

P re

qu

est

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

XmlHttpRequest1. Giới thiệu

2. Các bước thực hiện


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


XmlHttpRequest1. Giới thiệu

2. Các bước thực hiện


XmlHttpRequest• Các bước thực hiện

– 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


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 XmlHttpRequestvar xmlHttp = null;

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



– 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);



– 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 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);



– Bước 3 : Nhận phản hồi từ Web Server và xử lý kết quả nhận được

Có 2 phương thức để gửi yêu cầu: GET và POST 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;} } }



– Bước 4 : Viết xử lý ở Web Serverprotected 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(); }


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


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

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

1. Giới thiệu

2. Cài đặt

3. Cấu hình cho các Website cũ

4. Các control trong ASP.Net Ajax

AJAXDùng Ajax với thư viện Ajax ASP.Net• 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)


1. Giới thiệu

2. Cài đặt




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


1. Giới thiệu

2. Cài đặt



AJAXDùng Ajax với thư viện Ajax ASP.Net• 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


1. Giới thiệu

2. Cài đặt




• Các control trong ASP.Net Ajax– ScriptManager

– UpdatePanel

– UpdateProgress

– Timer


• Các control trong ASP.Net 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


• Các control trong ASP.Net 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



UpdatePanel và các property

AJAXDùng Ajax với thư viện Ajax ASP.Net• Các control trong ASP.Net 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.



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

UpdatePanel1:-ChildrenAsTrigger = trueCá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



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


– 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



• 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();


– 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


• Các control trong ASP.Net 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


– 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..”


• Các control trong ASP.Net Ajax– Update Progress:

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


• Các control trong ASP.Net Ajax– Update Progress:

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

Update Progress


• Các control trong ASP.Net 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"); }






Các thư viện khách cho 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)

Tài liệu tham khảo

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

Education