AJAX GET và POST là gì? Cách gửi dữ liệu giữa JavaScript và Server

Bùi Tấn Lực
108
04/09/2026

Trong những website có tính tương tác cao, người dùng thường thực hiện các thao tác như tìm kiếm sản phẩm, lọc dữ liệu, đăng nhập, gửi biểu mẫu, kiểm tra mã giảm giá hoặc tải thêm nội dung mà không muốn toàn bộ trang web phải tải lại. Đây chính là nhóm tình huống mà AJAX phát huy giá trị.

AJAX cho phép JavaScript gửi yêu cầu đến Server và nhận dữ liệu trả về ngay trong lúc trang đang mở. Thay vì chuyển người dùng sang một trang mới sau mỗi thao tác, JavaScript có thể âm thầm trao đổi dữ liệu với Server rồi cập nhật đúng khu vực cần thay đổi.

Hai phương thức thường gặp nhất trong quá trình này là GET và POST. Chúng đều có thể được sử dụng để gửi dữ liệu giữa trình duyệt và Server, nhưng cách truyền dữ liệu, mục đích sử dụng và mức độ phù hợp trong từng trường hợp lại khác nhau.

Hiểu đúng GET, POST và cơ chế AJAX không chỉ giúp lập trình viên viết JavaScript dễ hơn mà còn giúp thiết kế hệ thống xử lý dữ liệu hợp lý ngay từ phía Server. Với những website được xây dựng theo yêu cầu, đặc biệt là các hệ thống PHP cần giao tiếp linh hoạt với giao diện, đây là kiến thức rất quan trọng.

AJAX GET và POST là gì? Cách gửi dữ liệu giữa JavaScript và Server

AJAX hoạt động như thế nào giữa JavaScript và Server?

AJAX không phải là một ngôn ngữ lập trình riêng. Đây là cách tổ chức giao tiếp giữa trình duyệt và Server thông qua JavaScript, trong đó trình duyệt có thể gửi HTTP Request đến Server và xử lý HTTP Response mà không nhất thiết phải tải lại toàn bộ trang.

Có thể hình dung quá trình này theo một chuỗi đơn giản:

Người dùng thực hiện một thao tác trên website.
JavaScript phát hiện thao tác đó.
JavaScript tạo Request gửi đến Server.
Server tiếp nhận và xử lý dữ liệu.
Server trả Response về trình duyệt.
JavaScript đọc Response và cập nhật giao diện.

Điểm quan trọng nằm ở bước cuối. Server không trực tiếp thay đổi nội dung đang hiển thị trên màn hình của người dùng. Server chỉ trả dữ liệu về. JavaScript mới là thành phần quyết định dữ liệu đó sẽ được đưa vào đâu và hiển thị như thế nào.

Ví dụ, một website bán hàng có ô tìm kiếm sản phẩm. Khi người dùng nhập từ khóa, JavaScript có thể gửi từ khóa đó đến Server. Server tìm kiếm trong cơ sở dữ liệu rồi trả về danh sách sản phẩm phù hợp. JavaScript nhận kết quả và cập nhật khu vực danh sách sản phẩm mà không cần tải lại toàn bộ trang.

AJAX không đồng nghĩa với việc Server không xử lý

Một hiểu lầm khá phổ biến là AJAX giúp JavaScript tự lấy dữ liệu mà không cần Server. Thực tế hoàn toàn ngược lại. AJAX chỉ thay đổi cách trình duyệt giao tiếp với Server, còn Server vẫn chịu trách nhiệm xử lý nghiệp vụ, truy vấn cơ sở dữ liệu, kiểm tra dữ liệu và trả kết quả.

Ví dụ, khi người dùng kiểm tra một email đã tồn tại hay chưa, JavaScript có thể gửi email lên Server bằng AJAX. Server tiếp nhận email, kiểm tra cơ sở dữ liệu rồi trả về kết quả như email đã tồn tại hoặc có thể sử dụng.

Như vậy, JavaScript đảm nhiệm phần tương tác ở phía trình duyệt, trong khi PHP hoặc một công nghệ Server-side khác đảm nhiệm phần xử lý phía Server.

GET và POST khác nhau ở điểm nào?

GET và POST đều là các phương thức HTTP được sử dụng để trao đổi dữ liệu giữa Client và Server. Tuy nhiên, không nên lựa chọn chúng chỉ vì một phương thức “dễ dùng hơn”. Cần căn cứ vào bản chất của dữ liệu và mục đích của Request.

GET thường phù hợp với những yêu cầu có mục đích lấy dữ liệu. Dữ liệu gửi đi thường được biểu diễn trong URL dưới dạng Query String.

POST thường phù hợp với những yêu cầu cần gửi dữ liệu đến Server để xử lý, chẳng hạn tạo mới dữ liệu, gửi biểu mẫu hoặc thực hiện một thao tác làm thay đổi trạng thái hệ thống.

Tiêu chí	GET	POST
Mục đích phổ biến	Lấy hoặc truy vấn dữ liệu	Gửi dữ liệu để Server xử lý
Vị trí dữ liệu	Thường nằm trong URL	Thường nằm trong Request Body
Có thể nhìn thấy dữ liệu trên URL	Có	Không nằm trực tiếp trên URL
Phù hợp với tìm kiếm, lọc dữ liệu	Rất phù hợp	Không phải lựa chọn thông thường
Phù hợp gửi biểu mẫu	Chỉ phù hợp với dữ liệu đơn giản, không nhạy cảm	Phù hợp hơn trong nhiều trường hợp
Bookmark hoặc chia sẻ URL chứa tham số	Thuận tiện	Không phù hợp theo cách này

Cần lưu ý rằng POST không tự động bảo mật dữ liệu. Việc dữ liệu không xuất hiện trên URL không có nghĩa là dữ liệu đã được mã hóa hoặc an toàn tuyệt đối. Nếu truyền dữ liệu quan trọng, website vẫn cần sử dụng HTTPS, kiểm tra dữ liệu ở Server và triển khai các cơ chế bảo mật phù hợp.

Khi nào nên sử dụng GET?

GET phù hợp nhất khi Request mang tính chất truy vấn. Ví dụ điển hình là tìm kiếm, lọc danh sách, lấy thông tin theo ID hoặc tải một nhóm dữ liệu dựa trên điều kiện nhất định.

Giả sử website có chức năng tìm kiếm bài viết. JavaScript có thể gửi từ khóa ajax đến một địa chỉ xử lý trên Server:

fetch('/tim-kiem.php?q=ajax')
    .then(response => response.text())
    .then(data => {
        console.log(data);
    });

Trong trường hợp này, giá trị q nằm trên URL. Server có thể đọc giá trị đó rồi thực hiện truy vấn dữ liệu tương ứng.

Ưu điểm của cách làm này là URL có thể mô tả trực tiếp điều kiện truy vấn. Người dùng có thể sao chép hoặc lưu URL để mở lại cùng một kết quả, tùy vào cách website thiết kế hệ thống.

Khi nào nên sử dụng POST?

POST phù hợp khi dữ liệu được gửi đến Server để thực hiện một nghiệp vụ cụ thể. Chẳng hạn đăng nhập, đăng ký tài khoản, gửi liên hệ, thêm sản phẩm vào cơ sở dữ liệu hoặc cập nhật thông tin.

Ví dụ JavaScript gửi dữ liệu biểu mẫu bằng POST:

const formData = new FormData();

formData.append('name', 'Nguyen Van A');
formData.append('email', 'a@example.com');

fetch('/xu-ly.php', {
    method: 'POST',
    body: formData
})
    .then(response => response.text())
    .then(data => {
        console.log(data);
    });

Ở đây dữ liệu không được ghép trực tiếp vào URL. JavaScript đưa dữ liệu vào Request Body và Server nhận dữ liệu từ phần Body đó.

Đây là cách tiếp cận phù hợp với các biểu mẫu có nhiều trường dữ liệu hoặc những thao tác mà Server cần tiếp nhận để xử lý một nghiệp vụ.

Cách JavaScript gửi Request đến Server

Ngày nay, cách phổ biến để thực hiện AJAX bằng JavaScript là sử dụng Fetch API. API này cung cấp cơ chế tương đối gọn để gửi HTTP Request và nhận Response từ Server.

Một Request cơ bản có thể bắt đầu bằng:

fetch('/du-lieu.php')
    .then(response => response.text())
    .then(data => {
        console.log(data);
    });

Khi đoạn mã được thực thi, trình duyệt gửi Request đến /du-lieu.php. Nếu Server xử lý thành công và trả dữ liệu về, Promise tiếp theo sẽ nhận Response.

Điểm cần chú ý là response chưa phải nội dung dữ liệu cuối cùng. Nó là đối tượng đại diện cho HTTP Response. Lập trình viên cần chọn cách đọc dữ liệu phù hợp với định dạng mà Server trả về.

Nhận dữ liệu dạng văn bản

Nếu Server trả về HTML hoặc một đoạn văn bản thông thường, có thể sử dụng response.text().

fetch('/noidung.php')
    .then(response => response.text())
    .then(data => {
        console.log(data);
    });

Cách này hữu ích khi Server trả về một đoạn HTML đã được tạo sẵn và JavaScript chỉ cần đưa kết quả vào một khu vực nhất định trên giao diện.

Nhận dữ liệu JSON

Đối với các hệ thống cần trao đổi dữ liệu có cấu trúc, JSON thường là lựa chọn thuận tiện hơn. Server có thể trả về một đối tượng hoặc danh sách dữ liệu, sau đó JavaScript chuyển Response thành JSON.

fetch('/api/san-pham.php')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

Ví dụ Server có thể trả về dữ liệu có dạng:

{
    "status": true,
    "message": "Lấy dữ liệu thành công",
    "products": [
        {
            "id": 1,
            "name": "Sản phẩm A"
        },
        {
            "id": 2,
            "name": "Sản phẩm B"
        }
    ]
}

Khi đó JavaScript có thể kiểm tra status, đọc message và duyệt qua danh sách products để xây dựng giao diện.

Cách trao đổi này đặc biệt phù hợp với các website có nhiều thao tác động. Thay vì Server phải trả về cả một trang HTML hoàn chỉnh, Server chỉ cần trả dữ liệu cần thiết, còn JavaScript quyết định cách trình bày dữ liệu đó.

Quy trình một Request AJAX GET thực tế

Để hiểu rõ bản chất của GET, hãy hình dung một trang quản trị có chức năng lấy thông tin một sản phẩm theo ID. Người dùng chọn sản phẩm, JavaScript gửi ID lên Server, Server truy vấn cơ sở dữ liệu rồi trả kết quả.

Phía JavaScript có thể thực hiện:

const productId = 25;

fetch('/san-pham.php?id=' + productId)
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

Request lúc này có thể được hình dung như một yêu cầu đến:

/san-pham.php?id=25

Phía PHP nhận tham số:

<?php

$id = $_GET['id'] ?? '';

echo $id;

Điều quan trọng là dữ liệu từ Client không được mặc định là đáng tin cậy. Dù giá trị id được gửi từ giao diện, Server vẫn phải kiểm tra kiểu dữ liệu, phạm vi giá trị và quyền truy cập trước khi thực hiện truy vấn.

Ví dụ, nếu hệ thống yêu cầu ID phải là số nguyên dương, PHP nên xử lý và xác thực dữ liệu trước khi sử dụng. Đặc biệt với dữ liệu được đưa vào câu SQL, cần sử dụng cơ chế truy vấn an toàn thay vì nối chuỗi trực tiếp.

Quy trình một Request AJAX POST thực tế

Với POST, JavaScript đưa dữ liệu vào Request Body. Đây là phương pháp thường được sử dụng khi người dùng gửi một biểu mẫu hoặc thực hiện một thao tác cần Server tiếp nhận nhiều trường dữ liệu.

Ví dụ một biểu mẫu đăng ký có họ tên và email:

const data = {
    name: 'Nguyen Van A',
    email: 'a@example.com'
};

fetch('/dang-ky.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
    .then(response => response.json())
    .then(result => {
        console.log(result);
    });

Ở đây JavaScript chuyển đối tượng thành chuỗi JSON bằng JSON.stringify(). Header cho Server biết nội dung gửi lên có định dạng JSON.

Đây là điểm rất dễ nhầm khi lập trình AJAX với PHP: POST không chỉ có một cách truyền dữ liệu. Nếu JavaScript gửi JSON thì PHP không thể mặc định đọc dữ liệu đó bằng $_POST như khi nhận dữ liệu từ form truyền thống.

Với JSON, PHP thường cần đọc nội dung Request Body rồi giải mã:

<?php

$input = file_get_contents('php://input');

$data = json_decode($input, true);

$name = $data['name'] ?? '';
$email = $data['email'] ?? '';

Ngược lại, nếu JavaScript sử dụng FormData, cách nhận dữ liệu ở PHP sẽ khác. Vì vậy khi xây dựng hệ thống AJAX, phía Client và Server cần thống nhất rõ định dạng dữ liệu gửi đi thay vì chỉ thống nhất GET hay POST.

Gửi dữ liệu từ Form bằng AJAX mà không tải lại trang

Một trong những ứng dụng dễ thấy nhất của AJAX là xử lý biểu mẫu. Với cách gửi form truyền thống, trình duyệt thường gửi dữ liệu rồi chuyển sang một URL hoặc tải lại trang để nhận kết quả. AJAX cho phép thay đổi quy trình này: JavaScript chủ động lấy dữ liệu từ biểu mẫu, gửi đến Server và chỉ cập nhật phần giao diện cần thiết.

Cách làm này phù hợp với các chức năng như gửi thông tin liên hệ, đăng ký thành viên, đăng nhập, nhận báo giá, gửi yêu cầu tư vấn hoặc thêm dữ liệu trong khu vực quản trị.

Sử dụng FormData để lấy dữ liệu biểu mẫu

Nếu biểu mẫu chứa nhiều trường, sử dụng FormData sẽ thuận tiện hơn so với việc tự lấy từng giá trị bằng JavaScript. FormData có thể lấy trực tiếp dữ liệu từ một thẻ form và gửi lên Server.

const form = document.querySelector('#contact-form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(form);

    fetch('/xu-ly-lien-he.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        console.log(result);
    });
});

event.preventDefault() có nhiệm vụ ngăn trình duyệt thực hiện hành động submit mặc định. Sau đó JavaScript tự đảm nhận việc gửi dữ liệu bằng Fetch API.

Điểm đáng chú ý là khi sử dụng FormData, không cần tự thiết lập Content-Type: multipart/form-data. Trình duyệt sẽ tự tạo Content-Type cùng boundary phù hợp. Việc tự đặt Header không đúng cách có thể khiến Server không nhận được dữ liệu như mong muốn.

