Tài liệu Thiết kế và lập trình web 1 - AJAX: 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 - ...
13 trang |
Chia sẻ: hunglv | Lượt xem: 1312 | Lượt tải: 0
Bạn đang xem nội dung tài liệu Thiết kế và lập trình web 1 - AJAX, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
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
Select a Customer:
Alfreds Futterkiste
North/South
Wolski Zajazd
Customer info will be listed here.
Lập trình và Thiết kế Web 1 – AJAX
© 2007 Khoa CNTT - ĐHKHTN
AJAX – Browser Support
xmlHttp=GetXmlHttpObject();
function GetXmlHttpObject(){
var objXMLHttp=null
if (window.XMLHttpRequest){
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject){
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
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){
…
}
}
?>
Các file đính kèm theo tài liệu này:
- WebCourse - PHP AJAX.pdf