Thuyết trình về lập trình AJAX

Thuyết trình AJAX

I Nội dung

1 Giới thiệu về AJAX

2 AJAX Create Object, AJAX http Request

3 The XMLhttpRequest Object, AJAX readyState

4 AJAX và bảo mật

5 Demo về AJAX

1 Giới thiệu về AJAX

- AJAX là viết tắt của Asynchronous JavaScript And

- Ví dụ về các ứng dụng sử dụng AJAX: Google Maps,

Gmail, Youtube, Facebook và các tab.

1 Giới thiệu về AJAX

- AJAX có thể giao tiếp trực tiếp với máy chủ bằng cách sử

dụng các đối tượng JavaScript là MLHttpRequest mà không phải reload lại trang web

- Trang web sử dụng không phải reload lại do AJAX sử dụng

kỹ thuật chuyễn dữ liệu bất đối xứng giữa trình duyệt và

server

 Ưu điểm: Làm cho ứng dụng web trở nên nhỏ hơn,

nhanh và thân thiện với người dung, giảm băng thông,

request tới server

- Lưu ý: AJAX là công nghệ phía trình duyệt, độc lập với phần mềm máy chủ web

1 Giới thiệu về AJAX

- AJAX dựa trên những yêu cầu JavaScript và HTML.

– XLM

– JavaScript

– CSS

– Html

1 Giới thiệu về AJAX

– Nhược điểm của AJAX:

- Trang web không không được lưu trong lược sử với nội dung load bằng AJAX  nút Back mất tác dụng

- Bookmark các nội dung load bởi AJAX rất khó khan

- Nếu trình duyệt không hỗ trợ Javascript (mobile, máy PDA) thì nội dung sẽ hiển thị không chính xác

- Chuẩn cơ bản còn hạn chế nên khó khăn trong việc kiểm soát chất lượng ứng dụng sử dụng AJAX

- 1 hướng mới cho các hacker sử dụng mã độc mà khó

có thể kiểm soát

1 Giới thiệu về AJAX

– 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

2 AJAX Create Object, AJAX http Request

– Nền tảng của Ajax là XMLhttpRequest

– Với XMLhttpRequest, khi có trao đổi dữ liệu với máy chủ Web thì trang Web được cập nhật động mà không phải làm mới toàn bộ trang

– Khi sử dụng XMLhttpRequest qua các bước: khởi tạo, gửi yêu cấu đến server,

2 AJAX Create Object, AJAX http Request

– Khởi tạo XMLHttpRequest:

-Đối với IE7, Firefox, Chorome, các trình duyệt hiện đại

2 AJAX Create Object, AJAX http Request

Ví dụ: khởi tạo XMLHttpRequest

var doituong;

if(window.XMLHttpRequest)

{// vớii IE7, Firefox, chrome,

doituong= new XMLHttpRequest();

} else

{// với IE5, IE6 doituong= new ActiveXObjext (“Microsoft.XMLHTTP”); }

2 AJAX Create Object, AJAX http Request

Ajax http Request được sử dụng khi cần giao tiếp với một máy chủ Với hai lệnh chính: open và send.

Open(get hoặc post, đường dẫn, true hoặc false)

Send(string), string luôn sử dụng kiểu post

Điểm khác nhau cơ bản giữa GET và POST là GET đơn giản và nhanh hơn POST, tuy nhiên trong một vài trường hợp chúng ta phải sử dụng POST như:

+ Cập nhật thông tin lên máy chủ

+ Gửi lên máy chủ một dữ liệu dung lượng lớn

Một đặc điểm của POST là mạnh mẽ và an toàn hơn so với GET

2 AJAX Create Object, AJAX http Request

Ví dụ: httpRequest

Yêu cầu POST

doituong.open(“POST””,demo_post.asp”,true); doituong.send();

Yêu cầu GET

doituong.open(“GET”,”demo_get.asp”,true);

doituong.send();

3.The XMLhttpRequest Object, AJAX readyState

Trước đây, khi muốn lấy hoặc gửi thông tin liên quan đến máy chủ, ta phải đợi máy chủ hồi đáp, sau đó một trang mới được tạo

Ứng dụng chạy chậm và thiếu thân thiện với người dùng

Với AJAX, JavaScript có thể giao tiếp trực tiếp với máy chủ

thông qua XMLHttpRequest, có thể tạo yêu cầu hoặc phản hồi máy chủ

Người dùng không phải quan tâm đến các mã kịch bản ngầm, yêu cầu ngầm gửi dữ liệu đến máy chủ nữa

Thuộc tính

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 ủ ả ề

o n mã sau đây đ nh ngh a m t hàm r ng và đ t thu c

- ây là nh ng giá tr h p l cho thu c tính readyState: Đ ữ ị ợ ệ ộ

3.The XMLhttpRequest Object, AJAX readyState

Chúng ta s thêm m t l nh If vào hàm onreadystatechange đ ẽ ộ ệ ể

document.myForm.time.value=xmlHttp.responseText;

3.The XMLhttpRequest Object, AJAX readyState

4 Bảo mật trong AJAX

1 Tăng khả năng bị tấn công

Trong khi ứng dụng web truyền thống được chứa toàn bộ trên máy chủ thì ứng dụng AJAX được mở rộng ra cả hai phía máy khách và máy chủ Việc này đòi hỏi phải bổ sung một mối quan hệ tin cậy giữa máy chủ

và máy khách Và mối quan hệ này có thể bị khai thác bởi kẻ tấn công.

2 Phơi bày thông tin

JavaScript trong AJAX nhận yêu cầu người dùng và thực hiện chức năng gọi đến máy chủ dưới dạng dữ liệu văn bản Ví dụ:

Trả về thông tin của sản phẩm có ID= 20

Cập nhật mail của người dùng trong cơ sở dữ liệu

Những thông tin này được gửi đi dưới dạng cleartext, và hoàn toàn có thể

bị khai thác bởi kẻ tấn công Từ những thông tin này, kẻ tấn công có thể biết được tên hàm, tên biến, các thông số của hàm…

3 Từ chối yêu cầu và lỗi Cross-Site Scripting (XSS)

V i AJAX, XSS có th t o nên các yêu c u nguy hi m đ i v i ớ ể ạ ầ ể ố ớ

ng ườ i dùng mà không c n t i l i trang Web Nh ng Script ầ ả ạ ữ

đ c h i có th bí m t đ c n i dung c a trang Web mà ng ộ ạ ể ậ ọ ộ ủ ườ i dùng đang xem S d ng AJAX, m t t n công XSS có th g i ử ụ ộ ấ ể ử nhi u yêu c u cho nh ng trang đ c bi t bên c nh nh ng ề ầ ữ ặ ệ ạ ữ

trang mà ng ườ i dùng đang xem.

4 Cho phép truy cập đến tài nguyên của bên thứ ba

Vì mục đích bảo mật, ứng dụng AJAX chỉ có thể kết nối ngược lại với

website kết nối đến nó Do đó để cho phép AJAX kết nối đến website thứ

ba, một dịch vụ cầu nối AJAX được thiết lập Kẻ tấn công có thể lợi dụng cầu nối này truy cập vào tài nguyên của bên thứ ba thông qua cầu nối

AJAX và đánh cắp dữ liệu

4 Bảo mật trong AJAX

5 Ví dụ

Thank you!