PHP nhận dữ liệu từ FormData

Nếu dữ liệu được gửi bằng FormData với các trường thông thường, PHP có thể nhận thông qua $_POST. Ví dụ:

<?php

$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';

$name = trim($name);
$email = trim($email);

if ($name === '' || $email === '') {
    echo json_encode([
        'status' => false,
        'message' => 'Vui lòng nhập đầy đủ thông tin'
    ]);
    exit;
}

echo json_encode([
    'status' => true,
    'message' => 'Dữ liệu đã được tiếp nhận'
]);

Server nên kiểm tra dữ liệu trước khi thực hiện nghiệp vụ. Không nên coi việc JavaScript đã kiểm tra form là điều kiện đủ, bởi người dùng có thể gửi Request trực tiếp đến Server mà không cần thông qua giao diện website.

Kiểm tra ở JavaScript chủ yếu giúp trải nghiệm người dùng tốt hơn. Kiểm tra ở Server mới là lớp kiểm soát có giá trị đối với dữ liệu thực tế.

Gửi JSON giữa JavaScript và PHP

Trong các hệ thống có cấu trúc dữ liệu rõ ràng, JSON thường phù hợp hơn FormData. JavaScript có thể gom dữ liệu thành một object, chuyển thành chuỗi JSON rồi gửi đến Server.

const user = {
    name: 'Nguyen Van A',
    email: 'a@example.com',
    phone: '0900000000'
};

fetch('/api/user.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
})
.then(response => response.json())
.then(result => {
    console.log(result);
});

Phía PHP cần đọc Request Body để lấy chuỗi JSON:

<?php

$rawData = file_get_contents('php://input');

$data = json_decode($rawData, true);

if (!is_array($data)) {
    echo json_encode([
        'status' => false,
        'message' => 'Dữ liệu không hợp lệ'
    ]);
    exit;
}

$name = trim($data['name'] ?? '');
$email = trim($data['email'] ?? '');
$phone = trim($data['phone'] ?? '');

Cách này đặc biệt hữu ích khi dữ liệu không còn đơn giản là một vài trường form. Một Request có thể chứa danh sách sản phẩm, thông tin bộ lọc, cấu hình hoặc nhiều đối tượng liên quan.

FormData và JSON nên chọn cách nào?

Trường hợp	Phương án phù hợp	Lý do
Form có các trường văn bản cơ bản	FormData hoặc JSON	Cả hai đều có thể đáp ứng
Upload hình ảnh hoặc file	FormData	Hỗ trợ gửi file trực tiếp
Trao đổi dữ liệu API có cấu trúc	JSON	Dễ tổ chức và xử lý dữ liệu
Danh sách object hoặc dữ liệu lồng nhau	JSON	Biểu diễn cấu trúc thuận tiện
Form truyền thống cần gửi file	FormData	Phù hợp với multipart request

Không có quy tắc rằng mọi AJAX POST đều phải dùng JSON hoặc mọi form đều phải dùng FormData. Quyết định nên dựa trên loại dữ liệu mà Server cần tiếp nhận.

Server nên trả dữ liệu AJAX như thế nào?

Một hệ thống AJAX tốt không chỉ quan tâm đến việc gửi Request mà còn phải thiết kế Response rõ ràng. Nếu Server lúc trả một chuỗi, lúc trả HTML, lúc trả JSON với cấu trúc khác nhau, JavaScript sẽ khó xử lý và việc bảo trì càng về sau càng phức tạp.

Đối với các chức năng nghiệp vụ, một cấu trúc JSON thống nhất thường giúp Client dễ kiểm tra kết quả.

{
    "status": true,
    "message": "Thao tác thành công",
    "data": {}
}

Khi có lỗi:

{
    "status": false,
    "message": "Dữ liệu không hợp lệ",
    "data": null
}

JavaScript có thể xử lý thống nhất:

