Người Viết : ViKiMi Editor

Trong phần này chúng ta sẽ tiếp tục thực hiện gọi xử lý của Server với Ajax. Nhưng sẽ đặc biệt hơn vì chúng sẽ gọi một Action từ Server, Action này sẽ thực hiện những công việc mà chúng ta mong muốn. Làm việc với WordPress thông qua sử dụng Ajax để cập nhật thông tin bài viết có được, sẽ làm cho trang Web được load từng phần với tốc độ cao hơn. Action sẽ được định nghĩa tại file xử lý hàm chung là function.php.
Tất nhiên sẽ khác hơn những cách xử lý thông thường vì lần này chúng ta sẽ xử lý trong một CSM chứ không chỉ đơn thuần là xử lý với một ngôn ngữ lập trình thuần tuý. Trong một CMS như WordPress thì có rất nhiều định nghĩa được nhà phát triển WordPress đã định nghĩa trong CMS. Do đó, các xử lý với WordPress cũng sẽ khác hơn và bạn phải tuân thủ quy định do nhà phát triển WordPress đưa ra.
Việc lấy thông tin của bài viết trong wordpress, chúng ta sẽ thực hiện các công việc chung như sau :
+ Tạo một file Javascript có nội dung như bên dưới, dùng để gọi 1 action sẽ được chúng ta định nghĩa thêm vào trong file Function.php của WORDPRESS : action=testfirst
xhttp.open("POST", urlToajax+ "?action=testfirst", true);
Tất nhiên file function.php của WordPress sẽ nằm trên Server.
+ Trong file function.php của WordPress chúng ta sẽ thực hiện các công việc như sau :
( Công Viêc a )
Vì rằng với WordPress, chúng có thể đăng kí một FILE xử lý Javascript tại function.php ; Đăng kí này của chúng ta vào các Hook trong WordPress, nhờ cách đăng kí này nên bảo mật sẽ an toàn hơn.
………………
wp_register_script('own_ajax_js', wp_normalize_path(get_template_directory_uri()).'/js/Code_ajaxjs.js', null, null, true);
wp_enqueue_script('own_ajax_js');
………………
LƯU Ý : Nhờ Hàm wp_localize_script chúng ta sẽ có thể lấy về địa chỉ File admin-ajax.php; WordPress sẽ gửi địa chỉ File admin-ajax.php tới Javascript để chúng ta có thể tiếp tục xử lý.
wp_localize_script(
'own_ajax_js',
'own_ajax_js_S',
array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax_nonce')
)
);
( Công Viêc b )
Thực hiện định nghĩa một Action, và Action này sẽ được đăng kí vào file admin-ajax.php; Với định nghĩa này chúng ta có thể gọi Action này với AJAX. Action này là một xử lý trên Server. Action sẽ có tên là getPostsNews.
add_action('wp_ajax_getPostsNews', __NAMESPACE__ .'\\getPOSTS' );
add_action('wp_ajax_nopriv_getPostsNews', __NAMESPACE__ .'\\ getPOSTS');
Khi thực hiện gọi Action getPostsNews thì chúng thấy rằng Function getPOSTS() sẽ được thực hiện.
+ Trong file HTML chúng ta sẽ thực hiện công việc :
Tạo một Button Hiển thị các nội dung các bài POST, khi button được Click thì sẽ thực hiện gọi hàm loadPosts() trong file Javascript. Hàm này sẽ giúp chúng ta gọi xử lý trên SERVER.
MÃ CODE TRONG FILE HTML
<div style="display: block;" id="show_Post">
<button type="button" onclick="loadPosts()">Hiển Thị Các Nội Dung Posts (/Tổng số 20 bài)</button>
</div>
MÃ CODE TRONG FILE FUNCTION.PHP CỦA WORDPRESS
/*
* Đoạn code để đăng kí file javascript cho xử lý Ajax
* Hàm wp_localize_script dùng lấy về một
* mảng trong đó có địa chỉ file admin-ajax.php
*
*/
/*
* Hàm wp_localize_script
* Nhờ vào xử lý này chúng ta có thể lấy
* địa chỉ file admin-ajax.php tại file JS
* bằng cách gọi own_ajax_js_S.ajaxurl
*/
function ajax_js(){
wp_register_script('own_ajax_js', wp_normalize_path(get_template_directory_uri()).'/js/Code_ajaxjs.js', null, null, true);
wp_enqueue_script('own_ajax_js');
wp_localize_script(
'own_ajax_js',
'own_ajax_js_S',
array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax_nonce')
)
);
}
add_action('wp_enqueue_scripts',__NAMESPACE__ .'\\ajax_js');
/*
* Đoạn code để đăng kí Action sẽ được gọi bởi Ajax
* Action này sẽ được đăng kí tại file admin-ajax.php
* Action này được lập trình viên phát triển
* Tên Action : getPostsNews
*/
add_action( 'wp_ajax_getPostsNews', __NAMESPACE__ .'\\getPOSTS' );
add_action( 'wp_ajax_nopriv_getPostsNews', __NAMESPACE__ .'\\ getPOSTS');
function getPOSTS(){
echo '<h1 style="display: flex;color: black;text-indent: inherit;width: auto;">Ajax services for pages :</h1>';
echo '<br/>';
wp_reset_query();
$wp_query = new WP_Query( array('post_type' => 'post', 'post_status’' => 'publish','posts_per_page' => -1,'showposts'=>$_POST['total_posts']));
while ($wp_query->have_posts()) : $wp_query->the_post();
echo '<div style='.'"box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);float: left; background-color: white; padding: 2%;display: block;width: 100%;" '.' class='.'"frameporst"'.'>';
echo '<h3> <a href="'. get_the_permalink() .'">'. get_the_title() .'</a> </h3>';
echo '</div>';
echo '<br/>';
endwhile;
wp_reset_postdata();
exit("");
}
MÃ CODE LẬP TRÌNH FILE JAVASCRIPT Code_ajaxjs.js:
var urlToajax=own_ajax_js_S.ajaxurl;
function loadPosts() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("show_Post").innerHTML =
this.responseText;
}else{
//alert(this.status);
}
};
xhttp.open("POST", urlToajax+ "?action=getPostsNews", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("total_posts="+"20");
}
HÌNH ẢNH HIỂN THỊ KẾT QUẢ NHƯ SAU :
HÌNH ẢNH 1 :

HÌNH ẢNH 2 :

CHÚNG TA THẤY RẰNG, TRONG VIỆC XỬ LÝ VỚI AJAX CỦA MỘT CMS NHƯ WORDPRESS THÌ ĐÃ CÓ NHIỀU KHÁC BIỆT SO VỚI VIỆC XỬ LÝ CỦA NGÔN NGỮ PHP THUẦN TUÝ. CHÚNG TA PHẢI KHAI BÁO KHÁ NHIỀU THỨ VỚI CMS ĐỂ CÓ THỂ TRUYỀN DỮ LIỆU VÀ GỌI XỬ LÝ TRÊN SERVER. VỚI BẤT KỲ MỘT CMS HAY MỘT FRAMEWORK NÀO CŨNG THẾ, ĐỀU PHẢI CÓ NHỮNG KHAI BÁO PHÙ HỢP DÀNH CHO CHÚNG ĐỂ CÓ THỂ SỬ DỤNG AJAX.
VÌ VẬY, CHÚNG TA LUÔN CÓ NHỮNG KHAI BÁO VÀ XỬ LÝ CẦN THIẾT PHÙ HỢP CHO MỖI CMS VÀ FRAMEWORK.