Thông tin tài liệu
Xây dựng một ứng dụng Ajax cơ bản AJAX (Asynchronous JavaScript and XML) - là một kỹ thuật môt tả cách JavaScript có thể nhận dữ liệu từ server bằng cách xử dụng đối tượng XML HTTP Request và sau đó chèn dữ liệu nầy vào website dùng DOM. Những tiến trình nầy được thực hiện đồng thời - tức là chỉ thay đổi thông tin cần được thay đổi mà không cần phải load lại toàn bộ trang. Để hiểu cách hoạt động của AJAX, chúng ta sẻ tạo một ứng dụng đơn giản bằng AJAX. Đầu tiên, chúng ta tạo một form HTML có 2 text fields: username và time. Ô username sẻ do người dùng điền vào và ô time sẻ được tự động điền bởi AJAX. File HTML sẻ có tên là "testAjax.htm" như sau (chú ý là trong đoạn code sau đây không hề có nút submit!): <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Nguyên tắc cơ bản của AJAX là đối tượng XMLHttpRequest. Các trình duyệt khác nhau sẻ có các phương thức tạo đối tượng XMLHttpRequest khác nhau. Internet Explorer sử dụng ActiveXObject, trong khi các trình duyệt khác sử dụng một đối tượng JavaScript xây dựng sẵn có tên XMLHttpRequest. Để tạo đối tượng nầy mà vẫn sử dụng được cho nhiều trình duyệt khác nhauchúng ta cần sử dụng "try và catch" (hoặc có thể dùng if - else). Bây giờ hãy cập nhật lại file "testAjax.htm" với đoạn JavaScript dùng tạo ra đối tượng XMLHttpRequest: <html> <body> <script type="text/javascript"> 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; } } } } </script> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Giải thích đoạn code trên 1 chút: đầu tiên chúng ta tạo một biến xmlHttp để giữ đối tượng XMLHttpRequest. Sau đó tạo đối tượng nầy: XMLHttp=new XMLHttpRequest(). dĩ nhiên là dành cho e Firefox, Opera, và Safari. Nếu fail thì sẻ xử lý dòng nầy: xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") dành cho Internet Explorer 6.0+, nếu sai thì xử lý dòng nầy: xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") dành cho Internet Explorer 5.5+ Nếu nằm ngoài 3 trường hợp trên sẻ xuất ra thông báo trình duyệt không hỗ trợ AJAX. Tiếp theo chúng ta tìm hiểu cách đối tượng XMLHttpRequest giao tiếp với server. Đối tượng XMLHttpRequest có 3 thuộc tính quan trọng: Thuộc tính onreadystatechange Sau khi gửi request lên server, chúng ta cần có một function làm nhiệm vụ nhận dữ liệu trả về từ server. Thuộc tính onreadystatechange có chức năng xử lý response từ server. Code sau định nghĩa một function (rỗng) và set thuộc tính onreadystatechange tại cùng thời điểm: xmlHttp.onreadystatechange=function() { // code xử lí } Thuộc tính readyState Thuộc tính readyState lưu giữ trạng thái của response từ server. Mỗi lần readyState thay đổi thì function onreadystatechange sẻ được thực thi. Các giá trị của thuộc tính readyState: Giá trịMô tả 0 Request chưa khởi tạo 1 Request đã được set up 2 Request đã được gửi 3 Request đang xử lý 4 Request đã hoàn tất Chúng ta sẻ thêm một đoạn lệnh If vào bên trong function onreadystatechange để kiểm tra xem resquest đã gửi lên hoàn tất chưa: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Code lấy dữ liệu từ response của server } } Thuộc tính responseText Dữ liệu trả về từ server có thể nhận bằng thuộc tính responseText. Đoạn code sau sẻ set giá trị cho ô "time" thông qua thuộc tính responseText: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } Tiếp theo chúng ta sẻ tìm hiểu cách lấy dữ liệu từ server! Để gửi request lên server, chúng ta dùng 2 phương thức open() và send(). Phương thức open() có 3 đối số. Đối số đầu tiên định nghĩa phương thức sử dụng để gửi request (GET hoặc POST). Đối số thứ hai chỉ ra địa chỉ URL của script xử lý phía server. Đối số cuối cùng chỉ ra request cần được xử lý đồng bộ (asynchronously). Phương thức send() gửi request tới server. Nếu trang HTML và trang ASP (dĩ nhiên là bạn có thể dùng ngôn ngữ khác ngoài ASP như JSP hay PHP…) nằm cùng thư mục thì đoạn code sẻ là: xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); Bây giờ chúng ta sẻ quy định thời điểm mà AJAX sẻ được thực thi. Cách thông thường nhất là dùng phương thức onkeyup, bằng cách nầy khi người dùng gõ gì đó vào ô username thì function AJAX của chúng ta sẻ được thực thi: <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> Bây giờ hãy cập nhật lại file "testAjax.htm" hoàn chỉnh như sau: <html> <body> <script type="text/javascript"> 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; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> Tiếp theo chúng ta sẻ hoàn tất ứng dụng AJAX nầy bằng đoạn code xử lý phía server – file "time.asp". Thuộc tính responseText sẻ lưu giữ dữ liệu trả về từ server. Để đơn giản chúng ta sẻ set time = giờ hiện tại: <% response.expires=-1 response.write(time) %> . Xây dựng một ứng dụng Ajax cơ bản AJAX (Asynchronous JavaScript and XML) - là một kỹ thuật môt tả cách JavaScript có thể nhận dữ liệu từ server bằng cách xử dụng đối tượng XML. phải load lại toàn bộ trang. Để hiểu cách hoạt động của AJAX, chúng ta sẻ tạo một ứng dụng đơn giản bằng AJAX. Đầu tiên, chúng ta tạo một form HTML có 2 text fields: username và time. Ô username. trình duyệt khác sử dụng một đối tượng JavaScript xây dựng sẵn có tên XMLHttpRequest. Để tạo đối tượng nầy mà vẫn sử dụng được cho nhiều trình duyệt khác nhauchúng ta cần sử dụng "try và
Ngày đăng: 13/08/2014, 11:20
Xem thêm: Xây dựng một ứng dụng Ajax cơ bản AJAX pdf, Xây dựng một ứng dụng Ajax cơ bản AJAX pdf
