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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (7.58 MB, 41 trang )

(1)PHP & Ajax. GV: Lương Trần Hy Hiến, khoa CNTT, ĐH Sư phạm TpHCM. HIENLTH - FIT of HCMUP.

(2) 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.

(3) Ajax – Đặt vấn đề. HIENLTH - FIT of HCMUP.

(4) Ajax – Đặt vấn đề Server. Trang web. New page. Submit 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.

(5) Nếu sử dụng Ajax Server. javascript Update Response. Trang web. HIENLTH - FIT of HCMUP.

(6) 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.

(7) 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.

(8) 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.

(9) Mô hình truyền thống • Mô hình Web truyền thống 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 bởi HTTP request và gởi về cho server – Server thực thi các thao tác: truy vấn DB, thực thi các xử lý... – Trả kết quả về cho client dạng HTML + CSS. Browser client User interface. HTTP request HTML + CSS. Web Server Datastore, backend processing…. Server-side system HIENLTH - FIT of HCMUP.

(10) 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 activity. User activity. User activity. Time. System processing. System processing. Server. HIENLTH - FIT of HCMUP.

(11) 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.

(12) 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 processing. Ajax engine. Time. System processing. System processing. Server HIENLTH - FIT of HCMUP. System processing.

(13) 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.

(14) 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.

(15) 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.

(16) 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 }.

(17) Đố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.

(18) 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.

(19) 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.

(20) Đố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.

(21) readyState State 0 1 2 3 4. Description Request chưa được khởi tạo Request đã được thiết lập Request đã được gửi Request đang được xử lí Request được xử lí xong. xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { //Xử lí dữ liệu nhận được } HIENLTH - FIT of HCMUP }.

(22) XMLHttpRequest–– Gửi yêu cầu đến máy chủ (tt) • Có 2 phương thức để gửi yêu cầu: GET và POST. HIENLTH - FIT of HCMUP.

(23) Gửi yêu cầu đến Web server dùng phương thức GET. HIENLTH - FIT of HCMUP.

(24) Gửi yêu cầu đến Web server dùng phương thức POST. HIENLTH - FIT of HCMUP.

(25) Gửi yêu cầu đến Web server. HIENLTH - FIT of HCMUP.

(26) XMLHttpRequest– Nhận yêu phản hồi từ máy chủ • Để nhận thông điệp trả lời từ server, sử dụng 2 thuộc tính sau của đối tượng XMLHttpRequest – responseText: nội dung (phần thân) của thông điệp trả lời. – responseXML: chứa một XML DOM document nếu thông điệp trả về có kiểu nội dung (content type) là “text/xml” hay “application/xml”. HIENLTH - FIT of HCMUP.

(27) Đối tượng XMLHttpRequest • Thuộc tính onreadystatechange: Lưu giữ hàm sẽ được gọi mỗi khi thuộc tính readyState thay đổi giá trị • Thuộc tính readyState: Lưu giữ trạng thái phản hồi của máy chủ. • Thuộc tính status: mã trạng thái của thông điệp trả lời – 200: “OK” – 404: Page not found. HIENLTH - FIT of HCMUP.

(28) Nhận phản hồi từ web server và xử lý kết quả nhận được. HIENLTH - FIT of HCMUP.

(29) VD1: Lấy giờ. HIENLTH - FIT of HCMUP.

(30) VD1: Lấy giờ (tt). HIENLTH - FIT of HCMUP.

(31) Ví dụ 2 - AJAX Database. HIENLTH - FIT of HCMUP.

(32) Ví dụ 2 - AJAX Database (tt) <html> <head> <script source = “selectMilk.js”></script> </head> <body> Loại sữa: <select name="cboLoaiSua" onchange="hienthisua(this.value)"> <?php include ("DataProvider.php"); $kq = DataProvider::ExecuteQuery("SELECT * FROM loaisua"); while($r = mysqli_fetch_array($kq)) { echo "<option value={$r['MaLoaiSua']}> {$r['TenLoai']} </option>"; } ?> </select> <div id="txtDSSua"></div> HIENLTH - FIT of HCMUP </body> </html>.

(33) Ví dụ 2 - AJAX Database (tt) var obj = new XMLHttpRequest(); function hienthisua(maloai) { obj.onreadystatechange = function(){ if(obj.readyState == 4 && obj.status == 200) { document.getElementById("txtDSSua").innerHTML = obj.responseText; } } obj.open("GET", "LaySua.php?MaLoai=" + maloai, true); obj.send(null); }. HIENLTH - FIT of HCMUP.

(34) Ví dụ 2 - AJAX Database (tt) <?php include("DataProvider.php"); $ma = $_REQUEST['MaLoai']; $kq = DataProvider::ExecuteQuery("SELECT * FROM sua WHERE MaLoaiSua = '{$ma}'"); echo "<table border='1'> <tr> <td>Tên sữa</td><td>Đơn giá</td> </tr>"; while($r = mysqli_fetch_array($kq)) { echo "<tr> <td>{$r['TenSua']}</td><td>{$r['DonGia']}</td> </tr>"; } echo "</table>"; ?> HIENLTH - FIT of HCMUP.

(35) VD3 – jQuery Ajax Nhập tên: <input name="txtSearch" id="txtSearch" type="text" placeholder="Input keyword here..." /> <input name="btnTim" id="btnTim" type="button" value="Search" /> <div id="divKetQua"> </div>. HIENLTH - FIT of HCMUP.

(36) VD3 – jQuery Ajax (tt). HIENLTH - FIT of HCMUP.

(37) VD3 – jQuery Ajax (tt). HIENLTH - FIT of HCMUP.

(38) VD3 – jQuery Ajax (tt) • Kết quả thực hiện. HIENLTH - FIT of HCMUP.

(39) Tài liệu tham khảo • • • HIENLTH - FIT of HCMUP.

(40) Q&A. HIENLTH - FIT of HCMUP.

(41) THE END. HIENLTH - FIT of HCMUP.

(42)

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

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về