Tìm hiểu Công nghệ Ajax

** Ajax là gì?** Ajax viết tắt Asynchronous Javascript and XML.

Kkhoong phải là một ngôn ngữ hay công nghệ riêng lẻ.

LÀ một kĩ thuật kết hợp các công nghệ đã biết nhầm tạo các trang web nhanh và thân thiện hơn.

LÀ một công nghệ client-side.

Mục tiêu của Ajax

Tránh tải lại trang không cần thiết .KHi submit form, cả trang phải tải lại dù phần lớn nội dung của trang không thay đổi

. Gây mất thời gian và lãng hí bandwidth

Ajax hướng tới chỉ tải đúng phần thông tin cần thiết và chỉ thay đổi đúng phần cần thay đổi trên trang hiện tại mà không phải tại lại toàn trang.

Các ứng dụng ví dụ rõ Ajax là: Gmail, Google maps, Flickr, Facebook…

Công nghệ Công dụng
XMLHttpRequest Đối tượng của trình duyệt dùng để gọi các yêu cầu song song đến máy chủ
(X)HTML và DOM (X)HTML dùng để thể hiện trang web và DOM là các API để thay đổi động trang web
JavaScript Ngôn ngữ dùng để gọi XMLHttpRequest, truy vấn và thay đổi trang web qua mô hình DOM
XML/JSON Định dạng dữ liệu dùng để chuyển dữ liệu qua lại giữa trình duyệt và máy chủ
Sever scipt Dùng để xử lý và gửi yêu cầu đến trình duyệt

JSON

Định dạng chuyển tải dữ liệu đơn giản

.NGười dùng dễ đọc và viết

.Máy dễ đọc và tạo

JSON là định dạng văn bản

.ĐỘc lập với ngôn ngữ lập trình

Cấu trúc JSON

Tập hợp các cặp không thứ tự tên/ dữ liệu

Đóng trong cặp {}

Sau tên là :, các cặp cách nhau bởi ,

Ví dụ


var myJSONObject = 
{
   "id":"1",
   "name":"JOnh",
   "birthday":"01/01/1990"
}

Quá trình thực hiện

Ajax dựa trên Javascript

Chức năng chủ yếu là truy vấn web server bằng Javascript

Gửi nhận server sử dụng những đối tượng đặc biệt

KHi người dùng phát sinh một sự kiện, hàm JavaScript được agoij để truy vấn sever thông qua các đối tượng đó

Nội dung thu được hiển thị bằng các hàm JavaScript.

Cấu trúc của hệ thống

Kiến trúc client/Sever

Đối tượng XMLHTTP dùng để tạo yêu cầu và nhận phản hồi ở CLient

Yêu cầu thực hiện bằng GET hay POST

. GET: tham số được đính kèm trong URL.

. POST: tham số được gửi là các tham số trong yêu cầu.

Không thay đổi nhiều ở Sever

.Kết hợp của các thẻ XML

Ví dụ HTML có sử dụng JS

<html>
 <head>
  <script src="selectcustomer.js">
  </script>
 </head>
<body>
 <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>
 <div id="txtHint">
   <b>Customer info will be listed here.</b>
 </div>
</body>
</html>

selectcustomer.js

function GetXmlHttpObject(readycallback) 
{
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlHttp = new XMLHttpRequest();
   }
   else 
   {// code for IE6, IE5
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlHttp.onreadystatechange = stateChanged;
}
function stateChanged() 
{
   if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
   {
      document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
   }
}
function showCustomer(str) 
{
   var url = "getcustomer.asp?sid=" + Math.random() + "&q=" + str;
   xmlHttp = GetXmlHttpObject(stateChanged);
   xmlHttp.open("GET", url, true);
   xmlHttp.send(null);
}

Đối tượng XMLHTTP

Đối tượng dùng để kết nối đến máy chủ

Dùng để kết nối song song đến một URL và nhận thông tin Internet Explorer 5.5

objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)

Khác:

objXmlHttp=new XMLHttpRequest()

Gửi thông tin

Sau khi tạo đối tượng XHTMLHTTP, có thể gửi và nhận thông tin:

GET METHOD:

xmlhttp.open(“GET”, url, true)

xmlhttp.send()

POST METHOD:

xmlhttp.open(“POST”, url, true)

xmlhttp.send(“date=11-11-2006&name=Ali")

Dữ liệu được xử lý song song. Khi máy chủ phản hồi, sự kiện «OnReadyStateChange» được phát sinh.

Nhận thông tin

Nhận thông tin thông qua

xmlHttp.responseText

Jquery Ajax

Ví dụ jQuery.ajax() Example with PHP Script:

-----------------------------------------------------
JQUERY - CALL PHP SCRIPT TO GET DATA FOR WEB PAGE
-----------------------------------------------------
$.ajax({
  url: 'getListProduct.php',// gọi đến trang getProduct.php để kết nối với csdl lấy 1 Product
  type: 'GET',// phương thức GET
  data: 'ID=jquery4u',// với mã ID=jquery4u
  success: function(data) {
	//sau khi gọi thành công sẽ vô function này và trả data về cho thẻ #ajaxphp-results
	$('#ajaxphp-results').html(data);
  },
  error: function(e) {
	//nếu bị lỗi sẽ vô function và thông báo lỗi
	//alert(e.message);
  }
});
-----------------------------------------------------
PHP - GET NUMBER FACEBOOK FANS & TWITTER FOLLOWERS
-----------------------------------------------------
< ?php
//lấy ID bên ajax gửi qua
$ID = ($_GET["ID"]);


$connection = mysqli_connect("localhost", "root", "abcd", "learn_php_mysql_db");

$sql="SELECT * FROM product where  id=".$ID;

$result = mysqli_query($connection, $sql);

if ($result) 
{
    // Hàm `mysql_fetch_row()` sẽ chỉ fetch dữ liệu một record mỗi lần được gọi
    // do đó cần sử dụng vòng lặp While để lặp qua toàn bộ dữ liệu trên bảng posts
    while ($row=mysqli_fetch_row($result)) {
        printf ($row[0],$row[1], $row[2]);
    }
    //return result
    echo json_decode($result);
    mysqli_free_result($result);
}



?>
Chủ đề liên quan
Tìm hiểu Công nghệ Ajax

Cùng chuyên mục

Xem nhiều hôm nay