Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web course php ajax

963 views

Published on

  • Be the first to comment

Web course php ajax

  1. 1. Lập trình và Thiết kế Web 1© 2007 Khoa Công nghệ thông tinKhoa CNTT – ĐH.KHTNAJAX
  2. 2. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNAJAXAsynchronous JavaScript And XmlAJAX
  3. 3. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNVí dụ
  4. 4. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTN
  5. 5. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNTrang webSubmitServerReloadNewpageKhông dùng ajax
  6. 6. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNDùng ajaxTrang webServerUpdatejavascriptResponse
  7. 7. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNfunction 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 ServerCode?
  8. 8. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNState Description0 Request chưa được khởi tạo1 Request đã được thiết lập2 Request đã được gửi3 Request đang được xử lí4 Request được xử lí xongCác trạng thái của thuộc tínhreadyStatexmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){//Xử lí dữ liệu nhận được}}Code?
  9. 9. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNDữ liệu Server trả về sẽ được xử lý đểhiện thị tại đâyVí 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>
  10. 10. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNAJAX – Browser Support<script type="text/javascript">xmlHttp=GetXmlHttpObject();function GetXmlHttpObject(){var objXMLHttp=nullif (window.XMLHttpRequest){objXMLHttp=new XMLHttpRequest()}else if (window.ActiveXObject){objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")}return objXMLHttp}</script>Trình duyệtFirefox/Netscape…Trình duyệt IEKhởi tạo XMLHttp
  11. 11. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNAJAX – Đối tượng XMLHttpRequestxmlHttp.onreadystatechange=stateChanged;function stateChanged() {if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}}Thiết lập hàm xử lý dữliệu trả về từ ServerDữ liệu trả về từServer
  12. 12. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNAJAX – Gửi Request lên Serverfunction 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ênserver
  13. 13. Lập trình và Thiết kế Web 1 – AJAX© 2007 Khoa CNTT - ĐHKHTNAJAX - The Server-Side ASP ScriptGetcustomer.php<?php$connection = mysql_connect("localhost","fred","shhh");mysql_select_db("winestore", $connection);if (isset($_GET["q"])){$sql="SELECT * FROM CUSTOMER WHERE CUST_ID=" . $_GET["q"] . "";$result = mysql_query ($sql, $connection);// Show tablewhile ($row = mysql_fetch_array($result, MYSQL_NUM){…}}?>

×