http://www.ithanam.com

Đường dẫn: trang chủ

Lập trình

PHP

Bắt đầu với AJAX và PHP - Ứng dụng đơn giản nhất

Quản trị viên

Nào demo đã nhá: http://www.anhxtanh3087.110mb.com/ajax/1.htm
Bạn thử gõ tên vào ô Name xem!
Điều này làm với javascript thì cũng đơn giản đúng ko?Tuy nhiên chúng ta muốn lấy giờ ở server cơ.Vậy thì có cách nào hay hơn là dùng AJAX.

Ứng dụng đơn giản này gồm 2 file
file 1.htm:

<html>
<body>
<title>Bat dau voi AJAX & PHP - Anhxtanh3087</title>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  //alert("Khoi tao thanh cong doi tuong xmlHttp");
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.time.value=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","1.php",true);
  xmlHttp.send(null);
}
</script>
 
<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
 
</body>
</html>                                                                       

xem source

<html>

<body>

<title>Bat dau voi AJAX & PHP - Anhxtanh3087</title>

function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

//alert("Khoi tao thanh cong doi tuong xmlHttp");

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser does not support AJAX!");

return false;

}

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}

xmlHttp.open("GET","1.php",true);

xmlHttp.send(null);

}

</script>

Name: <input type="text"

onkeyup="ajaxFunction();" name="username" />

Time: <input type="text" name="time" />

</form>

</body>

</html>

và file 1.php:

<?
//bat dau voi AJAX va PHP - Anhxtanh3087
$now = getdate();
$currentTime = $now["hours"] . ":" . $now["minutes"] . ":" . $now["seconds"];
echo $currentTime;
?>

Xem Source

<?

//bat dau voi AJAX va PHP - Anhxtanh3087

$now = getdate();

$currentTime = $now["hours"] . ":" . $now["minutes"] . ":" . $now["seconds"];

echo $currentTime;

?>

Nào!Bây giờ thì chúng ta sẽ cùng mổ xẻ chương trình nhé! Tại sao chạy file .htm mà lại lấy đc thông tin từ server? => đó chính là AJAX đó các bạn thân mến à

try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  //alert("Khoi tao thanh cong doi tuong xmlHttp");
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }

Xem source

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

//alert("Khoi tao thanh cong doi tuong xmlHttp");

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser does not support AJAX!");

return false;

}

đây là đoạn mã khởi tạo 1 đối tượng XMLHttpRequest tên là xmlHttp. Trên FireFox và Opera 8 phương thức khởi tạo làXMLHttpRequest() còn trên IE là ActiveXObject("Msxml2.XMLHTTP") ,IE 6 trở lên là ActiveXObject("Microsoft.XMLHTTP"). OK?

xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.time.value=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","1.php",true);
  xmlHttp.send(null);

Xem source

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}

xmlHttp.open("GET","1.php",true);

xmlHttp.send(null);

onreadystatechange: Bộ xử lý sự kiện cho một sự kiện phát sinh mỗi khi có sự thay đổi trạng thái.
readyState: Trạng thái của request. Có 5 giá trị là
0 = uninitialized,1 = loading, 2 = loaded, 3 = interactive, và 4 = complete.
responseText: trả về từ server dưới dạng string.
Câu lệnh

document.myForm.time.value=xmlHttp.responseText;

Xem source

document.myForm.time.value=xmlHttp.responseText;

ẽ lấy giá trị dưới dạng string trả về từ server và lưu vào biến time (đại loại thế ^^)

void open(string method, string url, boolean asynch, string username, string password)

Xem source

void open(string method, string url, boolean asynch, string username, string password)

Phương thức này thiết lập một phiên gọi tới server. Ý nghĩa của nó này là khởi tạo một request. Nó có hai tham số yêu cầu và ba tham số tùy chọn; ta phải cung cấp đặc tả của phương thức được triệu gọi (GET, POST, hay PUT) và địa chỉ URL của tài nguyên được gọi. Cũng có thể truyền một biến chỉ báo kiểu Boolean, xác định việc truyền là bất đồng bộ - giá trị mặc định là true, nghĩa là các request luôn bất đồng bộ theo mặc định. Nếu truyền một giá trị false, quá trình xử lí sẽ phải đợi cho đến khi có phản hồi từ server. Việc truyền dữ liệu bất đồng bộ là một lợi thế của việc dùng Ajax, vì vậy thiết lập tham số này ở giá trị false đã thay đổi mục đích việc sử dụng XMLHttpRequest. Ta thấy nó rất hữu ích trong một số trường hợp chẳng hạn như chứng thực người dùng (validating user) trong khi trang web của không hề bị thay đổi. Hai tham số cuối tùy chọn, cho phép sử dụng username và password.

void send(content)

Xem source

void send(content)

Phương thức này thực hiện gửi request tới server. Nếu request được khai báo bất đồng bộ, kết quả được trả về ngay, còn không nó sẽ đợi cho tới khi nhận được response từ server. Tham số có thể là một thể hiện của một đối tượng DOM, một luồng dữ liệu vào (input stream), hay một kiểu string. Nội dung truyền cho phương thức này được gửi đi như một phần trong request.

Tiếp nha,bây giờ là đến file 1.php
Thôi dễ quá,ko nói nữa nha :30:
file này khi đc gọi sẽ trả về string mang thời gian trên server: