TÌM HIỂU VỀ AJAX TRONG PHP

Tổng quan
admin
11-12-2022

AJAX là công cụ giúp cập nhật các phần của trang web mà không cần tải lại toàn bộ trang. Đây là một tính năng hữu ích giúp người dùng có trải nghiệm tốt hơn khi sử dụng web. Sử dụng AJAX trong việc tạo trang web sẽ giúp lập trình viên tạo ra các trang web động với hiệu suất cao hơn. Trong bài viết dưới đây, chúng ta sẽ tìm hiểu về AJAX và cách làm việc với AJAX trong PHP.

AJAX là gì?

AJAX (Asynchronous JavaScript and XML) là nhóm công nghệ với các kỹ thuật cao có thể tạo ra các ứng dụng website nhanh chóng và mượt mà hơn.

Nó cho phép bạn tìm nạp nội dung không đồng bộ từ máy chủ back-end mà không cần phải làm mới toàn bộ trang.

Ví dụ: AJAX cho phép bạn cập nhật nội dung của một ứng dụng như thông tin cá nhân, thông tin xã hội, thông báo, tin nhắn…bằng cách xây dựng những trang web riêng cho mỗi phần.

Ngoài ra, AJAX còn được sử dụng như một công cụ giúp xây dựng giao diện tải đầy đủ thông tin mà không cần tải lại trang web. Chỉ cần nhấp chọn tab, các nội dung tương ứng từ máy chủ phụ trợ sẽ được hiển thị mà không cần làm mới trình duyệt.

Cách AJAX hoạt động tổng thể:

cach ohat dong cua ajax

Quy trình hoạt động của AJAX:

  1. Mở trang web và yêu cầu đồng bộ.
  2. Sử dụng DOM để hiển thị dữ liệu động và tạo tương tác với máy chủ.
  3. Máy chủ đáp lại yêu cầu AJAX bằng cách trả về XML để trao trổi và JSON/HTML để xử lý dữ liệu nội bộ.
  4. Dữ liệu phản hồi được phân tích cú pháp bằng JavaScript.
  5. Hoàn thành phân tích dữ liệu và hiển thị tại DOM.

Tại sao lại sử dụng AJAX?

AJAX là một trong những công cụ giúp chúng ta đem lại cho người dùng trải nghiệm tốt hơn. Khi cần một thay đổi nhỏ thì sẽ không cần load lại cả trang web, làm trang web phải tải lại nhiều thứ không cần thiết.

Những lợi ích mà AJAX mang lại:

  • AJAX được sử dụng để thực hiện một callback. Được dùng để thực hiện việc truy xuất dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại toàn bộ trang web. Với những server nhỏ thì việc này cũng tiết kiệm được băng thông cho chúng ta hơn.
  • Cần gì thì chỉ gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thông tin chứ không load cả trang. Bằng cách này thì có thể giảm thiểu được tốc độ tải trang giúp người dùng có trải nghiệm tốt hơn.
  • Trang web bạn tạo ra cũng sẽ đa dạng và động hơn.

Ví dụ một ứng dụng đơn giản sử dụng ajax bằng jQuery

Jquery cung cấp một số method để thực hiện ajax. Chúng ta có thể yêu cầu các dữ liệu, HTML, XML và JSON từ server sử dụng giao thức HTTP là GET và POST.

load()

Phương thức load() lấy dữ liệu từ server và trả dữ liệu cho phần tử được chọn.

Cú pháp:

$(selector).load(URL,data,callback);Code language: JavaScript (javascript)
  • URL: mà bạn muốn lấy dữ liệu.
  • Data: cặp key/value gửi đi cùng với yêu cầu.
  • Callback: tên của hàm sẽ được thực thi sau khi phương thức load hoàn thành.

Ví dụ : Ta có file demo.html

<h2>TopDev is Awesome!</h2> 

<p id="p1">This is some text in a paragraph.</p>

Load nội dung của file “demo.html” vào trong một div với id = div-1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.14.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div-1").load("demo.html");
    });
});
</script>
</head>
<body>

<div id="div-1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>
Code language: HTML, XML (xml)

Post trong JQuery

Có tác dụng lấy dữ liệu từ server bằng phương thức HTTP POST REQUEST

Cú pháp:

$(selector).post(URL,data,function(data,status,xhr),dataType)Code language: JavaScript (javascript)
  • url: required , đường dẫn đến file cần lấy thông tin
  • data: không bắt buộc ,là một đối tượng object gồm các key : value sẽ gửi lên server
  • function(data, status , xhr): là function sẽ xử lý khi thực hiện thành công với các parameters:
    • data : bao gồm các dữ liệu trả về từ request
    • status : gồm trạng thái request (“success” , “notmodified” , “error” , “timeout” , or “parsererror”)
    • xhr : gồm các đối tượng XMLHttpRequest
  • dataType: là dạng dữ liệu trả về. (text, json, script, xml,html,jsonp )

Get trong Jquery

Là phương pháp lấy dữ liệu từ server bằng phương thức HTTP GET

Tương tự như phương thức Post , phương thức get có cú pháp là :

$.get(URL,data,function(data,status,xhr),dataType)Code language: JavaScript (javascript)

Tổng kết

Hy vọng qua bài viết này, bạn đã hiểu rõ hơn về AJAX cũng như cách sử dụng nó trong PHP và jQuery chi tiết nhất cho bạn. Nếu bạn còn bất kì câu hỏi nào về AJAX, hãy để lại bình luận ở bên dưới. CHÚC BẠN HỌC TỐT.

Trả lời

Email của bạn sẽ không được hiển thị công khai.