fetch('/api/xu-ly.php', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(result => {
    if (result.status) {
        console.log(result.message);
        return;
    }

    console.log(result.message);
});

Cách thiết kế này giúp phần giao diện không cần biết quá nhiều chi tiết bên trong PHP. JavaScript chỉ cần biết Request gửi đến đâu, dữ liệu cần gửi là gì và Response có cấu trúc như thế nào.

Không nên chỉ trả về một chuỗi thành công hoặc thất bại

Server hoàn toàn có thể trả về OK hoặc Error, nhưng cách này nhanh chóng trở nên hạn chế khi chức năng phát triển. Một Response có cấu trúc rõ ràng có thể chứa trạng thái, thông báo, dữ liệu trả về và những thông tin cần thiết khác.

Ví dụ với thao tác thêm sản phẩm:

{
    "status": true,
    "message": "Thêm sản phẩm thành công",
    "data": {
        "id": 125,
        "name": "Sản phẩm mới"
    }
}

JavaScript có thể sử dụng ngay ID được Server tạo ra để cập nhật danh sách trên giao diện mà không cần gửi thêm một Request khác chỉ để tìm lại bản ghi vừa tạo.

Xử lý lỗi khi AJAX không nhận được dữ liệu

Trong thực tế, AJAX không phải lúc nào cũng thành công. Server có thể lỗi, đường truyền có thể gián đoạn, URL có thể sai hoặc Response trả về không đúng định dạng mà JavaScript đang chờ.

Vì vậy, chỉ viết một chuỗi then() và giả định mọi Request đều thành công là chưa đủ.

fetch('/api/du-lieu.php')
    .then(response => {
        if (!response.ok) {
            throw new Error('Server trả về lỗi HTTP');
        }

        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

Thuộc tính ok giúp kiểm tra trạng thái HTTP của Response. Chẳng hạn Server có thể trả về 404 khi URL không tồn tại hoặc 500 khi xảy ra lỗi phía Server.

Tuy nhiên, cần phân biệt HTTP error với nghiệp vụ không thành công. Một Request có thể nhận HTTP 200 nhưng nghiệp vụ vẫn thất bại.

Ví dụ người dùng nhập email đã tồn tại. Server có thể trả về HTTP 200 cùng JSON:

{
    "status": false,
    "message": "Email đã được sử dụng"
}

Trong trường hợp này, kết nối HTTP vẫn thành công nhưng nghiệp vụ không đạt yêu cầu. JavaScript cần kiểm tra cả Response HTTP lẫn trạng thái nghiệp vụ trong dữ liệu trả về.

Cập nhật giao diện sau khi nhận kết quả

Mục tiêu cuối cùng của AJAX không chỉ là gửi và nhận dữ liệu. Giá trị thực tế nằm ở việc sử dụng Response để thay đổi giao diện đúng chỗ.

Ví dụ người dùng gửi biểu mẫu và Server trả về kết quả thành công. JavaScript có thể đưa thông báo vào một khu vực trên trang:

fetch('/xu-ly.php', {
    method: 'POST',
    body: new FormData(form)
})
.then(response => response.json())
.then(result => {
    const message = document.querySelector('#message');

    message.textContent = result.message;
});

Với danh sách sản phẩm, JavaScript có thể nhận JSON rồi tạo nội dung tương ứng:

fetch('/api/products.php')
.then(response => response.json())
.then(result => {
    const list = document.querySelector('#product-list');

    list.innerHTML = '';

    result.data.forEach(product => {
        const item = document.createElement('div');

        item.textContent = product.name;

        list.appendChild(item);
    });
});

Ở đây Server chỉ cung cấp dữ liệu sản phẩm. JavaScript chịu trách nhiệm quyết định cách dữ liệu được hiển thị.

Đây là một trong những lý do AJAX phù hợp với các giao diện cần phản hồi nhanh. Thay vì tải lại toàn bộ HTML của trang, trình duyệt chỉ thay đổi khu vực liên quan đến thao tác vừa thực hiện.

AJAX GET và POST trong một hệ thống thực tế

Một website thực tế có thể sử dụng đồng thời cả GET và POST trong cùng một chức năng. Hai phương thức không nhất thiết phải được xem như hai lựa chọn loại trừ nhau.

Ví dụ với trang quản lý sản phẩm:

GET dùng để lấy danh sách sản phẩm.
GET dùng để lấy thông tin chi tiết một sản phẩm.
POST dùng để thêm sản phẩm mới.
POST dùng để gửi dữ liệu cập nhật.
POST dùng để xóa hoặc thực hiện một thao tác nghiệp vụ cần kiểm soát ở Server.

JavaScript có thể gọi API lấy danh sách:

fetch('/api/products.php')
    .then(response => response.json())
    .then(result => {
        console.log(result);
    });

Sau đó khi người dùng tạo sản phẩm, JavaScript gửi POST:

const data = {
    name: 'Sản phẩm mới',
    price: 1500000
};

fetch('/api/products.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
    console.log(result);
});

Cách tổ chức này giúp Client và Server có ranh giới tương đối rõ ràng. JavaScript tập trung vào tương tác và hiển thị, còn PHP chịu trách nhiệm xác thực, xử lý nghiệp vụ, truy vấn dữ liệu và trả kết quả.

Bảo mật dữ liệu khi sử dụng AJAX GET và POST

AJAX chỉ là phương thức để trình duyệt giao tiếp với Server, vì vậy bản thân AJAX không làm cho dữ liệu trở nên an toàn. Một hệ thống tốt phải xem mọi Request từ trình duyệt là dữ liệu bên ngoài và luôn kiểm tra lại ở phía Server.

Không đưa dữ liệu nhạy cảm vào GET

GET thường đưa tham số lên URL nên dữ liệu có thể xuất hiện trong lịch sử trình duyệt, nhật ký truy cập hoặc các hệ thống ghi nhận URL. Vì vậy không nên dùng GET để truyền mật khẩu, mã xác thực, thông tin bí mật hoặc những dữ liệu không nên xuất hiện trong địa chỉ trang.

Ví dụ không nên thiết kế Request kiểu:

/dang-nhap.php?username=admin&password=123456

Thông tin nhạy cảm cần được truyền theo phương thức phù hợp hơn và website nên sử dụng HTTPS để mã hóa dữ liệu trên đường truyền.

Luôn kiểm tra dữ liệu ở Server

JavaScript có thể kiểm tra dữ liệu trước khi gửi để giúp người dùng phát hiện lỗi nhanh hơn, nhưng đó không phải lớp bảo vệ cuối cùng. Người dùng hoàn toàn có thể bỏ qua JavaScript và tự tạo Request đến Server.

Ví dụ giao diện yêu cầu giá sản phẩm phải lớn hơn 0. Việc kiểm tra bằng JavaScript giúp hạn chế thao tác sai trên giao diện, nhưng PHP vẫn phải kiểm tra lại giá trị trước khi lưu vào cơ sở dữ liệu.

<?php

$price = $_POST['price'] ?? '';

if (!is_numeric($price) || $price <= 0) {
    echo json_encode([
        'status' => false,
        'message' => 'Giá sản phẩm không hợp lệ'
    ]);
    exit;
}

Nguyên tắc quan trọng là Client kiểm tra để cải thiện trải nghiệm, Server kiểm tra để bảo vệ hệ thống.

Chống SQL Injection khi xử lý dữ liệu

Dữ liệu nhận từ AJAX không nên được nối trực tiếp vào câu SQL. Nếu cần truy vấn cơ sở dữ liệu, nên sử dụng prepared statement hoặc cơ chế tương đương của hệ quản trị cơ sở dữ liệu.

Ví dụ với PDO:

<?php

$stmt = $pdo->prepare(
    'SELECT id, name FROM products WHERE id = :id'
);

$stmt->execute([
    'id' => $id
]);

$product = $stmt->fetch();

Cách này giúp tách dữ liệu khỏi cấu trúc câu lệnh SQL và giảm đáng kể nguy cơ dữ liệu đầu vào bị lợi dụng để thay đổi câu truy vấn.

Kiểm soát quyền trước khi thực hiện nghiệp vụ

AJAX không tạo ra quyền truy cập mới cho người dùng. Nếu một URL PHP chỉ dành cho quản trị viên, Server vẫn phải kiểm tra phiên đăng nhập và quyền của tài khoản trước khi xử lý Request.

Không nên dựa vào việc nút thao tác đã bị ẩn bằng JavaScript hoặc CSS để kết luận rằng người dùng không thể gọi chức năng đó. Giao diện chỉ là lớp hiển thị; quyền thực tế phải được kiểm soát ở Server.

Những lỗi AJAX thường gặp khi kết nối JavaScript với PHP

Phần lớn lỗi AJAX trong quá trình phát triển không nằm ở cú pháp Fetch API mà đến từ việc JavaScript và Server không thống nhất về URL, phương thức HTTP, định dạng dữ liệu hoặc Response.

Gửi JSON nhưng PHP lại đọc $_POST

Đây là lỗi phổ biến khi chuyển từ form truyền thống sang API. Nếu JavaScript gửi:

fetch('/api.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'Nguyen Van A'
    })
});

