Ajax trong wordpress

AJAX là gì?

Ajax là một công nghệ dựa trên JavaScript cho phép một trang web tìm nạp thông tin mới và tự trình bày mà không cần làm mới trang. Ý tưởng đằng sau Ajax là làm cho trang web phản ứng nhanh hơn và tương tác hơn từ quan điểm của người dùng.

Thông thường, một trang web để xem thông tin mới cần phải làm mới (refesh) trang. Ví dụ: khi bạn điền vào một biểu mẫu trực tuyến như mua sắm trực tuyến qua thẻ tín dụng, một số trang web cần bạn nhấp vào tiếp tục (next) để cho bạn biết nếu bạn điền vào một cái gì đó không chính xác. Tuy nhiên, với Ajax, biểu mẫu không chỉ có thể cho bạn biết nếu bạn điền sai một cái gì đó mà còn có thể cho bạn biết nếu bạn đã mua hàng trước đó hay nếu thẻ tín dụng của bạn đã hết hạn. Một ví dụ khác về Ajax hữu ích là xem bản đồ trực tuyến. Trước Ajax, Google Maps yêu cầu bạn nhấp vào mũi tên để điều hướng bản đồ của họ và trang phải tải lại để xem phần mới của bản đồ mà bạn quan tâm. Tuy nhiên, Google Maps hiện sử dụng sức mạnh của Ajax để tìm nạp các phần mới của bản đồ và "vẽ lại" trang nơi bản đồ di chuyển.

Nếu bạn đã biết về Ajax và muốn sử dụng nó trong một plugin bạn đang phát triển, hãy bỏ qua bài này và tới AJAX trong Plugins WordPress.

Ajax hoạt động như thế nào?

Công nghệ Ajax thực sự khá đơn giản để mô tả. Về cơ bản, lập trình viên web kết nối một liên kết (link), nút (button) hoặc một số loại yếu tố giao diện người dùng khác trên trang web với một chương trình JavaScript. Khi người dùng kích hoạt giao diện (nhấp vào liên kết, kéo chuột, v.v.), chương trình JavaScript sẽ gửi một số thông tin hoặc yêu cầu dữ liệu tới một URL trên máy chủ web. Tiếp theo, một chương trình trên máy chủ web (có thể cũng được tạo bởi lập trình viên web) xử lý yêu cầu và gửi lại phản hồi hoặc một số dữ liệu. Thông thường dữ liệu ở định dạng XML, nhưng thực tế không bắt buộc. Khi dữ liệu hoặc phản hồi đến trong trình duyệt, chương trình JavaScript sẽ nhận được thông báo "không đồng bộ", để nó có thể được xử lý hoặc hiển thị một cách thích hợp. Ngày nay, Ajax được hỗ trợ dưới một số hình thức bởi hầu hết các trình duyệt web trực quan (browser) (mặc dù chỉ khi người dùng bật JavaScript). Tất nhiên, giống như hầu hết JavaScript phức tạp, có sự khác biệt giữa cách trình duyệt triển khai JavaScript. Tuy nhiên, đây không phải là quá khó để vượt qua. Hạn chế thực sự duy nhất trên Ajax là URL bạn gửi thông tin phải có trên cùng một trang web với URL mà JavaScript xuất phát. Ngoài ra, việc sử dụng công nghệ chỉ giới hạn ở những gì bạn có thể tìm ra cách lập trình.

Ajax trong wordpress

Do tính đáp ứng của nó, công nghệ Ajax đang được tất cả các loại trang web chấp nhận - và WordPress cũng không ngoại lệ. Hiện tại, cốt lõi của WordPress chỉ sử dụng Ajax trong các màn hình quản trị. Chẳng hạn, Ajax được sử dụng để cập nhật tức thì khi bạn thực hiện kiểm duyệt nhận xét và khi bạn thêm và xóa các mục khỏi danh sách, chẳng hạn như danh mục, danh sách blog và bài đăng; Ajax cũng là công nghệ đằng sau chức năng tự động lưu trên màn hình chỉnh sửa bài và trang. Một số themes và plugin cũng sử dụng Ajax; chẳng hạn, một số plugin xếp hạng bài đăng sử dụng Ajax để lưu trữ xếp hạng của khách truy cập trong cơ sở dữ liệu và sau đó hiển thị xếp hạng trung bình được cập nhật.

Ví dụ minh họa

Ví dụ này sử dụng PHP để viết JavaScript của chúng tôi ở chân trang. Tập lệnh này sau đó kích hoạt yêu cầu AJAX khi trang được tải đầy đủ: (trong funcsions.php)

<php
add_action( 'admin_footer', 'dandev_action_javascript' ); 
//Viết JS ở phía dưới

function dandev_action_javascript() { ?>
<script type="text/javascript" >
	jQuery(document).ready(function($) {
		var data = {
			'action': 'dandev_action',
			'lovely': 1234
		};

		// Từ bản WordPress version 2.8 ajaxurl luôn luôn được xác định trong header admin và trỏ để admin-ajax.php
		jQuery.post(ajaxurl, data, function(response) {
			alert('Got this from the server: ' + response);
		});
	});
	</script> <?php
}

Sau đó, thiết lập một hàm PHP để xử lý yêu cầu AJAX như sau:

 <?php 

add_action( 'wp_ajax_dandev_action', 'dandev_action' );

function dandev_action() {
	global $wpdb; //đây là cách bạn có quyền truy cập vào cơ sở dữ liệu

	$lovely = intval( $_POST['lovely'] );

	$lovely += 100;

        echo $lovely;

	wp_die(); // điều này là cần thiết để chấm dứt ngay lập tức và trả lời thích hợp
}

Lưu ý cách giá trị của 'action' khóa 'dandev_action', được xác định trong JavaScript của chúng tôi ở trên, khớp với nửa sau của hành động 'wp_ajax_dandev_action' trong trình xử lý AJAX của WordPress bên dưới. Điều này là do nó được sử dụng để gọi hàm PHP phía máy chủ thông qua admin-ajax.php. Nếu một hành động không được chỉ định, admin-ajax.php sẽ thoát và trả về 0 trong quy trình.

Video học cùng dandev

Tham khảo thêm tại: https://codex.wordpress.org/AJAX