Lập trình và Thiết kế Web 1AJAXKhoa CNTT – ĐH.KHTN© 2007 Khoa Công nghệ thông ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (795.69 KB, 13 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 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
© 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
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
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){
…
}
}
?>
