Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 12 - ThS. Lương Trần Hy Hiến

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

97
lượt xem 13
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 12 do ThS. Lương Trần Hy Hiến biên soạn sau đây sẽ cung cấp cho các bạn những kiến thức về giới thiệu chung; hoạt động của AJAX; đối tượng của XMLHttp Request; PHP & Jquery Ajax.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 12 - ThS. Lương Trần Hy Hiến

PHP & Ajax GV: Lương Trần Hy Hiến, khoa CNTT, ĐH Sư phạm TpHCM HIENLTH - FIT of HCMUP
Nội dung • Giới thiệu • Hoạt động của AJAX • Đối tượng XMLHttpRequest • PHP & jQuery Ajax • Các ví dụ minh họa HIENLTH - FIT of HCMUP
Ajax – Đặt vấn đề HIENLTH - FIT of HCMUP
Ajax – Đặt vấn đề Server Trang web New Submit page Reload Làm thế nào để thay đổi nội dung mà không phải reload lại toàn trang web? HIENLTH - FIT of HCMUP
Nếu sử dụng Ajax Server javascript Update Response Trang web HIENLTH - FIT of HCMUP
AJAX • AJAX: Asynchronous JavaScript And XML • AJAX không phải là ngôn ngữ mới mà là một cách mới sử dụng các ngôn ngữ đã có. • AJAX giúp ta tạo các trang web nhanh hơn, tiện lợi hơn, thân thiện hơn khi sử dụng. • Ajax tập hợp nhiều công nghệ với thế mạnh riêng để tạo thành một sức mạnh mới. HIENLTH - FIT of HCMUP
AJAX • Là công nghệ của web browser. Độc lập với web server. • Sử dụng JavaScript để gửi và nhận dữ liệu giữa client và server. • AJAX dựa trên các thành phần: – XHTML + CSS cho phần trình bày – DOM cho việc hiển thị động và tương tác – XML + XSLT cho việc chuyển đổi dữ liệu và thao tác – XMLHttpRequest cho việc truy cập và nhận dữ liệu – JavaScript được xem như chất kết dính cho các thành phần trên • AJAX sử dụng XML và HttpRequest HIENLTH - FIT of HCMUP
AJAX – Đặc điểm • Ưu điểm – Cập nhật nội dung không cần nạp lại toàn bộ trang. – Giảm công việc xử lý ở máy chủ. – Dễ học và sử dụng. • Nhược điểm – Các chức năng Back và Bookmark (Favourites) của trình duyệt bị vô hiệu hóa. – Buộc phải sử dụng JavaScript → Có những vấn đề liên quan đến bảo mật. HIENLTH - FIT of HCMUP
Mô hình truyền thống • Mô hình Web truyền thống Browser client User interface làm việc theo cách thức – Hầu hết các hành động của user trên UI sẽ được ràng buộc HTTP request bởi HTTP request và gởi về cho HTML + CSS server – Server thực thi các thao tác: Web Server truy vấn DB, thực thi các xử lý... – Trả kết quả về cho client dạng Datastore, backend processing… HTML + CSS Server-side system HIENLTH - FIT of HCMUP
Mô hình truyền thống • Cách tiếp cận này có nhiều điểm hạn chế nhất là việc tương tác giữa user và ứng dụng web – Mỗi bước thực hiện thì user phải chờ – User thấy được ứng dụng “trip back” server Client User User User activity activity activity Time System processing System processing Server HIENLTH - FIT of HCMUP
AJAX – Mô hình hoạt động • AJAX thực hiện tương tác với máy chủ bằng cách sử dụng đối tượng XMLHttpRequest, nhận kết quả về dưới dạng XML (hoặc text, JSON,…) và phân tích kết quả bằng mô hình DOM. • Tương tác giữa AJAX và giao diện người dùng được thực hiện thông qua các mã JavaScript và HTML + CSS HIENLTH - FIT of HCMUP
Mô hình Ajax • Mỗi hành động của user thường tạo HTTP request là hình thức của lời gọi JavaScript đến Ajax engine Client User activity Browser UI Client -side Ajax processing engine Time System processing System processing System processing Server HIENLTH - FIT of HCMUP
AJAX – So sánh với ứng dụng web truyền thống HIENLTH - FIT of HCMUP Web truyền thống Web sử dụng AJAX
AJAX – Cài đặt và sử dụng 1. Khởi tạo đối tượng XMLHttpRequest 2. Gán giá trị cho đối tượng XMLHttpRequest và gửi về web server 3. Nhận phản hồi từ web server và xử lý kết quả nhận được 4. Viết xử lý ở web server HIENLTH - FIT of HCMUP
Tạo đối tượng XMLHttpRequest • Với IE6: sử dụng Msxml2.XMLHTTP: XMLHttp = new ActiveXObject("Msxml2.XMLHTTP") • Với IE5.6: sử dụng Microsoft.XMLHTTP XMLHttp = new ActiveXObject("Microsoft.XMLHTTP") • Với trình duyệt khác: XMLHttpRequest XMLHttp=new XMLHttpRequest() HIENLTH - FIT of HCMUP
Tạo đối tượng XMLHttpRequest function GetXMLHttpObj(){ var xmlhttp=null try{ xmlhttp=new ActiveXObject("Msxml2.XMLHttp") } catch(e){ try{ xmlhttp=new ActiveXObject("Microsoft.XMLHttp") } catch (e){} } if (xmlhttp==null) xmlhttp=new XMLHttpRequest() return xmlhttp; } HIENLTH - FIT of HCMUP
Đối tượng XMLHttpRequest • Các phương thức cơ bản – open(“method,”url”): Thiết lập yêu cầu đến server (địa chỉ trang cần kết nối đến) – send(): Gửi yêu cầu đến server. – abort(): Hủy yêu cầu hiện tại HIENLTH - FIT of HCMUP
Phương thức open • void open( in DOMString method, in DOMString url); • void open( in DOMString method, in DOMString url, in boolean async); • void open( in DOMString method, in DOMString url, in boolean async, in DOMString user); HIENLTH - FIT of HCMUP
Phương thức open (tt) • void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); HIENLTH - FIT of HCMUP
Đối tượng XMLHttpRequest • Các thuộc tính – readyState: Trạng thái hiện tại của đối tượng. – onreadystatechange: hàm xử lý sự kiện cho một sự kiện phát sinh khi có thay đổi trạng thái – responseText: Chuỗi dữ liệu trả về. – responseXML • Response trả về từ server dưới dạng XML. – status • Mã trạng thái HTTP từ server (chẳng hạn 200 nếu không có lỗi, 404 cho lỗi Not Found, …). – statusText • Thông điệp của mã trạng thái HTTP (chẳng hạn OK hay Not Found, …) HIENLTH - FIT of HCMUP