PHP và Ajax cung cấp một nền tảng mạnh cho thiết kế website

PHP và Ajax cung cấp một nền tảng mạnh cho thiết kế website

PHP đã có mặt từ nhiều năm nay. Thường nó được sử dụng như một ngôn ngữ kịch bản lệnh phía máy chủ để phát triển các ứng dụng dựa trên web khá nhanh chóng và đạt được các kết quả tốt. Thực tế một số dự án dựa trên web phổ biến nhất như PHP-Nuke, osCommerce, và Joomla tất cả đều được phát triển bằng PHP và ngày nay tiếp tục lớn mạnh.

Ajax cũng đã có mặt được một thời gian, nhưng mãi gần đây mới có nhiều trang web được phát triển bằng cách sử dụng các thực hành Ajax. Ajax cung cấp công nghệ cho phép một trang web hay ứng dụng dựa trên web giao tiếp với máy chủ mà không cần phải làm mới lại toàn bộ trang. Về cơ bản, các đặc tính không đồng bộ cung cấp phương tiện để trình duyệt của máy khách gửi yêu cầu hoặc gọi các phương thức mà được thực hiện bên phía máy chủ. Kết quả từ máy chủ sau đó có thể được xử lý bên phía khách bằng cách sử dụng mã JavaScript, và bất kỳ kết quả đầu ra nào cũng có thể được trộn vào khung nhìn HTML mặt trước (front-end) hiện tại mà không cần làm mới lại trang. Khi sử dụng Ajax, bạn không thật sự sử dụng một ngôn ngữ lập trình mới. Trên thực tế, tất cả những gì bạn làm là tận dụng các công nghệ hiện có và đưa vào sử dụng chúng tốt hơn.

Khi kết hợp với nhau, PHP và Ajax cung cấp một nền tảng mạnh để tạo ra các trang web hoặc các ứng dụng dựa trên web với các tính năng vững mạnh. Bài này xem xét một số cách sử dụng PHP và Ajax và khảo sát cách bạn có thể tận dụng chúng trong các ứng dụng dựa trên web của bạn như thế nào. Trước khi bạn tiến hành, một sự hiểu biết vững vàng về HTML và mã JavaScript là rất quan trọng. Bạn cũng cần quen biết PHP như là một ngôn ngữ kịch bản lệnh, mặc dù hầu hết ngôn ngữ kịch bản lệnh nào khác cũng có thể thay thế được nó.

Giao tiếp với máy chủ

Chìa khóa cho việc giao tiếp khách/chủ trong Ajax là sử dụng đối tượng XMLHttpRequest của JavaScript. Đối tượng này được hầu hết các trình duyệt hỗ trợ, gồm Windows® Internet Explorer 5.0 và các bản cao hơn, Safari 1.2, Mozilla Firefox, Opera 8 và các bản cao hơn, và Netscape 7. Để hiểu được sự khác nhau giữa các giao tiếp khách/chủ truyền thống và giao tiếp khách/chủ dựa trên Ajax, tôi sẽ sử dụng một ví dụ. Theo truyền thống, để trình duyệt khách gửi nội dung đến máy chủ để xử lý hoặc lưu trữ trong một cơ sở dữ liệu, bạn thường sử dụng một hành động POST để gửi nội dung từ các trường đầu vào thu thập được ở phía khách tới máy chủ. Máy chủ xử lý nội dung này bằng cách sử dụng PHP (hoặc bất kỳ ngôn ngữ kịch bản lệnh nào mà bạn lựa chọn), đọc hoặc lưu dữ liệu bằng cách sử dụng một cơ sở dữ liệu, và trả lại các kết quả được nhúng bên trong mã HTML. Sau đó HTML sẽ được trình duyệt xử lý và một trang mới được biểu hiện ra cho người sử dụng cuối cùng xem. Hình 1 mô tả rõ kịch bản này.

Hình 1. Quy trình truyền thống để đệ trình dữ liệu và nhận kết quả

 PHP và Ajax cung cấp một nền tảng mạnh

Khi sử dụng Ajax, cũng cùng quy trình này nhưng cần ít thời gian hơn ở mặt trước. Ý tưởng là làm cho người sử dụng cảm thấy như là họ không bao giờ phải đợi một trang cập nhật. Thực tế là bằng cách sử dụng Ajax, bạn có thể phát triển toàn bộ ứng dụng web bằng cách sử dụng chỉ một trang HTML đơn lẻ, mặc dù tôi hết sức khuyên bạn đừng làm như vậy. Theo cách truyền thống, nếu bạn muốn gửi một biểu mẫu cho máy chủ, bạn thiết lập một hành động (action) của biểu mẫu đó và chỉ định rõ kiểu hành động là POST. Với Ajax, bạn không thực sự đệ trình một biểu mẫu trực tiếp cho máy chủ. Thay vào đó, bạn gọi một hàm JavaScript, nó kiểm tra lại và thu thập các giá trị từ biểu mẫu của bạn và sau đó gửi dữ liệu đến một hàm ở phía máy chủ bằng cách sử dụng XMLHttpRequest. Kết quả được gửi trả lại tại một điểm cho trình khách, sau đó trình khách xử lý kết quả và cập nhật các phần của trang cần được cập nhật. Trong trường hợp này, trang đó không được làm mới lại toàn bộ. Do đó, cần ít thời gian hơn để xử lý mã HTML. Kết quả là hiệu năng hoạt động tốt hơn. Hình 2 minh hoạ quy trình này hơi khác đi như thế nào khi sử dụng Ajax để tạo ra một cập nhật cho trang web chứ không phải là làm mới toàn bộ trang.

Hình 2. Quy trình Ajax để đệ trình và nhận kết quả

Quy trình Ajax để đệ trình và nhận kết quả

Hãy quan sát các bước cần thiết để thực hiện giao tiếp với máy chủ, một thực tế từ mã JavaScript của bạn. Trước tiên, bạn định nghĩa biểu mẫu sẽ trông như thế nào, như trong Liệt kê 1.

Liệt kê 1. Biểu mẫu HTML

<body>
My First Ajax Page

<form name="myForm">
Press button to view server time: 
  <input type="button" value="Update"
  onClick="ajaxFunction();" />
Server Time Is: <input type="text" name="time" />
</form>

</body>
            

Biểu mẫu này sinh ra kết quả đầu ra như Hình 3.

Hình 3. Đầu ra của biểu mẫu HTML

Đầu ra của biểu mẫu HTML

Biểu mẫu này không làm điều gì thật sự có ích, nhưng hy vọng nó giúp bạn bắt đầu thấy những nơi mà bạn có thể tích hợp Ajax vào mã của mình.

Hãy chú ý rằng sự kiện onClick được xác định trên nút nhấn. Sự kiện này được thiết lập để gọi một hàm JavaScript có tên làajaxFunction. Đây là nơi mọi điều trở nên thú vị trong thế giới Ajax. Trong phạm vi phương thức này, bạn thực hiện một vài bước, chúng được giải thích trong phần này:

  1. Tạo một cá thể của đối tượng XMLHttpRequest cần có.
  2. Mở một kết nối đến dịch vụ phía máy chủ mà bạn muốn gọi.
  3. Báo cho Ajax biết sẽ gọi phương thức nào khi mã phía máy chủ thi hành xong và trả lại kết quả.
  4. Gửi yêu cầu.
  5. Phản hồi không đồng bộ.

Tạo một cá thể

Bạn cần tạo ra hàm ajaxFunction và cung cấp một biến để lưu giữ đối tượng XMLHttpRequest khi nó được tạo ra. Như với bất kỳ phương thức JavaScript nào, bạn định nghĩa phương thức đó như trong Liệt kê 2.

Liệt kê 2. Định nghĩa của ajaxFunction

function ajaxFunction() {

  var xmlHttp = null;
  .
  .
  .
}

Hầu hết các trình duyệt hiện đại vốn đã hỗ trợ đối tượng XMLHttpRequest. Tuy nhiên, các trình duyệt cũ hơn như Internet Explorer 6 đòi hỏi bạn phải tạo ra một đối tượng ActiveX để thực hiện việc gọi không đồng bộ đến máy chủ. Điều này gây ra một vấn đề vì bạn phải xác định mã của bạn đang chạy trong trình duyệt nào và tạo ra đúng đối tượng để làm được việc. Mã JavaScript cung cấp một giải pháp bằng sự hỗ trợ của nó đối với khối chức năng thử/bắt (try/catch). Bạn chỉ cần thử tạo ra các đối tượng theo thứ tự ưu tiên và để khối try/catch xử lý phần còn lại, tương tự như mã đưa ra trong Liệt kê 3.

Liệt kê 3. Tạo đối tượng XMLHttpRequest thích hợp

function ajaxFunction() {

  var xmlHttp=null;
  
  try
  {
    // Firefox, Internet Explorer 7. Opera 8.0+, Safari.
    xmlHttp = new XMLHttpRequest();
  }
  catch (e)
  {
  // Internet Explorer 6.
  try
    {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      return false;
      }
    }
  }
}

Như bạn đã thấy, tất cả các trình duyệt hiện đại được viết để hỗ trợ việc tạo nguyên thủy đối tượng XMLHttpRequest. Có một tranh luận về việc Microsoft® có thật sự hỗ trợ đối tượng XMLHttpRequest nguyên thủy không hay chỉ đơn giản là bao gói một triển khai thực hiện ActiveX bằng cách sử dụng một mặt ngoài.

Mở một kết nối đến máy chủ

Bên trong chính hàm JavaScript ấy, sau khi tạo ra đối tượng XMLHttpRequest, bạn tiếp tục bằng việc mở một kết nối đến kịch bản lệnh phía máy chủ bằng cách sử dụng phương thức open của đối tượng XMLHttpRequest. Phương thức này tiếp nhận hai tham số bắt buộc và ba tham số tùy chọn, như mô tả trong Bảng 1.

TBảng 1. Các tham số của phương thức open 

Tham số Mô tả
method Chỉ rõ phương thức HTTP mà bạn muốn sử dụng. Các giá trị khả dĩ gồm GET, POST, PUT hoặc HEAD.
url Chỉ rõ đường dẫn tuyệt đối hoặc tương đối đến dữ liệu XML hay dịch vụ web XML phía máy chủ mà bạn muốn gọi ra. Để ngăn chặn các tấn công qua kịch bản lệnh xuyên trang (cross-site scripting attacks), các yêu cầu Ajax chỉ được thực hiện cho URL với cùng giao thức, máy chủ, và cổng như trang chứa yêu cầu Ajax. Mặc dù một số trình duyệt có thể cho phép các URL tuỳ ý, bạn không nên dựa vào hỗ trợ này từ tất cả các trình duyệt. Nếu bạn cần giao tiếp xuyên trang (cross-site communication), nó phải được xử lý ở phía máy chủ bằng cách sử dụng cURL hoặc một số phương tiện khác.
async True nếu bạn muốn gửi yêu cầu đến máy chủ theo kiểu không đồng bộ. Cũng cần phải gán tham số này là true nếu bạn đã bật (set) thuộc tính onreadystatechange, điều mà tôi sẽ thảo luận ngay sau đây. Gán trị tham số này là false sẽ ngăn chặn hầu hết các trình duyệt tiếp nhận thêm bất cứ đầu vào nào từ người sử dụng. Nếu ứng dụng của bạn là linh hoạt đủ để tiếp tục nhận dữ liệu đầu vào trong khi hoạt động mặt sau (back-end operation) hoàn tất, tốt nhất là thực hiện hành động của bạn không đồng bộ.
user Chỉ rõ một tên người sử dụng được sử dụng vào mục đích xác thực người sử dụng trước khi thực thi kịch bản lệnh. Việc này chỉ cần thiết khi kịch bản yêu cầu xác thực người sử dụng.
password Chỉ rõ một mật khẩu được sử dụng vào mục đích xác thực người sử dụng trước khi thực thi kịch bản lệnh. Việc này chỉ cần thiết khi kịch bản yêu cầu xác thực người sử dụng.

Đối với ví dụ này, chỉ cần thực hiện một thao tác GET yêu cầu một kịch bản lệnh trên máy chủ trả về ngày giờ (time) hiện tại. Bạn cũng báo cho phương thức open biết rằng bạn muốn thực hiện không đồng bộ thao tác này, như trong Liệt kê 4.

Liệt kê 4. Gọi phương thức open 

function ajaxFunction() {
  
  .
  .
  .
  xmlHttp.open("GET", "time.php", true);

}

Báo cho Ajax biết gọi phương thức nào khi mã phía máy chủ thi hành xong

Khi bạn gọi máy chủ bằng cách sử dụng Ajax, kết quả phản hồi sẽ gọi lại thông qua hàm callback. Bạn có thể tạo ra và đặt tên một hàm hoặc tạo ra một hàm không tên, như tôi đã thực hiện. Trong trường hợp nào thì bạn cũng cần báo cho đối tượngXMLHttpRequest biết hàm callback nào được sử dụng bằng cách thiết đặt thuộc tính onReadyStateChange của nó, như trong Liệt kê 5.

Liệt kê 5. Thiết đặt thuộc tính onReadyStateChange

function ajaxFunction() {
  
  .
  .
  .
  xmlHttp.onreadystatechange=function() {
  	if(xmlHttp.readyState==4)
    {
  		// Get the data from the server's response.
  	  document.myForm.time.value=xmlHttp.responseText;
  	  xmlHttp=null;
    }
  }
}

Như bạn đã thấy, phương thức này kiểm tra readyState sau khi nó được gọi, tìm kiếm một giá trị khả dĩ là 4. Có năm trạng thái khả dĩ, chúng được mô tả trong Bảng 2.

Bảng 2. Các giá trị khả dĩ đối với readyState

Giá trị Mô tả
0 Không được khởi tạo
1 Đang nạp
2 Nạp xong
3 Tương tác
4 Hoàn tất

Mã này về cơ bản nói rằng, “Nếu trạng thái nói rằng thao tác này đã hoàn tất, thì tiếp tục.” Khi trạng thái là đã hoàn tất, bước tiếp theo là cập nhật phần của trang cần phải cập nhật bằng phản hồi từ máy chủ. Điều này được thực hiện bằng cách lấy giá trị đã được gán cho thuộc tính responseText, giá trị này được điền bởi phản hồi từ máy chủ. Cuối cùng, bạn ngừng đối tượngXMLHttpRequest lại bằng cách gán cho nó giá trị null.

Gửi yêu cầu

Chỉ cần một bước nữa mà ajaxFunction phải thực hiện, và đó là gửi yêu cầu cho máy chủ. Điều này được thực hiện với phương thức send của đối tượng XMLHttpRequest. Nếu yêu cầu là không đồng bộ, phương thức trả về ngay lập tức sau khi gửi yêu cầu. Nếu nó là đồng bộ, phương thức này chỉ trả về sau khi nhận được phản hồi, điều đó có nghĩa là chức năng Ajax bị khóa lại đến khi phương thức đó trả về.

Phương thức này có một tham số mà bạn có thể gán giá trị null hoặc một số các giá trị khác. Thí dụ bạn có thể truyền cho nó một đối tượng DOMDocument, một InputStream, hoặc một String. Giá trị được sử dụng như là phần thân của yêu cầu HTTP nếu phương thức yêu cầu là POST. Hàm ajaxFunction hoàn chỉnh sẽ giống như Liệt kê 6.

Liệt kê 6. Hàm ajaxFunction hoàn chỉnh