thì PHP không nên mặc định tìm dữ liệu bằng:

<?php

$name = $_POST['name'] ?? '';

Thay vào đó cần đọc Request Body và giải mã JSON:

<?php

$input = file_get_contents('php://input');

$data = json_decode($input, true);

$name = $data['name'] ?? '';

Ngược lại, nếu JavaScript gửi FormData thì PHP có thể nhận các trường thông thường thông qua $_POST. Vì vậy cần xác định chính xác định dạng Request trước khi kiểm tra mã PHP.

Server trả HTML nhưng JavaScript lại gọi response.json()

Nếu PHP trả về HTML hoặc văn bản:

<?php

echo '<p>Thao tác thành công</p>';

thì JavaScript nên đọc bằng response.text(). Nếu lại sử dụng response.json(), quá trình phân tích Response có thể phát sinh lỗi vì dữ liệu không phải JSON hợp lệ.

Ngược lại, nếu Server được thiết kế để trả JSON thì JavaScript nên sử dụng response.json() và PHP phải đảm bảo Response thực sự là JSON hợp lệ.

PHP vô tình xuất thêm nội dung vào JSON

Một API có thể được thiết kế để trả:

{
    "status": true,
    "message": "Thành công"
}

Nhưng nếu PHP vô tình có thêm cảnh báo, khoảng trắng không mong muốn hoặc nội dung debug trước hoặc sau JSON thì JavaScript có thể không phân tích được Response.

Vì vậy khi API trả JSON, phần xử lý nên được kiểm soát chặt chẽ và không nên để các nội dung debug xuất hiện trong Response chính thức.

GET hay POST: lựa chọn theo mục đích thay vì thói quen

Việc chọn GET hay POST nên dựa vào bản chất của thao tác. Không nên mặc định dùng POST cho mọi Request chỉ vì POST “ẩn dữ liệu trên URL”, cũng không nên dùng GET cho mọi thao tác vì cách truyền tham số đơn giản.

