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[r]
(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 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 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à là cách 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 sử dụng • Ajax tập hợp nhiều công nghệ với mạnh riêng để tạo thành sức mạnh HIENLTH - FIT of HCMUP (7) AJAX • Là công nghệ web browser Độc lập với web server • Sử dụng JavaScript để gửi và nhận liệu 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 liệu và thao tác XMLHttpRequest cho việc truy cập và nhận liệu JavaScript xem 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 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 Back và Bookmark (Favourites) trình duyệt bị vô hiệu hóa – Buộc phải sử dụng JavaScript → Có 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 user trên UI ràng buộc HTTP request và gởi 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 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ế là việc tương tác user và ứng dụng web – Mỗi bước thực thì user phải chờ – User thấy ứ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 tương tác với máy chủ cách sử dụng đối tượng XMLHttpRequest, nhận kết dạng XML (hoặc text, JSON,…) và phân tích kết mô hình DOM • Tương tác AJAX và giao diện người dùng thực thông qua các mã JavaScript và HTML + CSS HIENLTH - FIT of HCMUP (12) Mô hình Ajax • Mỗi hành động user thường tạo HTTP request là hình thức 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 Khởi tạo đối tượng XMLHttpRequest Gán giá trị cho đối tượng XMLHttpRequest và gửi web server Nhận phản hồi từ web server và xử lý kết nhận 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 – open(“method,”url”): Thiết lập yêu cầu đến server (địa trang cần kết nối đến) – send(): Gửi yêu cầu đến server – abort(): Hủy yêu cầu 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 đối tượng – onreadystatechange: hàm xử lý kiện cho kiện phát sinh có thay đổi trạng thái – responseText: Chuỗi liệu trả – responseXML • Response trả từ server dạng XML – status • Mã trạng thái HTTP từ server (chẳng hạn 200 không có lỗi, 404 cho lỗi Not Found, …) – statusText • Thông điệp mã trạng thái HTTP (chẳng hạn OK hay Not Found, …) HIENLTH - FIT of HCMUP (21) readyState State Description Request chưa khởi tạo Request đã thiết lập Request đã gửi Request xử lí Request xử lí xong xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { //Xử lí liệu nhận } HIENLTH - FIT of HCMUP } (22) XMLHttpRequest–– Gửi yêu cầu đến máy chủ (tt) • Có 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 thuộc tính sau đối tượng XMLHttpRequest – responseText: nội dung (phần thân) thông điệp trả lời – responseXML: chứa XML DOM document thông điệp trả 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 gọi 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 máy chủ • Thuộc tính status: mã trạng thái 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 nhận HIENLTH - FIT of HCMUP (29) VD1: Lấy HIENLTH - FIT of HCMUP (30) VD1: Lấy (tt) HIENLTH - FIT of HCMUP (31) Ví dụ - AJAX Database HIENLTH - FIT of HCMUP (32) Ví dụ - 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ụ - AJAX Database (tt) var obj = new XMLHttpRequest(); function hienthisua(maloai) { obj.onreadystatechange = function(){ if(obj.readyState == && 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ụ - 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 thực HIENLTH - FIT of HCMUP (39) Tài liệu tham khảo • http://www.w3schools.com/ajax • http://api.jquery.com/jquery.ajax • http://labs.jonsuh.com/jquery-ajax-phpjson/ HIENLTH - FIT of HCMUP (40) Q&A HIENLTH - FIT of HCMUP (41) THE END HIENLTH - FIT of HCMUP (42)