More Related Content
Similar to Web course php ajax
Similar to Web course php ajax (20)
Web course php ajax
- 1. Lập trình và Thiết kế Web 1
© 2007 Khoa Công nghệ thông tin
Khoa CNTT – ĐH.KHTN
AJAX
- 2. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
AJAX
Asynchronous JavaScript And Xml
AJAX
- 3. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
Ví dụ
- 4. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
- 5. 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
- 6. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
Dùng ajax
Trang web
Server
Update
javascript
Response
- 7. 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?
- 8. 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?
- 9. 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>
- 10. 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
- 11. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
AJAX – Đối tượng XMLHttpRequest
xmlHttp.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ừ Server
Dữ liệu trả về từ
Server
- 12. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
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
- 13. Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
AJAX - The Server-Side ASP Script
Getcustomer.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 table
while ($row = mysql_fetch_array($result, MYSQL_NUM){
…
}
}
?>
