1. Trang chủ
  2. » Cao đẳng - Đại học

Tài Liệu Hướng Dẫn AJAX

30 69 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 30
Dung lượng 506,61 KB

Nội dung

• • • • • • AJAX viết tắt Asynchronous JavaScript And XML AJAX kiểu lập trình trở nên phổ biến vào năm 2005 (với Google Suggest) AJAX khơng phải ngơn ngữ lập trình mà cách thức sử dụng chuẩn có Với AJAX bạn tạo ứng dụng web tốt, nhanh thân thiện với người dùng AJAX dựa yêu cầu JavaScript HTML Bắt đầu học AJAX! www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Giới thiệu AJAX AJAX viết tắt Asynchronous JavaScript And XML Những yêu cầu kiến thức tối thiểu Trước tiếp tục, bạn nên có kiến thức về: • • HTML, XHTML JavaScript AJAX = Asynchronous JavaScript and XML AJAX không ngơn ngữ lập trình mới, kỹ thuật để tạo ứng dụng web tốt, nhanh giao tiếp thân thiện Với AJAX, JavaScript, bạn giao tiếp trực tiếp với máy chủ cách sử dụng đối tượng JavaScript XMLHttpRequest Với đối tượng này, JavaScript trao đổi liệu với máy chủ web mà không cần nạp lại trang AJAX sử dụng kỹ thuật chuyển liệu bất đối xứng (asynchronous) trình duyệt máy chủ web, cho phép trang web yêu cầu thông tin từ máy chủ thay trang Cơng nghệ AJAX làm cho ứng dụng Internet trở nên nhỏ, nhanh thân thiện với người dùng AJAX cơng nghệ phía trình duyệt, độc lập với phần mềm máy chủ web AJAX dựa chuẩn web AJAX dựa chuẩn web sau đây: • • • • JavaScript XML HTML CSS Các chuẩn web sử dụng AJAX định nghĩa tốt, tất trình duyệt phổ biến hỗ trợ Các ứng dụng AJAX độc lập với trình duyệt www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt AJAX làm cho ứng dụng Internet tốt Những ứng dụng web có nhiều lợi ích ứng dụng máy để bàn; chúng đến với số lượng lớn người dùng Việc cài đặt, hỗ trợ phát triển chúng dễ dàng Tuy nhiên, ứng dụng Internet lúc phong phú thân thiện với người dùng ứng dụng truyền thống chạy máy để bàn Với AJAX, ứng dụng web phong phú thân thiện với người dùng Ngay bạn bắt đầu sử dụng AJAX Khơng có để học AJAX dựa chuẩn có Những chuẩn nhà phát triển sử dụng nhiều năm qua www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Những yêu cầu HTTP (HTTP Requests) AJAX sử dụng yêu cầu HTTP Trong viết mã truyền thống, bạn muốn lấy thông tin từ sở liệu, lấy tập tin máy chủ, gởi thông tin người dùng đến máy chủ, bạn phải tạo biểu mẫu HTML GET POST liệu đến máy chủ Người dùng phải nhắp chuột vào nút "Submit" để gởi/nhận thông tin, chờ máy chủ hồi đáp, sau trang nạp với kết thu Vì máy chủ trả trang người dùng đồng ý gởi liệu nhập, ứng dụng web truyền thống chạy cách chậm chạp trở nên thiếu thân thiện với người dùng Với AJAX, JavaScript bạn giao tiếp trực tiếp với máy chủ, thông qua đối tượng JavaScript XMLHttpRequest Với yêu cầu HTTP, trang web tạo yêu cầu nhận phản hồi từ máy chủ web mà không cần nạp lại trang Người dùng giữ nguyên trang cũ, họ không bận tâm đến mã kịch ngầm yêu cầu trang hay ngầm gởi liệu đến máy chủ Đối tượng XMLHttpRequest Bằng cách sử dụng đối tượng XMLHttpRequest, nhà phát triển web cập nhật trang với liệu từ máy chủ sau trang nạp AJAX Google làm cho trở nên phổ biến vào năm 2005 (với Google Suggest) Google Suggest sử dụng đối tượng XMLHttpRequest để tạo giao diện linh hoạt: Khi bạn bắt đầu gõ chữ hộp tìm kiếm Google, JavaScript gởi chữ đến máy chủ máy chủ trả danh sách gợi ý Đối tượng XMLHttpRequest hỗ trợ Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, Netscape www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Một ví dụ AJAX Ứng dụng AJAX bạn Để hiểu AJAX làm việc nào, tạo ứng dụng AJAX nhỏ Trước tiên, tạo biểu mẫu HTML chuẩn với hai trường văn bản: username time Trường username điền người dùng trường time điền cách sử dụng AJAX Tập tin HTML đặt tên "testAjax.htm", (chú ý biểu mẫu HTML bên khơng có nút gởi liệu!): Name: Time: Những phần giải thích trọng tâm AJAX www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Việc hỗ trợ trình duyệt AJAX AJAX - Hỗ trợ trình duyệt Trọng tâm AJAX đối tượng XMLHttpRequest Những trình duyệt khác sử dụng cách thức khác để tạo đối tượng XMLHttpRequest Internet Explorer sử dụng ActiveXObject, trình duyệt khác sử dụng đối tượng JavaScript dựng sẵn gọi XMLHttpRequest Để tạo đối tượng để thích ứng với trình duyệt khác nhau, sử dụng lệnh "try catch" Bạn tìm hiểu thêm lệnh try catch tài liệu JavaScript Hãy cập nhật tập tin "testAjax.htm" bạn với JavaScript để tạo đối tượng XMLHttpRequest: function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt } } } } Name: Time: Giải thích ví dụ: Trước tiên tạo biến xmlHttp để giữ đối tượng XMLHttpRequest Sau thử tạo đối tượng với XMLHttp = new XMLHttpRequest() Đây cho Firefox, Opera, Safari browsers Nếu bị lỗi, thử xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") dành cho Internet Explorer 6.0+, bị lỗi Thử tiếp xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") dành cho Internet Explorer 5.5+ Nếu ba cách không làm việc, nghĩa người dùng có trình duyệt q cũ, họ nhận thơng báo việc trình duyệt họ không hỗ trợ AJAX Chú ý: Đoạn mã tương thích trình duyệt dài phức tạp Tuy nhiên, đoạn mã bạn sử dụng cần tạo đối tượng XMLHttpRequest, bạn cần chép dán vào nơi bạn cần Đoạn mã tương thích với tất trình duyệt phổ biến Internet Explorer, Opera, Firefox, Safari Phần cho bạn thấy cách sử dụng đối tượng the XMLHttpRequest để giao tiếp với máy chủ www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt AJAX - Đối tượng XMLHttpRequest AJAX - Tìm hiểu thêm đối tượng XMLHttpRequest Trước gởi liệu đến máy chủ, phải hiểu rõ ba thuộc tính quan trọng đối tượng XMLHttpRequest Thuộc tính onreadystatechange Sau yêu cầu gởi đến máy chủ, cần hàm để tiếp nhận liệu máy chủ trả Thuộc tính onreadystatechange lưu giữ hàm này, hàm xử lý liệu trả từ máy chủ Đoạn mã sau định nghĩa hàm rỗng đặt thuộc tính onreadystatechange lúc: xmlHttp.onreadystatechange = function() { // Chúng ta viết vài dòng mã } Thuộc tính readyState Thuộc tính readyState lưu giữ trạng thái phản hồi máy chủ Mỗi lần readyState thay đổi, hàm onreadystatechange thi hành Đây giá trị hợp lệ cho thuộc tính readyState: Trạng thái Mơ tả u cầu khơng khởi động Yêu cầu cài đặt Yêu cầu gởi Yêu cầu xử lý Yêu cầu hoàn tất Chúng ta thêm lệnh If vào hàm onreadystatechange để kiểm tra phản hồi hoàn tất hay chưa (có nghĩa nhận liệu chúng ta): xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { // Lấy liệu từ phản hồi máy chủ www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt } } Thuộc tính responseText Dữ liệu gởi trả từ máy chủ tiếp nhận với thuộc tính responseText Trong đoạn mã, đặt giá trị trường văn "time" với responseText: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } Phần trình bày cách yêu cầu máy chủ vài liệu! www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt AJAX - Yêu cầu máy chủ AJAX - Gởi yêu cầu đến máy chủ Để gởi ngầm yêu cầu đến máy chủ, sử dụng phương thức open() send() Phương thức open() nhận ba tham số Tham số định nghĩa cách thức sử dụng gởi yêu cầu (GET POST) Tham số thứ hai đường dẫn tập tin mã kịch phía máy chủ Tham số thứ ba yêu cầu có thực bất đối xứng hay không Phương thức send() gởi ngầm yêu cầu đến máy chủ Nếu giả sử tập tin HTML ASP thư mục, đoạn mã sau: xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); Bây phải định hàm AJAX thi hành Chúng ta để hàm chạy "bên hình" người dùng gõ vài chữ trường văn username: Name: Time: Giờ tập tin cập nhật sẵn sàng cho AJAX "testAjax.htm" sau: function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Mã nguồn AJAX Suggest Mã nguồn ví dụ AJAX Suggest Mã nguồn theo ví dụ AJAX trang trước Bạn chép dán nó, tự thử Trang HTML AJAX Đây trang HTML Nó chứa biểu mẫu HTML đơn giản liên kết đến JavaScript First Name:

Suggestions:

Mã JavaScript liệt kê bên Mã AJAX JavaScript Đây mã JavaScript, lưu trữ tập tin "clienthint.js": var xmlHttp function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Your browser does not support AJAX!"); return; } www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt var url = "gethint.asp"; url = url + "?q=" + str; url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Trang máy chủ AJAX - ASP PHP Khơng có nhiều máy chủ AJAX Những trang AJAX lưu trữ máy chủ Internet Trang máy chủ gọi JavaScript ví dụ từ chương trước tập tin ASP đơn giản gọi "gethint.asp" Dưới liệt kê hai ví dụ mã trang phía máy chủ, viết ASP viết PHP www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Ví dụ ASP AJAX Đoạn mã trang "gethint.asp" viết VBScript cho Internet Information Server (IIS) Nó kiểm tra mảng tên trả tên tương ứng đến máy khách: Ví dụ PHP AJAX Đoạn mã sau viết PHP Chú ý: Để chạy tồn ví dụ PHP, nhớ đổi giá trị biến đường dẫn "clienthint.js" từ "gethint.asp" thành "gethint.php" Ví dụ PHP www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt AJAX Database Example AJAX sử dụng cho giao tiếp với sở liệu Ví dụ Cơ sở liệu AJAX Database Trong ví dụ AJAX bên minh họa cách trang web lấy thơng tin từ sở liệu công nghệ AJAX Chọn tên hộp bên Alfreds Futterkiste Select a Customer: Customer info will be listed here Giải thích ví dụ AJAX Ví dụ chứa biểu mẫu HTML đơn giản liên kết đến JavaScript: Select a Customer: Alfreds Futterkiste North/South Wolski Zajazd

Customer info will be listed here.

Như bạn thấy biểu mẫu HTML đơn giản với hộp danh sách xổ xuống gọi "customers" Đoạn bên biểu mẫu chứa vùng gọi "txtHint" Vùng dùng làm nơi chứa thông tin nhận từ máy chủ web www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Khi người dùng chọn liệu, hàm "showCustomer()" thi hành Việc thi hành hàm bẫy kiện "onchange" Nói cách khác: Mỗi người dùng thay đổi giá trị hộp xổ xuống, hàm showCustomer gọi Mã JavaScript liệt kê bên Mã JavaScript AJAX Đây mã JavaScript chứa tập tin "selectcustomer.js": var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url = "getcustomer.asp"; url = url+ "?q=" + str; url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTML = xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Trang máy chủ AJAX Trang máy chủ gọi JavaScript, tập tin ASP đơn giản gọi "getcustomer.asp" Trang viết VBScript cho Internet Information Server (IIS) Nó viết dễ dàng PHP, vài ngôn ngữ khác Mã chạy SQL đến sở liệu trả kết bảng biểu HTML: www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Ví dụ AJAX XML AJAX dùng để giao tiếp với tập tin XML Ví dụ AJAX XML Trong ví dụ AJAX bên minh họa cách trang web lấy thơng tin từ tập tin XML công nghệ AJAX Chọn CD hộp bên Dolly Parton Select a CD: CD info will be listed here Giải thích ví dụ Ví dụ chứa biểu mẫu HTML đơn giản liên kết đến JavaScript: Select a CD: Bob Dylan Bonnie Tyler Dolly Parton

CD info will be listed here.

Bạn thấy biểu mẫu HTML đơn giản hộp xổ xuống gọi "cds" Đoạn văn bên biểu mẫu chứa vùng gọi "txtHint" Vùng dùng lưu trữ thông tin tiếp nhận từ máy chủ Khi người dùng chọn liệu, hàm "showCD" thi hành Việc thi hành hàm bẫy kiện "onchange" Nói cách khác: Mỗi người dùng thay đổi giá trị hộp xổ xuống, hàm showCD gọi www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Mã JavaScript liệt kê bên Mã JavaScript AJAX Đây mã JavaScript chứa tập tin "selectcd.js": var xmlHttp function showCD(str) { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert ("Your browser does not support AJAX!"); return; } var url = "getcd.asp"; url = url + "?q=" + str; url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTML = xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt } return xmlHttp; } Trang máy chủ AJAX Trang máy chủ gọi JavaScript, tập tin ASP đơn giản gọi "getcd.asp" Trang viết VBScript cho Internet Information Server (IIS) Nó viết dễ dàng PHP, vài ngôn ngữ khác Mã chạy truy vấn đến tập XML trả kết dạng HTML: www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Ví dụ hồi đáp XML AJAX Trong responseText trả phản hồi HTTP chuỗi, responseXML trả phản hồi XML Thuộc tính ResponseXML trả đối tượng tài liệu XML, nhận diện tách cách dùng phương thức thuộc tính cấu trúc W3C DOM Ví dụ hồi đáp AJAX ResponseXML Trong ví dụ AJAX sau minh họa cách trang lấy thơng tin từ sở liệu công nghệ AJAX Những liệu chọn từ cở sở liệu lần chuyển đổi thành tài liệu XML, sau sử dụng DOM để kết xuất giá trị để hiển thị Chọn tên hộp Select a Customer: Giải thích ví dụ AJAX Ví dụ chứa biểu mẫu HTML, phần tử lưu giữ liệu trả về, liên kết đến JavaScript: Select a Customer: Alfreds Futterkiste North/South Wolski Zajazd www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt Ví dụ chứa biểu mẫu HTML hộp xổ xuống gọi "customers" Khi người dùng chọn khách hành hộp xổ xuống, hàm "showCustomer()" thi hành Việc thi hành hàm bẫy kiện "onchange" Nói cách khác: Mỗi người dùng thay đổi giá trị hộp xổ xuống, hàm showCustomer() gọi Mã JavaScript liệt kê bên Mã AJAX JavaScript Đây mã JavaScript lưu trữ tập tin "selectcustomer_xml.js": var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url = "getcustomer_xml.asp"; url = url + "?q=" + str; url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { var xmlDoc = xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML= xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue; document.getElementById("contactname").innerHTML= xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue; document.getElementById("address").innerHTML= xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue; document.getElementById("city").innerHTML= xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue; document.getElementById("country").innerHTML= xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue; } } function GetXmlHttpObject() { www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Các hàm showCustomer() GetXmlHttpObject() giống phần trước Hàm stateChanged() đề cập trước đây, nhiên; lần trả kết tài liệu XML (với responseXML) sử dụng DOM để kết xuất giá trị để hiển thị Trang máy chủ AJAX Trang máy chủ gọi bới JavaScript, tập tin ASP đơn giản gọi "getcustomer_xml.asp" Trang viết VBScript cho Internet Information Server (IIS) Nó viết dễ dàng PHP, vài ngôn ngữ khác Mã chạy truy vấn SQL đến sở liệu trả kết tài liệu XML: Để ý dòng thứ hai mã ASP trên: response.contenttype="text/xml" Thuộc tính ContentType đặt kiểu nội dung HTTP cho đối tượng hồi đáp Giá trị mặc định cho thuộc tính "text/html" Lần muốn kiểu nội dung XML Sau chọn liệu từ sở liệu, xây dựng tài liệu XML với liệu nhận www.w3schools.com CuuDuongThanCong.com Người dịch: Huỳnh Diệp Tân https://fb.com/tailieudientucntt ... https://fb.com/tailieudientucntt AJAX Database Example AJAX sử dụng cho giao tiếp với sở liệu Ví dụ Cơ sở liệu AJAX Database Trong ví dụ AJAX bên minh họa cách trang web lấy thơng tin từ sở liệu công nghệ AJAX Chọn... W3C DOM Ví dụ hồi đáp AJAX ResponseXML Trong ví dụ AJAX sau minh họa cách trang lấy thông tin từ sở liệu công nghệ AJAX Những liệu chọn từ cở sở liệu lần chuyển đổi thành tài liệu XML, sau sử dụng... https://fb.com/tailieudientucntt Ví dụ AJAX XML AJAX dùng để giao tiếp với tập tin XML Ví dụ AJAX XML Trong ví dụ AJAX bên minh họa cách trang web lấy thơng tin từ tập tin XML công nghệ AJAX Chọn CD hộp bên Dolly

Ngày đăng: 27/12/2019, 21:01

w