PHP - Giới thiệu AJAX

Xin chào các bạn nhà phát triển web đang học hỏi! Hôm nay, chúng ta sẽ bước vào thế giới thú vị của AJAX với PHP. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn trong hành trình này, ngay cả khi bạn chưa từng viết một dòng mã trước đây. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và chúng ta cùng bắt đầu!

PHP - AJAX Introduction

AJAX là gì?

AJAX là viết tắt của Asynchronous JavaScript and XML. Đừng để từ này làm bạn hoảng sợ! Thực ra nó là một công nghệ rất tuyệt vời giúp các trang web trở nên tương tác và thân thiện hơn.

Hãy tưởng tượng bạn đang ở trong một nhà hàng. Nếu không có AJAX, mỗi khi bạn muốn xem thực đơn, bạn sẽ phải rời khỏi bàn, đi đến quầy, yêu cầu thực đơn, và sau đó quay lại. Với AJAX, điều này giống như có một đầu bếp có thể mang đến cho bạn thông tin bạn cần mà không làm gián đoạn trải nghiệm ăn uống của bạn.

Trong术语 web, AJAX cho phép trang web của bạn yêu cầu và nhận dữ liệu từ máy chủ mà không cần tải lại toàn bộ trang. Điều này giống như phép thuật, nhưng tốt hơn vì chúng ta có thể hiểu cách nó hoạt động!

Cách AJAX hoạt động

Một sự kiện xảy ra trong trang web (ví dụ như nhấp vào một nút)
JavaScript tạo một đối tượng XMLHttpRequest
Đối tượng XMLHttpRequest gửi yêu cầu đến máy chủ web
Máy chủ xử lý yêu cầu
Máy chủ gửi phản hồi zurück đến trang web
JavaScript đọc phản hồi
JavaScript thực hiện hành động phù hợp dựa trên phản hồi

Điều kiện cần thiết để chạy AJAX

Để chạy AJAX, bạn cần ba thành phần chính:

Một trình duyệt web hỗ trợ JavaScript và đối tượng XMLHttpRequest
Một máy chủ web (như Apache) có thể xử lý các yêu cầu AJAX
Một ngôn ngữ lập trình phía máy chủ (trong trường hợp của chúng ta, là PHP)

Tin vui! Hầu hết các trình duyệt web hiện đại đều hỗ trợ AJAX, vì vậy chúng ta đã đi được một phần ba chặng đường!

Cài đặt môi trường

Trước khi chúng ta bắt đầu mã hóa, hãy chắc chắn rằng chúng ta đã thiết lập mọi thứ:

Cài đặt XAMPP (nó bao gồm máy chủ Apache và PHP)
Tạo một thư mục mới trong thư mục htdocs của việc cài đặt XAMPP của bạn
Mở trình soạn thảo văn bản yêu thích của bạn (tôi cá nhân rất yêu thích Visual Studio Code)

Bây giờ, chúng ta đã sẵn sàng, hãy viết một chút mã!

Yêu cầu AJAX đầu tiên

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một nút, khi nhấp vào, sẽ lấy một lời chào từ máy chủ mà không cần tải lại trang.

Đầu tiên, tạo một tệp HTML tên là index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First AJAX Request</title>
</head>
<body>
<h1>Welcome to AJAX!</h1>
<button onclick="getGreeting()">Get Greeting</button>
<p id="greetingText"></p>

<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>

Bây giờ, hãy phân tích điều này:

Chúng ta có một nút với sự kiện onclick gọi hàm getGreeting().
Trong hàm getGreeting(), chúng ta tạo một đối tượng XMLHttpRequest.
Chúng ta thiết lập một hàm để xử lý phản hồi từ máy chủ.
Chúng ta mở kết nối đến greeting.php và gửi yêu cầu.

Tiếp theo, tạo một tệp PHP tên là greeting.php:

<?php
$greetings = array("Hello!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>

Tệp PHP này đơn giản chỉ trả về một lời chào ngẫu nhiên từ một mảng.

Khi bạn nhấp vào nút, JavaScript gửi yêu cầu đến greeting.php, và greeting.php trả về một lời chào ngẫu nhiên. JavaScript sau đó cập nhật trang với lời chào này, tất cả mà không cần tải lại trang!

Gửi dữ liệu đến máy chủ

Bây giờ chúng ta đã thành thạo việc lấy dữ liệu, hãy thử gửi dữ liệu đến máy chủ. Chúng ta sẽ tạo một biểu mẫu đơn giản gửi tên đến máy chủ và nhận lại lời chào cá nhân.

Cập nhật tệp index.html của bạn:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Form Example</title>
</head>
<body>
<h1>Personalized Greeting</h1>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="getPersonalizedGreeting()">Get Greeting</button>
<p id="greetingText"></p>

<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>

Và tạo một tệp mới personalized_greeting.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hello", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>

Trong ví dụ này, chúng ta sử dụng yêu cầu POST để gửi tên đến máy chủ. Tệp PHP sau đó sử dụng tên này để tạo một lời chào cá nhân.

Các phương thức AJAX phổ biến

Dưới đây là bảng các phương thức AJAX phổ biến mà bạn sẽ sử dụng:

Phương thức	Mô tả
open()	Xác định loại yêu cầu và URL
send()	Gửi yêu cầu đến máy chủ
setRequestHeader()	Thêm một cặp nhãn/giá trị vào header để gửi

Kết luận

Chúc mừng! Bạn đã刚刚 bước vào thế giới của AJAX với PHP. Chúng ta đã bao gồm các nguyên tắc cơ bản của việc gửi và nhận dữ liệu đồng bộ, đây là nền tảng của nhiều ứng dụng web hiện đại.

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới. Nó cần thời gian và thực hành, nhưng với mỗi dòng mã bạn viết, bạn đang trở nên giỏi hơn. Đừng sợ hãi khi thử nghiệm, mắc lỗi và học hỏi từ chúng.

Trong những năm dạy học của tôi, tôi đã thấy biết bao sinh viên từ những người mới bắt đầu trở thành những nhà phát triển có kỹ năng. Ch关键是 kiên nhẫn và tò mò. Vậy, tiếp tục mã hóa, tiếp tục học hỏi, và trước khi bạn nhận ra, bạn sẽ đang xây dựng những ứng dụng web tương tác tuyệt vời!

Lần tới, chúng ta sẽ khám phá các kỹ thuật AJAX nâng cao và cách xử lý các loại dữ liệu khác nhau. Đến那个时候, chúc các bạn viết mã vui vẻ!

Credits: Image by storyset