Thông tin tài liệu
Lập trình và Thiết kế Web 1 © 2007 Khoa Công nghệ thông tin Khoa CNTT – ĐH.KHTN AJAX Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN AJAX Asynchronous JavaScript And Xml AJAX Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Ví dụ Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Trang web Submit Server Reload New page Không dùng ajax Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Dùng ajax Trang web Server Update javascript Response Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN function onClick()// Ajax function { var xmlHttp; xmlHttp.open("GET",“serverURL“,true); xmlHttp.send(null); xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { //xử lí dữ liệu response; } } } Khỏi tạo đối tượng xmlHttp …… echo (“noidung”); Client Server Code? Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN State Description 0 Request chưa được khởi tạo 1 Request đã được thiết lập 2 Request đã được gửi 3 Request đang được xử lí 4 Request được xử lí xong Các trạng thái của thuộc tính readyState xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { //Xử lí dữ liệu nhận được } } Code? Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Dữ liệu Server trả về sẽ được xử lý để hiện thị tại đây Ví dụ testAjax.htm <html> <body> <script src="selectcustomer.js"></script> <form> Select a Customer: <select name="customers“ onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South </option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <p> <div id="txtHint"><b>Customer info will be listed here.</b></div> </p> </body> </html> Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN AJAX – Browser Support <script type="text/javascript"> xmlHttp=GetXmlHttpObject(); function GetXmlHttpObject(){ var objXMLHttp=null if (window.XMLHttpRequest){ objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject){ objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp } </script> Trình duyệt Firefox/Netscape… Trình duyệt IE Khởi tạo XMLHttp [...].. .Lập trình và Thiết kế Web 1 – AJAX AJAX – Đối tượng XMLHttpRequest xmlHttp.onreadystatechange=stateChanged; Thiết lập hàm xử lý dữ liệu trả về từ Server function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } Dữ liệu trả về từ Server © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kế Web 1 – AJAX... AJAX – Gửi Request lên Server function showCustomer(str){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){ alert ("Browser does not support HTTP Request"); return; } xmlHttp.onreadystatechange=stateChanged; var url=“getcustomer.php“; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.open("GET",url,true); xmlHttp.send(null); Gửi request lên server } © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kế. .. Thiết kế Web 1 – AJAX AJAX - The Server-Side ASP Script Getcustomer.php . Xml AJAX Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Ví dụ Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Trang. Lập trình và Thiết kế Web 1 © 2007 Khoa Công nghệ thông tin Khoa CNTT – ĐH. KHTN AJAX Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN AJAX Asynchronous JavaScript And Xml AJAX Lập. ĐHKHTN Trang web Submit Server Reload New page Không dùng ajax Lập trình và Thiết kế Web 1 – AJAX © 2007 Khoa CNTT - ĐHKHTN Dùng ajax Trang web Server Update javascript Response Lập trình và Thiết kế Web
Ngày đăng: 24/07/2014, 15:21
Xem thêm: Lập trình và Thiết kế Web 1AJAXKhoa CNTT – ĐH.KHTN© 2007 Khoa Công nghệ thông ppt