Nhu cầu	Nên cân nhắc	Giải thích
Lấy danh sách dữ liệu	GET	Request mang tính truy vấn
Tìm kiếm theo từ khóa	GET	Điều kiện tìm kiếm có thể biểu diễn trên URL
Lọc hoặc phân trang	GET	Thuận tiện tạo URL tương ứng với trạng thái truy vấn
Gửi biểu mẫu	POST	Dữ liệu được gửi vào Request Body
Tạo bản ghi mới	POST	Server tiếp nhận dữ liệu để xử lý nghiệp vụ
Upload file	POST	Phù hợp với FormData và multipart request
Gửi thông tin nhạy cảm	POST kết hợp HTTPS	Không đưa dữ liệu trực tiếp lên URL

Cũng cần hiểu rằng việc dùng POST không thay thế cho HTTPS. Nếu website truyền dữ liệu qua kết nối không mã hóa, dữ liệu vẫn có thể bị quan sát trên đường truyền. HTTPS mới là thành phần quan trọng để bảo vệ dữ liệu trong quá trình truyền tải.

Tối ưu AJAX để website phản hồi nhanh hơn

AJAX giúp tránh việc tải lại toàn bộ trang, nhưng không có nghĩa mọi Request đều được tối ưu. Nếu JavaScript liên tục gửi quá nhiều Request hoặc Server trả về lượng dữ liệu lớn không cần thiết, website vẫn có thể chậm.

Chỉ lấy dữ liệu cần thiết

API không nhất thiết phải trả toàn bộ thông tin của một bản ghi nếu giao diện chỉ cần một vài trường. Ví dụ danh sách sản phẩm chỉ hiển thị tên, giá và hình ảnh thì Response không nhất thiết phải chứa toàn bộ thông tin quản trị.

Giảm dữ liệu truyền giữa trình duyệt và Server giúp giảm kích thước Response và hạn chế công việc xử lý ở phía Client.

Không gửi Request liên tục khi người dùng đang nhập

Chức năng tìm kiếm trực tiếp có thể phát sinh rất nhiều Request nếu mỗi lần người dùng gõ một ký tự đều gọi Server. Với từ khóa dài, một thao tác nhập có thể tạo ra hàng loạt Request gần như liên tiếp.

Trong trường hợp này có thể áp dụng kỹ thuật debounce, tức là chờ người dùng ngừng nhập trong một khoảng thời gian ngắn rồi mới gửi Request.

let timer;

searchInput.addEventListener('input', function() {
    clearTimeout(timer);

    timer = setTimeout(() => {
        const keyword = searchInput.value.trim();

        fetch('/tim-kiem.php?q=' + encodeURIComponent(keyword))
            .then(response => response.json())
            .then(data => {
                console.log(data);
            });
    }, 400);
});

Cách này đặc biệt hữu ích với ô tìm kiếm sản phẩm, tìm kiếm khách hàng hoặc các bộ lọc dữ liệu có khả năng thay đổi liên tục.

Không tải lại dữ liệu nếu không cần thiết

Nếu người dùng vừa thực hiện một thao tác và Server đã trả về dữ liệu bản ghi mới, JavaScript có thể sử dụng ngay Response đó để cập nhật giao diện thay vì lập tức gửi thêm một Request khác chỉ để lấy lại cùng dữ liệu.

Thiết kế API và giao diện cùng nhau ngay từ đầu sẽ giúp giảm số lượng Request và làm hệ thống phản hồi nhanh hơn.

AJAX phù hợp với những chức năng nào trên website?

AJAX phát huy hiệu quả nhất ở những chức năng mà người dùng cần tương tác nhiều nhưng không cần tải lại toàn bộ trang sau mỗi thao tác.

Tìm kiếm và lọc dữ liệu.
Phân trang không tải lại trang.
Đăng nhập hoặc đăng ký tài khoản.
Gửi biểu mẫu liên hệ.
Thêm sản phẩm vào giỏ hàng.
Cập nhật số lượng sản phẩm.
Kiểm tra dữ liệu trước khi gửi form.
Tải thêm nội dung.
Quản lý dữ liệu trong trang quản trị.
Lấy thông tin chi tiết theo ID.
Cập nhật trạng thái của một bản ghi.

Tuy nhiên, không phải mọi thao tác đều cần AJAX. Nếu một trang có thể hoạt động tốt với Request và Response truyền thống, việc đưa AJAX vào chỉ vì muốn sử dụng công nghệ mới có thể làm hệ thống phức tạp hơn mà không tạo ra lợi ích tương xứng.

AJAX nên được sử dụng khi nó giải quyết một vấn đề cụ thể: giảm tải lại trang, tăng tính tương tác, cập nhật dữ liệu theo từng khu vực hoặc tạo trải nghiệm thao tác liền mạch hơn.

Xây dựng hệ thống AJAX PHP dễ bảo trì

