1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Lập trình và Thiết kế Web 1AJAXKhoa CNTT – ĐH.KHTN© 2007 Khoa Công nghệ thông ppt

13 304 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 13
Dung lượng 795,69 KB

Nội dung

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

TỪ KHÓA LIÊN QUAN

w