Trang webSubmit Server Reload New page Không dùng ajax... © 2007 Khoa CNTT - ĐHKHTNDùng ajax Trang web Server Update javascript Response... function onClick// Ajax function{ var xmlHttp;
Trang 1Khoa CNTT – ĐH.KHTN
AJAX
Trang 2© 2007 Khoa CNTT - ĐHKHTN
AJAX
AJAX
Trang 3Ví dụ
Trang 4© 2007 Khoa CNTT - ĐHKHTN
Trang 5Trang web
Submit
Server
Reload
New page
Không dùng ajax
Trang 6© 2007 Khoa CNTT - ĐHKHTN
Dùng ajax
Trang web
Server
Update
javascript
Response
Trang 7function 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”);
Code?
Trang 8© 2007 Khoa CNTT - ĐHKHTN
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?
Trang 9Dữ 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>
Trang 10© 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
Trang 11AJAX – Đối tượng XMLHttpRequest
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
Trang 12© 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
Trang 13AJAX - 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){
… }
}
?>