Với website phát triển lâu dài, điều quan trọng không chỉ là AJAX chạy được mà còn phải dễ mở rộng khi số lượng chức năng tăng lên. JavaScript và PHP nên có quy ước thống nhất về URL, phương thức, dữ liệu đầu vào và cấu trúc Response.

Một luồng xử lý có thể được tổ chức theo nguyên tắc:

JavaScript xác định hành động người dùng.
JavaScript kiểm tra những lỗi cơ bản ở giao diện.
JavaScript gửi Request đến Endpoint phù hợp.
PHP xác thực Request và kiểm tra quyền.
PHP kiểm tra dữ liệu đầu vào.
PHP thực hiện nghiệp vụ và truy vấn cơ sở dữ liệu khi cần.
PHP trả Response có cấu trúc thống nhất.
JavaScript kiểm tra kết quả và cập nhật giao diện.

Ví dụ, một Endpoint có thể nhận POST để tạo sản phẩm:

POST /api/products.php

JavaScript gửi dữ liệu:

{
    "name": "Sản phẩm A",
    "price": 1200000
}

Server xử lý rồi trả:

{
    "status": true,
    "message": "Tạo sản phẩm thành công",
    "data": {
        "id": 101,
        "name": "Sản phẩm A",
        "price": 1200000
    }
}

JavaScript có thể dùng ngay dữ liệu trong data để cập nhật danh sách. Khi cấu trúc được thống nhất như vậy, việc bổ sung chức năng mới sẽ thuận lợi hơn vì lập trình viên không phải thiết kế lại cách giao tiếp cho từng màn hình.

AJAX trong quá trình xây dựng website PHP theo yêu cầu

Đối với một website PHP được xây dựng theo yêu cầu, AJAX nên được thiết kế dựa trên quy trình nghiệp vụ thực tế thay vì chỉ thêm vào để tạo cảm giác giao diện hiện đại. Mỗi Request cần có lý do rõ ràng và Server cần xử lý đúng trách nhiệm của mình.

Chẳng hạn một website bán hàng có thể dùng GET để lấy danh sách sản phẩm theo bộ lọc, POST để thêm sản phẩm vào giỏ hàng, POST để cập nhật số lượng và tiếp tục sử dụng GET để lấy thông tin giỏ hàng khi cần. Các thao tác này tạo thành một hệ thống giao tiếp thống nhất giữa giao diện và Server.

Với Web Mới, việc xây dựng website theo hướng code PHP theo yêu cầu cho phép cách tổ chức AJAX được thiết kế theo đúng đặc điểm của từng dự án thay vì ép mọi website vào một cấu trúc có sẵn. Điều này đặc biệt hữu ích với những hệ thống có nghiệp vụ riêng, nhiều chức năng quản trị hoặc cần giao diện tương tác theo quy trình đặc thù.

Quan trọng hơn, AJAX chỉ là một thành phần trong tổng thể website. Một hệ thống tốt cần kết hợp JavaScript, PHP, cơ sở dữ liệu, HTTP, xác thực, phân quyền và bảo mật thành một quy trình thống nhất.

Những điểm cần nhớ khi làm việc với GET và POST

GET và POST đều là phương thức HTTP, không phải hai công nghệ AJAX riêng biệt.
GET phù hợp với những Request mang tính truy vấn dữ liệu.
POST phù hợp với nhiều thao tác gửi dữ liệu để Server xử lý.
Dữ liệu GET thường nằm trong URL, còn dữ liệu POST thường nằm trong Request Body.
POST không đồng nghĩa với việc dữ liệu đã được bảo mật.
HTTPS vẫn cần thiết khi truyền dữ liệu qua Internet.
JSON và FormData là hai cách truyền dữ liệu phổ biến nhưng có cách xử lý khác nhau ở PHP.
JavaScript kiểm tra dữ liệu không thể thay thế việc xác thực ở Server.
Response của Server cần có cấu trúc rõ ràng và thống nhất.
Cần xử lý cả lỗi HTTP lẫn lỗi nghiệp vụ.
Không nên tạo quá nhiều Request AJAX không cần thiết.
AJAX nên được dùng để giải quyết nhu cầu thực tế của giao diện và nghiệp vụ.

Hiểu AJAX GET và POST thực chất là hiểu cách trình duyệt và Server trao đổi dữ liệu với nhau. Khi nắm được luồng Request → xử lý Server → Response → cập nhật giao diện, việc xây dựng các chức năng tương tác bằng JavaScript và PHP sẽ trở nên dễ kiểm soát hơn rất nhiều.

Đặc biệt, thay vì chỉ học thuộc cú pháp fetch(), lập trình viên nên hiểu dữ liệu đang được gửi dưới dạng gì, Server đọc dữ liệu bằng cách nào, Response trả về có cấu trúc ra sao và hệ thống cần bảo vệ những điểm nào. Đó mới là nền tảng để xây dựng AJAX ổn định, dễ mở rộng và phù hợp với website thực tế.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

Chia sẻ nội dung đánh giá của bạn về AJAX GET và POST là gì? Cách gửi dữ liệu giữa JavaScript và Server
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !