Báo cáo đề tài CÔNG NGHỆ AJAX

Báo cáo đề tài CÔNG NGHỆ AJAX Ajax là gì? Ưu điểm của công nghệ Ajax Các ứng dụng Ajax Các công nghệ trong Ajax Cách sử dụng Ajax Hạn chế Tương lai AJAX viết tắt cho Asynchronous JavaScript And XML AJAX là tập hợp của nhiều công nghệ với thế mạnh của riêng mình để tạo thành một sức mạnh mới.

Trang 1

CÔNG NGHỆ AJAX

GVHD

Thầy Đào Anh Tuấn

Trang 4

Ajax là gì?

mới

4

Trang 5

Ajax là gì?

AJAX, viết tắt cho "Asynchronous JavaScript and XML” AJAX là tập hợp của nhiều công nghệ với

thế mạnh của riêng mình để tạo thành một sức mạnh mới AJAX bao gồm:

Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rất tốt

của W3C

Và tất cả các công nghệ trên được liên kết lại với nhau bằng JavaScript.EBML

Trang 7

Web truyền thống vs Ajax

Trang 8

Mô hình web truyền thống

8

Trang 9

Mô hình web truyền thống

submit dữ liệu đến server

 Trang web chậm và kém thân thiện với người dùng

Trang 10

Ajax

10

Trang 11

Ajax

 T ươ ng tác t nhiên ự

 Không cầần click chu tộ

 Di chuy n chu t cũng là m t s ki n tể ộ ộ ự ệ ương tác

 G b c chêế “click, wait, and refresh” ỡ ỏ ơ

 Ch có nh ng thông tin đỉ ữ ươc yêu cầầu update m i đớ ược g i vêầ và hi n th l i ử ể ị ạ  Gi m t i server và ả ả

Trang 12

Ajax

 S d ng ph ử ụ ươ ng th c giao tiêếp bầết đôầng b : ứ ộ

 Làm cho các ứng dụng web nhỏ hơn, nhanh hơn và thân thiện với người dùng hơn

 Người dùng tiêếp t c th c hi n các ch c nắng khác trong khi client g i yêu cầầu lên server.ụ ự ệ ứ ử

12

Trang 14

Các ứng dụng của AJax

 Ki m tra trùng l p ể ặ

 Tên đắng nh p ph i không b trùng l p v i bầết kỳ ai trong CSDLậ ả ị ặ ớ

 Thông thường, nh p hêết thông tin và g i lên máy ch ki m tra, còn Ajax ki m tra ngay sau khi ngậ ử ủ ể ể ười

dùng v a m i ch n xong tên ừ ớ ọ

 Tính năng "Auto save"

 Bắết chước các phầần mêầm so n th o t đ ng l u nh ng gì ngạ ả ự ộ ư ữ ười dùng đã gõ sau m t kho n th i gian ộ ả ờ

Trang 15

Các ứng dụng của AJax

 Các trang bán hàng tr c tuyếến ự

 C p nh t theo th i gian th c danh sách nh ng gì ngậ ậ ờ ự ữ ười mua ch n và giá c mà không cầần ph i ọ ả ả

t i l i trang web Refreshing dataả ạ

 H thốếng đánh giá các trang web nh c sốế ệ ở ạ

 Người dùng nhầến m t nút đánh giá và ngay l p t c nó s độ ậ ứ ẽ ượ ậc c p nh t vào h thôếng …ậ ệ

Trang 16

Ví dụ: Google Earth

16

Trang 17

Ví dụ: Google Earth

 Có th co giãn, kéo b n đôầ m t cách t nhiên ể ả ộ ự

 D li u đ ữ ệ ượ c load m t cách t nhiên vùng xung quang b n đôầ hi n t i. ộ ự ở ả ệ ạ

Trang 19

Công nghệ trong Ajax

 Javascript

 JavaScript là m t ngôn ng l p trình đa nắngộ ữ ậ

 Hàm JavaScript được g i khi có m t s ki n x y raọ ộ ự ệ ả

Trang 20

sung tính tương tác của Web Nó không đuợc biên dịch mà được trình

duyệt diễn dịch JavaScipt là ngôn ngữ dựa trên đối tượng nhưng nó không phải là ngôn ngữ hướng đối tượng do không hỗ trợ các lớp hay tính thừa kế.

Trang 21

 JavaScript không thể giao tiếp với máy chủ: 2 công việc chủ yếu của máy chủ mà JS không thể thực hiện được là việc tập hợp thông tin từ người dùng và giao tiếp với các máy khác, ta cũng không thể gửi mail với JS vì muốn gửi mail thì phải giao tiếp với máy chủ và tất nhiên JS thì bó tay

 JavaScript không thể tạo các hình ảnh đồ họa: 1 trong các giới hạn của JS là nó ko thể tạo các hình ảnh đồ họa của riêng nó mà chỉ làm việc với các hình ảnh có sẵn theo nhiều cách

 JavaScript không an toàn, đây là 1 trong những điểm yếu để các hacker tận dụng

Trang 22

<html>

<head>

<title>Ví dụ JavaScript</title>

alert(“Hello! Welcome to JavaScript”);

Trang 23

 Trình duy t h tr mô hình đôếi t ệ ỗ ợ ượ ng tài li u ệ

 Document Object Model (DOM)

 Nó giôếng nh m t đôếi tư ộ ượng tài li u JavaScriptệ

 Là m t giao di n l p trình ng d ng (API) cho phép th c hi n các hàm Javascript thay ộ ệ ậ ứ ụ ự ệ

đ i trên DOM ổ

 Thông th ườ ng DOM có d ng m t cầy cầếu trúc d li u và đ ạ ộ ữ ệ ượ c dùng đ truy xuầết các tài ể

li u HTML và XML Mô hình DOM ho t đ ng đ c l p v i h điêầu hành và d a theo k ệ ạ ộ ộ ậ ớ ệ ự ỹ

Trang 24

var empty =document.getElementById( 'empty' );

addNode( empty , "reader of" );

addNode( empty , "Ajax in Action!" );

var children = empty childNodes;

for ( var =0; i children length; i ++)

children [i].className= 'programmed' ;

}

24

Trang 25

 Cascading Style Sheets cung cấp một sự nhất quán trên cảm quan “look and

feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM Đối tượng

XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc

một cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái

nạp dữ liệu trong khi người dùng vẫn làm việc.

suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan

hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng

khá mạnh mẽ.

Trang 26

Các ưu điểm của CSS

 CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web Style

trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ Style thường được lưu

trong các file nằm ngoài trang web Chúng giúp thay đổi cách thức định dạng và cách

bố trí các trang web chỉ bằng cách thay đổi riêng file CSS

với chỉ duy nhất một lần thay đổi tại một vị trí

định nghĩa thẻ thông qua nhiều con đường khác nhau Style có thể được qui định ở

trong chỉ một thẻ HTML, được qui định trong một trang web hoặc ở trong một file CSS

bên ngoài

26

Trang 27

Các ưu điểm của CSS

nhiều cách định dạng cho một thẻ HTML? Theo một cách chung nhất ra có thể nói

các style sẽ được "xếp tầng" (cascade) Việc xếp tầng này tuân theo thứ tự ưu tiên

giảm dần như sau:

 Inline Style (Style được qui định trong một thẻ HTML cụ thể)

 Internal Style (Style được qui định trong phần <HEAD> của một trang HTML)

 External Style (style được qui định trong file CSS ngoài)

Trang 28

XMLHttpRequest Methods

 open(“HTTP method”, “URL”, syn/asyn)

 Phương th c này thiêết l p m t phiên g i t i serverứ ậ ộ ọ ớ

Trang 29

XMLHttpRequest Properties

 B x lý s ki n cho m t s ki n phát sinh m i khi có s thay đ i tr ng tháiộ ử ự ệ ộ ự ệ ỗ ự ổ ạ

 readyState – Tr ng thái c a request ạ ủ

Trang 30

XMLHttpRequest Properties

 Response tr vêầ t server dả ừ ướ ại d ng string.

 Response tr vêầ t server dả ừ ướ ại d ng XML Đôếi tượng này có th để ược phần tách và kh o sát nh ả ư

m t đôếi tộ ượng tài li u DOM.ệ

 Thông đi p c a mã tr ng thái HTTP (ch ng h n OK hay Not Found, …).ệ ủ ạ ẳ ạ

30

Trang 32

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

32

Trang 33

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

 1 M t s ki n đ ộ ự ệ ượ c g i th c hi n Client ọ ự ệ ở

 2 XMLHttpRequest object đ ượ ạ c t o ra

 3 XMLHttpRequest object đ ượ c đ nh d ng ị ạ

 4 XMLHttpRequest object g i yêu cầầu bầết đôầng b ử ộ

 5 Server g i tr vêầ kêết qu ch a bên trong tài li u XML ử ả ả ư ệ

 6 XMLHttpRequest object g i hàm callback() và x lý kêết qu ọ ử ả

 7 HTML DOM đ ượ ậ c c p nh t ậ

Trang 34

 Hàm JavaScript đ ượ c g i th c hi n kêết qu cho s ki n trên ọ ự ệ ả ự ệ

 Ví d : Hàm ụ validateUserId() đ ượ c g i trong s ki n ọ ự ệ onkeyup c a form ủ

“userid”

 <input type= "text“ size= "20“ id= "userid“ name= "id“

onkeyup= "validateUserId();" >

34

Trang 35

 if (!target) target = document.getElementById("userid");

 var url = "validate?id=" + escape(target.value);

 req.open("GET", url, true);

Trang 36

XMLHttpRequest object đ ượ c đắng kí v i m t hàm callback ớ ộ

req.onreadystatechange = processRequest; // callback function

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

req.open("GET", url, true);

req.send(null);

}

36

Trang 37

XMLHttpRequest object g i yêu cầầu bầết đôầng b ử ộ

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

req.open("GET", url, true);

req.send(null); }

Trang 38

Server tr kêết qu XML ả ả

public void doGet(HttpServletRequest request,

HttpServletResponse response) throws IOException, ServletException {

String targetId = request.getParameter("id");

if ((targetId != null) &&!accounts.containsKey(targetId.trim())) {

Trang 39

XMLHttpRequest object g i hàm callback() và x lý kêết qu ọ ử ả

 XMLHttpRequest object đã đ ượ c đắng kí g i hàm ọ processRequest() khi có thay đ i ổ ở

thu c tính ộ readyState c a XMLHttpRequest object ủ

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

var message = ;

Trang 40

C p nh t HTML DOM ậ ậ

 JavaScript lầếy các tham chiêếu t i các element trong trang web v i DOM API ớ ớ

 G i đêến element có tên : ọ

 document.getElementById("userIdMessage"), hàm này tr vêầ ID c a "userIdMessage" ả ủ

 JavaScript được dùng đ hi u ch nh các thu c tính element; hi u ch nh các property c a ể ệ ỉ ộ ệ ỉ ủ

element; ho c thêm, xóa, hi u ch nh element con.ặ ệ ỉ

40

Trang 42

C p nh t HTML DOM ậ ậ

 // if the messageBody element has been created simple replace it otherwise

 // append the new element

Trang 44

 JavaScript hướng đ n th yêếuơ ể

 Thiêếu m u Design Partern cũng nh ẫ ư guideline

 Đa sôế đang b n Betaở ả

44

Trang 45

Các hạn chế của Ajax

 S nhanh chóng đẽ ược đôầng nhầết

 Không h tr XMLHttpRequest các trình duy t cũ ỗ ợ ở ệ

 Dùng Iframe đ thay thêếể

 Ph thu c vào JavaScript và khó qu n lý ụ ộ ả

 M t vài trình duy t nh n d ng saiộ ệ ậ ạ

Trang 47

T ươ ng lai AJAX

 Tính t ươ ng thích trình duy t tôết h n ệ ơ

 Phát tri n các Framework m nh h n ể ạ ơ

Trang 48

Cảm ơn sự quan tâm theo dõi của thầy và các bạn

48

Định dạng
Số trang	48
Dung lượng	450,49 KB