function ajaxFunction() {
 var xmlHttp=null;
 
 try {
   // Firefox, Internet Explorer 7. Opera 8.0+, Safari
   xmlHttp = new XMLHttpRequest();
 } catch (e) {
   // Internet Explorer 6.
   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.open("GET", "time.php", true);
 xmlHttp.onreadystatechange=function() {
   if(xmlHttp.readyState==4) {
     // Get the data from the server's response.
     document.myForm.time.value=xmlHttp.responseText;
     xmlHttp=null;
   }
 }
 xmlHttp.send("");
}
            

Phản hồi không đồng bộ

Do sự phát triển Ajax có bản chất là không đồng bộ, bạn phải cẩn thận với sự tương tranh và hãy quan tâm đến chuỗi xử lý của bạn. Điều này đặc biệt quan trọng khi bạn thực hiện nhiều lời gọi Ajax và nhận được các phản hồi theo một trình tự không biết trước. Quy tắc ngón tay cái là hãy chờ đợi điều bất ngờ.

Có thể có những lần mà phản hồi từ máy chủ cần quay trở lại máy khách như là một tài liệu XML. Trong những trường hợp như thế, bạn có thể sử dụng thuộc tính responseXML của đối tượng XMLHttpRequest để lấy ra dữ liệu. Liệt kê 7 thể hiện kịch bản lệnh PHP sẽ như thế nào trong trường hợp này.

Liệt kê 7. Mã PHP trả về một tài liệu XML

<?php

$result = getRecordSet($_GET['query'];

echo '<?xml version="1.0" encoding="ISO-8859-1"?>' .
  '<car>';

while($row = mysql_fetch_array($result)) {

  echo "<make>" . $row['make'] . "</make>";
  echo "<model>" . $row['model'] . "</model>";
  echo "<year>" . $row['year'] . "</year>";
  echo "<description>" . $row['description'] . 
	  "</description>";
}
echo '</car>';
?>
    

Như bạn đã biết, mã tạo ra một tài liệu XML, biểu hiện bằng dòng '<?xml version="1.0" encoding="ISO-8859-1"?>'trước khi gửi phần còn lại của phản hồi. Mã phía khách phải được viết sao cho nó trước tiên sẽ rút ra tài liệu XML từ thuộc tínhresponseXML phân tích dữ liệu bằng cách sử dụng DOM (Mô hình Đối tượng Tài liệu), và sau đó hiển thị dữ liệu trên trang bằng cách sửa đổi các trường thích hợp đã có sẵn trên trang đó. Liệt kê 8 thể hiện các thao tác này.

Liệt kê 8. Mã JavaScript xử lý một tài liệu XML

function stateChanged() {

  if(xmlHttp.readyState==4)  {
    xmlDoc = xmlHttp.responseXML;   
    document.getElementById("make").innerHTML = 
      xmlDoc.getElementsByTagName("make")[0].childNodes[0].nodeValue;
    document.getElementById("model").innerHTML = 
      xmlDoc.getElementsByTagName("model")[0].childNodes[0].nodeValue;
    document.getElementById("year").innerHTML =
      xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;
    document.getElementById("description").innerHTML =
      xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue;
  }
} 
     

Mở rộng Ajax bằng các khung công tác JavaScript

Bạn hẳn đã nhận thấy rằng chẳng có gì đặc biệt cần thiết từ mã PHP phía máy chủ để thực hiện các chức năng Ajax ở mặt trước. Trên thực tế, bạn có thể thực sự viết kịch bản lệnh phía máy chủ bằng bất kỳ ngôn ngữ nào mà máy chủ web của bạn có thể gọi thực hiện và trả lại kết quả của nó cho trình khách. Tuy nhiên, có một số sáng kiến mở rộng Ajax để làm các việc khác. Thí dụ, có một số thư viện cung cấp nhiều điều khiển (controls) mặt trước hấp dẫn trực quan hơn nhiều để biến ước mơ của Web 2.0 thành hiện thực. Hầu hết các thư viện này được viết bằng mã JavaScript và cung cấp các đặc tính và API làm giảm bớt số lượng mã JavaScript bạn cần viết ở mặt trước. Cũng phổ biến trong hầu hết các thư viện này là việc sử dụng Ký pháp Đối tượng JavaScript (JavaScript Object Notation - JSON); đó là một định dạng trao đổi dữ liệu gọn nhẹ được sử dụng trên toàn bộ Internet hiện nay. Sau đây là một số thư viện mà bạn có thể thấy bổ ích:

  • Prototype
  • Script.aculo.us
  • Dojo
  • jQuery

Prototype

Prototype cung cấp mã JavaScript dựa theo lớp (class-driven) để phát triển các ứng dụng web động. Ngoài ra, khung công tác Prototype cung cấp một đối tượng Ajax toàn cục, làm cho dễ viết các hàm Ajax của bạn hơn, và thậm chí là dễ xử lý hơn. Sử dụng khung công tác này để phát triển Ajax của bạn còn mang lại lợi ích bổ sung là bạn không còn phải xử lý các vấn đề xuyên nhiều trình duyệt (cross-browser) nữa. Với một lần gọi, bạn có thể cung cấp URL đích, phương thức HTTP (POST hoặc GET), phương thức gọi lại phản hồi (response callback method), và nhiều thứ khác.

Script.aculo.us

Một khung công tác JavaScript phổ biến khác có một số điều khiển (controls) giao diện người sử dụng đẹp mắt là Script.aculo.us. Khung công tác này cung cấp một điều khiển thực hiện các chức năng Ajax cho bạn. Thậm chí có một điều khiển trường văn bản tự động hoàn tất giống như kiểu Google mà bạn có thể sử dụng để lấy văn bản từ người sử dụng của bạn. Các chức năng Ajax cho phép bạn dễ dàng xác định được mục tiêu truy vấn bên phía máy chủ. Phản hồi kết quả được sử dụng để hiển thị một tập hợp các xâu ký tự mà máy chủ trả về cho người sử dụng cuối cùng như là các lựa chọn khả dĩ.

Dojo

Bộ công cụ Dojo là một khung công tác Javascript và Ajax mã nguồn mở, nổi tiếng vì tốc độ của nó và kích thước chỉ 25KB. Trong vũ đài Ajax, Dojo cung cấp các API của chính nó để gửi và nhận các cuộc gọi không đồng bộ đến và từ một máy chủ. Không có gì thay đổi ở phía máy chủ. Mã PHP của bạn tiếp tục phản hồi giống như nó luôn luôn làm đối với bất kỳ lời gọi Ajax nào.

jQuery

jQuery thực hiện một công việc tuyệt vời là đơn giản hoá cơ chế để tìm kiếm các phần tử trong các trang của bạn và bổ sung các chức năng mới, đặc tính mới, và định dạng ngay trong khi đang chạy thi hành (on the fly at runtime). Nó cũng gồm cả một số đặc tính Ajax đặc biệt cho phép bạn cung cấp các tương tác Ajax trên các trang Web của bạn.

Mở rộng PHP để hỗ trợ Ajax

Bây giờ bạn đã hiểu những điều cơ bản, tôi sẽ cho bạn thấy hiện nay PHP đang được mở rộng như thế nào để hỗ trợ Ajax. Từ phối cảnh PHP, việc mở rộng Ajax không chỉ là việc viết lại mã truy cập XMLHttpRequest (XHR). Bây giờ bạn đã hiểu những điều cơ bản, tôi sẽ cho bạn thấy hiện nay PHP đang được mở rộng như thế nào để hỗ trợ Ajax. Từ phối cảnh PHP, việc mở rộng Ajax không chỉ là việc viết lại mã truy cập. Các dịch vụ mặt trước cần được tính đến bao gồm thi hành dịch vụ mặt sau, truy cập một cơ sở dữ liệu, và thực hiện các dịch vụ mạng mặt sau từ mặt trước. Một số khung công tác mà tôi đã thấy trên thị trường cho phép các nhà phát triển viết mã của họ trong ngôn ngữ mặt sau (back-end language), và khung công tác này tạo ra mã JavaScript mặt trước. Về cơ bản, bạn báo cho nó biết các phương thức mặt sau nào phải được gọi, và khung công tác này viết ra cấu trúc ngoài mặt trước (front-end façades) bằng mã JavaScript; mã này có thể cấp phát một đối tượng XHR, gửi yêu cầu, nhận phản hồi, và sau đó chuyển nó tới một hàm tùy theo lựa chọn của bạn hoặc thậm chí gán đầu ra trực tiếp tới một phần tử HTML mà bạn lựa chọn. Ý tưởng là để giảm bớt số lượng mã JavaScript mà bạn phải viết. Với suy nghĩ ấy, tất cả các phần tử mà bạn muốn cung cấp các hàm cho chúng có thể được ghi đè và buộc nối với các phương thức mặt sau; các phương thức mặt sau này phản ứng lại khi xảy ra một sự kiện mặt trước đã định. Sau đây là các khung công tác đáng được nghiên cứu:

  • PHP AJAX
  • PHP-Ext
  • ExtPHP

PHP AJAX

PHP AJAX cho phép bạn mở rộng một lớp PHP bằng lớp của riêng bạn. Sau đó bạn chỉ cần gọi ra một phương thức khởi tạo khi tập tin PHP của bạn được gọi ra, và nó tạo ra mã XHR mặt trước cần thiết cho bạn. Sau đó, sự kiện mặt trước phải gọi một hàm JavaScript với tên giống như tên lớp PHP của bạn. Mã này trông giống như Liệt kê 9.

Liệt kê 9. Mở rộng PHP AJAX bằng lớp PHP của riêng bạn

class ajax_app extends phpajax { 
 function input() { 
 } 
 function loading() { 
 } 
 function main() { 
 } 
}
 

Các phương thức ghi đè được gọi ra để thực hiện các nhiệm vụ khác nhau trong vòng đời của Ajax. Thí dụ, nếu một hành động được thi hành ở mặt trước, phương thức main() của lớp ở mặt sau được gọi ra để xử lý hành động này. Bất cứ dữ liệu đầu vào nào thu thập ở mặt trước đều được chuyển tới phương thức input().

PHP-Ext

PHP-Ext cung cấp một thư viện được viết để hỗ trợ cho cả PHP 4 và PHP 5, cung cấp nhiều điều khiển giao diện người sử dụng ở mặt trước. Cơ sở nằm dưới của các điều khiển này thực sự được Ext JS cung cấp, nhưng cái làm cho khung công tác này là duy nhất là ở chỗ bạn không phải tập trung vào việc cung cấp JavaScript để thao tác các điều khiển mặt trước. Thay vào đó, toàn bộ tương tác với các điều khiển được thực hiện bằng cách sử dụng các dịch vụ mặt trước được viết bằng PHP. Mã PHP được gọi ra khi cần thiết, tùy thuộc vào các sự kiện mà bạn đã chỉ định rõ rằng bạn muốn xử lý sự kiện ấy. Khi xuất hiện một sự kiện đã đăng ký, phương thức PHP phù hợp được gọi ra trong mã của bạn. Với cách này, bạn có thể điền vào nội dung của các ô lưới chữ nhật bài trí giao diện và các điều khiển khác gần như là trực tiếp từ mã PHP của bạn.

ExtPHP

Theo nhà phát triển đứng đầu dự án, bạn có thể dùng PHP-Ext để viết ra mã JavaScript xâm nhập và không xâm nhập (intrusive and non-intrusive), đúng như bạn có thể sẽ làm với Ext JS. Lợi điểm là ở chỗ thiết kế này cho phép bộ biên tập PHP của bạn phát hiện được các tên phương thức chưa có, có lỗi chính tả hoặc sử dụng sai chứ không phải là buộc bạn gỡ lỗi mã JavaScript trong trình duyệt Web. Ý tưởng đằng sau ExtPHP là để tạo ra các lớp PHP mà có thể được gọi từ các kịch bản lệnh PHP. Khi bạn khởi tạo một đối tượng, mã JavaScript tương ứng được lưu lại trong một bộ đệm trong. Nếu bạn gọi ra một phương thức của đối tượng, mã này sẽ được thêm vào bộ đệm trong (internal buffer). Khi bạn đã sẵn sàng hoàn tất mã JavaScript, bạn chỉ cần gọi ra một phương thức đơn lẻ, jsrender(). Bạn cũng có thể bổ sung trực tiếp mã JavaScript vào đầu ra của bạn bằng cách gọi ra các hàm ExtPHP cho phép bạn thêm vào đầu ra.

Tóm tắt

Bài viết này cung cấp cho bạn một kiến thức nhập môn về viết mã mặt trước dựa trên Ajax và sau đó chỉ cho bạn biết cách kết hợp mã mặt trước với kịch bản lệnh PHP mặt sau. Nó cũng dẫn bạn đến một số khung công tác sẵn có mới nhất cho phép bạn tạo ra các ứng dụng web dựa trên Ajax nhanh hơn nhiều so với bạn tự viết ra toàn bộ mã. Bằng cách kết hợp một hoặc hai khung công tác ấy với Ajax và PHP, bạn có thể viết ra các ứng dụng web trực quan hấp dẫn và phong phú. Thực tế bạn có thể tự hỏi làm sao mà bạn lại từng viết được các ứng dụng web của bạn không có các công nghệ mới ấy.

Tài nguyên Học tập

  • JavaScript.com là một nguồn tài nguyên lớn để tìm hiểu về mã JavaScript và các công nghệ sắp tới liên quan đến nó. 
     
  • Trang web PHP Ajax Frameworks cung cấp một danh mục các khung công tác để phát triển các ứng dụng PHP/Ajax mà bạn không phải tự mình mã hoá toàn bộ các JavaScript Ajax. Nhiều trong số các khung công tác thực hiện các công việc nền bên dưới cho bạn, cho phép bạn tập trung vào các mấu chốt chính của ứng dụng của bạn, chứ không phải là cơ sở hạ tầng để có được các giao tiếp Ajax khách/chủ. 
     
  • "Ajax & PHP without using the XmlHttpRequest Object" (PHPit, 11.2005) có một số ý tưởng thực sự khôn ngoan, nó mô tả cách mà bạn có thể viết mã PHP cho phép bạn sử dụng các ý niệm Ajax mà không phải phụ thuộc vào đối tượngXMLHttpRequest. Tuy nhiên, nó bị hạn chế chỉ dùng phương thức GET, nên nếu bạn cần gửi đến máy chủ hơn 500 byte, bạn có thể phải tìm công cụ khác để làm việc đó. 
     
  • Để tìm mọi thứ về Ajax, Ajaxian nhất định là nơi cần phải đến. Đây là một trang web phải xem. Mọi thứ dính dáng đến Ajax đều ở trên trang Web này. Dù nó phải làm bằng PHP hay một ngôn ngữ khác thì bạn vẫn sẽ tìm thấy nó ở đây. 
     
  • Mở rộng các kỹ năng web của bạn bằng các bài viết và hướng dẫn chuyên môn hoá về các công nghệ web trong Web development zone của developerWorks. 
     
  • Đồng hành với Technical events and webcasts của developerWorks.
     

Lấy sản phẩm và công nghệ

  • Nếu JavaScript đã được nạp bằng một API hoặc Khung công tác đã được nâng cấp, nó sẽ là Prototype. Khi JavaScript API kết thúc, Prototype sẽ nối tiếp. Khung công tác này đã trở thành tiêu chuẩn được các nhà phát triển khung công tác JavaScript khác sử dụng như là khung công tác cơ sở, trên đó xây dựng các khung công tác mới. Trên thực tế, script.aculo.us được xây dựng trên khung công tác này. 
     
  • Thư viện script.aculo.us cung cấp một số điều khiển UI đẹp nhất mà tôi từng thấy. Tôi đã giành thắng lợi một cách dễ dàng từ nhiều khách hàng hạnh phúc nhờ thư viện nhỏ tiện dụng này. 
     
  • JSON là một định dạng trao đổi dữ liệu hạng nhẹ mà con người có thể đọc được và máy tính dễ dàng phân tích cú pháp được. Không chỉ dành cho mã JavaScript mà thôi, JSON đã được thêm vào ngôn ngữ PHP ở phiên bản 5.2.0
     
  • Ext JS là một khung công tác Javascript với các thành phần Ajax và UI. Nó làm việc cùng với Prototype, Yahoo UI, và jQuery. Có sẵn cả giấy phép mã nguồn mở và giấy phép thương mại cho dự án này. 
     
  • Dojo cung cấp Ajax, các sự kiện, đóng gói, việc truy vấn dựa trên CSS, và nhiều thứ nữa trong một gói nhỏ gọn. 
     
  • jQuery là một thư viện JavaScript đơn giản hoá cách bạn đi ngang qua các tài liệu HTML, xử lý sự kiện, và thực hiện hoạt hình. Nó cũng có một số tính năng Ajax cho phép bạn dễ dàng thêm Ajax vào HTML mặt trước của bạn để gọi các kịch bản lệnh phía máy chủ ở mặt sau. 
     
  • PHP AJAX là một khung công tác tạo ra toàn bộ mã JavaScript cần thiết ngay trong khi chạy thi hành sau khi tập tin PHP được gọi ra. Bạn viết một lớp PHP mà mở rộng một lớp PHP Ajax và viết đè các phương thức để xử lý các lời gọi mặt trước tại mặt sau. 
     
  • PHP-Ext PHP-Ext là một thư viện widget mã nguồn mở dựa trên Ext JS, cung cấp cho các nhà phát triển khả năng viết các kịch bản lệnh PHP thay cho mã JavaScript. 
     
  • ExtPHP ExtPHP là một thư viện mà bạn có thể sử dụng để viết JavaScript xâm nhập và không xâm nhập, đúng như cách bạn có thể làm với Ext JS.
Bạn thấy bài viết này như thế nào?: 
Average: 1 (1 vote)
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Thành phần cơ bản của Drupal Terminology

Thành phần cơ bản của Drupal Terminology

 The faster you learn to understand and speak Drupaleze, the easier it will be to communicate with other Drupal developers more effectively. To that end, here are a list of terms commonly used in the Drupal world:

Sự kiện Drupal: Global Training Day - 14/12/2013

Sự kiện Drupal: Global Training Day - 14/12/2013

Hưởng ứng phong trào Thế gian tìm hiểu Drupal, nhóm Drupal Vietnam chúng ta sẽ tổ chức một workshop nho nhỏ để giới thiệu cộng đồng biết đến cái mã nguồn mạnh mẽ này.

Mark Zuckerberg ở tuổi 21 trổ tài vẽ Graffiti (VIDEO)

Mark Zuckerberg ở tuổi 21 trổ tài vẽ Graffiti (VIDEO)

Sau khi IPO Facebook được công bố, một nghệ sĩ lang thang không nhà cũng thành triệu phú.

Công ty diệt chuột T&C

 

Diet con trung