Tìm hiểu về kỹ thuật AJAX Xây dựng ứng dụng minh họa bằng PHP 1/19/2010 Cao Đẳng Kĩ Thuật Cao Thắng Dương Vì Phát Dương Vì Phát Trang 1 Tìm hiểu về AJAX Chương 1: Giới thiệu về AJAX 1.1 AJAX = Asynchronous JavaScript and XML AJAX không phải là một công nghệ mới hay một ngôn ngữ lập trình mới, đó là một kỹ thuật cho phép tạo các ứng dụng website tốt hơn, nhanh hơn và có tính tương tác hơn. Với AJAX, JavaScript có thể giao tiếp trực tiếp với Server, bằng cách sử dụng đối tượng XMLHttpRequest. Với Object này, JavaScript có thể trao đổi dữ liệu với Web Server, mà không phải reload lại trang web. AJAX sử dụng kiểu truyền dữ liệu bất đồng bộ (HTTP requests) giữa trình duyệt web và web server, cho phép trang web có thể request một phần thông tin từ Server thay vì cả trang web. Kỹ thuật AJAX làm cho các ứng dụng Internet nhỏ hơn, nhanh hơn và thân thiện hơn với người dùng cuối. 1.2 AJAX is Based on Web Standards AJAX là kỹ thuật dựa trên các nền tảng Web:  JavaScript  XML  CSS  HTML Các nền tảng trên đều được hỗ trợ tốt trên nhiều trình duyệt Web khác nhau, nhiều hệ thống khác nhau do đó AJAX cũng không lệ thuộc vào trình duyệt web hay hệ thống nào. (The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.) 1.3 AJAX is About Better Internet Applications Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. (Ứng dụng Web có nhiều ưu điểm so với ứng dụng Desktop, nó có thể vươn đến lượng người sử dụng rất lớn, dễ dàng cài đặt và hỗ trợ, dễ dàng phát triển hơn). Dương Vì Phát Trang 2 However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications. (Tuy nhiên, ứng dụng Web lại không nhiều chức năng và không thân thiện với người dùng như các ứng dụng Desktop truyền thống). With AJAX, Internet applications can be made richer and more user-friendly. (Với AJAX, ứng dụng web có thể phong phú hơn và thân thiện hơn) Chương 2: AJAX Http Requests 2.1 AJAX Uses HTTP Requests Với cách code JavaScript truyền thống, nếu bạn muốn lấy bất kì thông tin nào từ database hoặc từ một file trên server, hoặc muốn gửi thông tin người dùng đến Server, bạn sẽ phải tạo một form HTML và gửi dữ liệu đến Server bằng phương thức GET hoặc POST. Người dùng sẽ phải nhấp chuột vào nút submit để gửi/nhận thông tin, đợi phản hồi của server và sau đó đợi trang web load lại với các kết quả được trả về. Bởi vì server sẽ trả về một trang web mới mỗi khi người dùng submit input nên ứng dụng web truyền thống có thể chạy rất chậm và có xu hướng kém thân thiện với người dùng. Với AJAX, JavaScript giao tiếp trực tiếp với server, thông qua đối tượng JavaScript XMLHttpRequest. Với HTTP Request, một trang web có thể gửi request và nhận response từ web server mà không phải reloading lại trang. Người dùng vẫn ở tại trang hiện tại, và họ sẽ không nhận thấy mọi việc đang diễn ra phía sau đó. (Request hoặc send data đến server đều diễn ra trong background) 2.2 The XMLHttpRequest Object Bằng cách sử dụng đối tượng XMLHttpRequest, web developer có thể cập nhật lại trang web với dữ liệu từ server sau khi trang web đã được load! AJAX bắt đầu được phổ biến trong năm 2005 mà công đầu thuộc về Google (với Google Suggest) Google Suggest sử dụng đối tượng XMLHttpRequest to create a very dynamic web interface: Khi bạn gõ vào Search box của Google, một đoạn JavaScript sẽ gửi các kí tự mà bạn gõ vào server và server sẽ trả về danh sách các suggestions (các gợi ý về từ khóa tìm kiếm dựa theo những gì bạn đã gõ vào Search box). XMLHttpRequest được hỗ trợ trong Internet Explorer 5.0+, Safari 1.2, Mozilla Firefox 1.0, Opera 8+ và Netscape 7. Dương Vì Phát Trang 3 Chương 3: AJAX Examples 3.1 Your First AJAX Application Để hiểu cách AJAX hoạt động, chúng ta nên bắt đầu với một ứng dụng AJAX nhỏ. Đầu tiên, tạo một form HTML với 2 text field, username và time. Field username sẽ được điền bởi User và field time sẽ được điền bởi AJAX, đặt tên file này là "testAJAX.html" <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html>  Bạn có thể nhận ra rằng đoạn code cho form HTML này không hề có nút Submit  Yếu tố quyết định của AJAX là đối tượng XMLHttpRequest  Các trình duyệt khác nhau sử dụng các phương thức khác nhau để khởi tạo đối tượng XMLHttpRequest: Internet Explorer sử dụng ActiveXObject trong khi các trình duyệt khác sử dụng đối tượng sẵn có của JavaScript gọi là XMLHttpRequest.  Để tạo đối tượng này và có thể chạy trơn tru trên nhiều trình duyệt Web khác nhau, chúng ta sẽ sử dụng kết hợp các lệnh "Try Catch". Tiếp theo, thêm đoạn code JavaScript dưới đây vào file "testAJAX.html": <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try Dương Vì Phát Trang 4 { 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> Cụ thể hơn, với trình duyệt IE5 thì khởi tạo đối tượng XMLHttpRequest bằng cách: var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); IE6: var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); Còn với trình duyệt IE7+, Firefox, Safari, Opera, Chrome… var xmlhttp = new XMLHTTPRequest(); Vậy, với đoạn Try Catch trên thì trước hết sẽ khởi tạo xmlhttp = new XMLHTTPRequest(); Nếu thất bại thì sẽ khởi tạo xmlhttp = new ActiveXObject("Msxml12.XMLHTTP"); Nếu lại thất bại thì sẽ khởi tạo xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); và cuối cùng nếu tất cả các cách trên đều không được thì xuất thông báo "Trình duyệt của bạn không hỗ trợ AJAX". Tuy đoạn code trên hơi dài và phức tạp nhưng bạn có thể sử dụng chúng mỗi khi bạn muốn khởi tạo một instance của đối tượng XMLHttpRequest, chỉ việc copy và paste thôi. Và đoạn code trên có thể tương thích với mọi trình duyệt Web hiện nay. Dương Vì Phát Trang 5 3.2 AJAX - More About the XMLHttpRequest Object Các thuộc tính quan trọng của đối tượng XMLHttpRequest, bạn nên nắm rõ chúng trước khi xây dựng một ứng dụng sử dụng tổ hợp công nghệ AJAX 1. Thuộc tính onreadystatechange: Sau khi gửi request đến Server, chúng ta cần một hàm có thể nhận dữ liệu được gửi về từ Server, thuộc tính onreadystatechange sẽ xác định hàm được gọi lên để xử lý response từ server. Hàm được lưu trong thuộc tính onreadystatechange sẽ tự động được gọi mỗi khi ReadyState bị thay đổi. xmlHttp.onreadystatechange=function() { // We are going to write some code here } 2. Thuộc tính readyState: Thuộc tính này cho biết trạng thái của đối tượng request: a. readyState = 0: request chưa được khởi tạo - The request is not initialized b. readyState = 1: request đã được thiết lập - The request has been set up c. readyState = 2: request đã được gửi - The request has been sent d. readyState = 3: request đang được xử lý - The request is in process e. readyState = 4: request hoàn tất - The request is complete xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server's response // Lấy dữ liệu từ Server khi server hoàn tất việc response - tức là ta đã có thể lấy được dữ liệu cần lấy. } } 3. Thuộc tính responseText: Dữ liệu từ Server gửi về có thể được lấy ra từ thuộc tính responseText. Trở lại với ví dụ "testAJAX.html", chúng ta sử dụng AJAX lấy giá trị từ Server để điền vào field "time", vậy đoạn code cần thiết sẽ là: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } Dương Vì Phát Trang 6 4. Thuộc tính responseXML: Thay vì trả về response của server dưới dạng Text như responseText property, responseXML sẽ trả về một đối tượng dữ liệu XML (XML Document) 3.3 AJAX - Request a Server Để bắt đầu việc gửi một Request đến Server, chúng ta phải sử dụng method open() và send(). Method open() cần 3 đối số, đối số thứ nhất sẽ xác định phương thức được dùng gửi Request (GET hay POST), đối số thứ hai xác định URL của Server-Side Script sẽ xử lý Request này, đối số thứ ba xác định Request có được xử lý bất đồng bộ (asynchronously) hay không? ('true' hoặc 'false'). Ví dụ: xmlHttp.open("GET","time.php",true); Method send(data) sẽ gửi request đến Server, nếu method gửi request là GET thì data = null, ngược lại, nếu method gửi request là POST thì data sẽ được truyền đi. (Phải thiết lập lại Header của trang bằng method setRequestHeader như trong ví dụ sau trước khi cần Request bằng phương thức POST) var url = "get_data.php"; var params = "lorem=ipsum&name=binny"; http.open("POST", url, true); //Send the proper header information along with the request http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.setRequestHeader("Content-length", params.length); http.setRequestHeader("Connection", "close"); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params); Trở lại với ví dụ "testAJAX.html", do form không có một button nào nên chúng ta sẽ tận dụng event onkeyup của field "username", mỗi khi người dùng gõ phím vào field "username" thì AJAX sẽ gửi request về Server và lấy thời gian hiện tại của Server và fill vào field "time": <form name="myForm"> Dương Vì Phát Trang 7 Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> Sửa lại hàm ajaxFunction(): <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); Dương Vì Phát Trang 8 xmlHttp.send(null); } </script> Đoạn code xử lý bên phía Server, file time.php: <?php echo date("h:i:s"); ?> Và… Chạy thử nào! Dương Vì Phát Trang 9 Tạm thời dừng lại ở phần cơ bản này, Mình sẽ cập nhật tiếp, chắc chắn Theo W3Schools Mục lục Chương 1: Giới thiệu về AJAX 1 1.1 AJAX = Asynchronous JavaScript and XML 1 1.2 AJAX is Based on Web Standards 1 1.3 AJAX is About Better Internet Applications 1 Chương 2: AJAX Http Requests 2 2.1 AJAX Uses HTTP Requests 2 2.2 The XMLHttpRequest Object 2 Chương 3: AJAX Examples 3 3.1 Your First AJAX Application 3 3.2 AJAX - More About the XMLHttpRequest Object 5 3.3 AJAX - Request a Server 6 . Tìm hiểu về kỹ thuật AJAX Xây dựng ứng dụng minh họa bằng PHP 1/19/2010 Cao Đẳng Kĩ Thuật Cao Thắng Dương Vì Phát Dương Vì Phát Trang 1 Tìm hiểu về AJAX Chương 1:. 1: Giới thiệu về AJAX 1.1 AJAX = Asynchronous JavaScript and XML AJAX không phải là một công nghệ mới hay một ngôn ngữ lập trình mới, đó là một kỹ thuật cho phép tạo các ứng dụng website tốt. 3.2 AJAX - More About the XMLHttpRequest Object Các thuộc tính quan trọng của đối tượng XMLHttpRequest, bạn nên nắm rõ chúng trước khi xây dựng một ứng dụng sử dụng tổ hợp công nghệ AJAX 1.