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:...
Nội dung trích xuất từ tài liệu:
Xây dựng một ứng dụng Ajax cơ bản AJAX 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!): Name: Time: 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: 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; } } } } Name: Time: 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 XMLHttpRe quest 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 q ua 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: Name: Time: Bây giờ hãy cập nhật lại file testAjax.htm hoàn chỉnh như 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) { 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); } Name: Time: 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: ...