Chắc hẳn bạn đã nghe qua về AJAX là gì ? nhưng lại không hiểu nó là gì, vai trò của nó hay cách vận hàng của AJAX như thế nào thì bài viết này chính là dành cho bạn đấy.Hãy cùng chúng tôi đi tìm hiểu giải đáp những thắc mắc của bạn ngay sau đây nhé!
Nội dung chính
AJAX là gì?
AJAX là chữ viết tắt của Asynchronous Javascript and XML. AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần nhỏ của trang web, hoàn toàn không cần phải load lại toàn bộ trang.
Xem thêm : Domain là gì ? Domain hoạt động như thế nào?
Ajax được viết bằng Javascript chạy trên client, nghĩa là mỗi browser sẽ chạy độc lập hoàn toàn mà không làm ảnh hưởng lẫn nhau.
Về mặt kỹ thuật, ajax đề cập đến việc sử dụng các đối tượng của XmlHttpRequest để tương tác với máy chủ web thông qua Javascript.
Lịch sử phát triển Ajax
Ở giai đoạn đầu khi website mới ra mắt, hầu hết các thao tác của người dùng đều khiến website phải tải lại từ máy chủ. Việc này kéo dài cho đến giữa những năm 1990 khi thiết kế website dựa vào công nghệ HTML là chủ yếu.
Việc làm này vừa phức tạp, kém hiệu quả, lại gây ra sự khó chịu cho người dùng. Hãy thử tưởng tượng, tất cả nội dung bạn đang thao tác đều biến mất, mặc dù trên thực tế thì chỉ có một phần nhỏ của nội dung ấy bị thay đổi.
Xem thêm : SSL là gì ? Những điều bạn cần biết về giao thức SSL
Tải lượng server cứ tăng lên, băng thông bị quá tải, gây ì ạch, chậm trễ cả hệ thống.
Đến năm 1998, nhóm phát triển của Outlook Web App đã phát triển thành phần XMLHTTP từ đoạn script gửi từ máy chủ. Năm 1999, Microsoft đã ứng dụng công nghệ iframe nhằm cập nhật bản tin, báo giá cổ phiếu trên trang mặc định của IE.
Điều này đặt nền móng cho việc sử dụng XMLHTTP ActiveX trong các trình duyệt nổi tiếng như Opera, Safari, Mozilla.
Từ thập niên 2000, Google cho triển khai rộng rãi các ứng dụng sử dụng Ajax, ví dụ như Gmail (2004), Google Maps (2005).
Khái niệm Ajax được nhiều người biết đến năm 2005 trong một bài viết của Jesse James Garrett – Nhà thiết kế trải nghiệm người dùng (co-founder của công ty tư vấn thiết kế và chiến lược Adaptive Path).
Năm 2006, tổ chức W3C – Tổ chức lập ra các tiêu chuẩn cho Internet – phát hành dự thảo đặc tả đầu tiên cho XMLHTTPRequest. Đến năm 2014, dự thảo này đã phát hành bản mới nhất.
Tại sao lại sử dụng AJAX?
AJAX là gì? Đây 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 nhanh, mượt, tốt hơn.
Khi cần có một thay đổi nhỏ thì bạn sẽ không cần load lại cả trang web, làm cho trang web phải tải lại nhiều thứ không cần thiết.
Những lợi ích AJAX mang lại:
- AJAX là gì? sử dụng để thực hiện một callback, dùng để thực hiện việc truy xuất dữ liệu hoặc lưu trữ dữ liệu mà bạn không cần phải reload lại trang web. Với những server nhỏ thì việc này giúp tiết kiệm được băng thông cho ta trải nghiệm tốt hơn.
- Khi bạn cần gì thì chỉ việc gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thông tin chứ sẽ không phải load cả trang. Bằng cách này sẽ giúp giảm thiểu được tốc độ tải trang cho người dùng có trải nghiệm tốt hơn.
- Trang web bạn tạo ra sẽ đa dạng hơn.
AJAX jQuery là gì?
AJAX jQuery là jQuery cung cấp các phương thức để thực hiện những chức năng của AJAX. Nhờ thế, người dùng có thể thực hiện yêu cầu text, HTML, XML hay JSON từ máy chủ dùng giao thức HTTP GET, HTTP POST. Hoặc người dùng cũng dễ dàng lấy dữ liệu từ bên ngoài vào trong phần tử được chọn.
Hàm $.ajax() của JQuery dùng để thực hiện các yêu cầu HTTP bất đồng bộ. Hàm này đã tồn tại từ phiên bản 1.0. Ngoài ra, 3 hàm $.get(), $.post(), $.load() cũng được xem là một hình thức của hàm $.ajax() có sẵn các thiết lập. Dưới đây là cấu trúc cú pháp của hàm $.ajax():
$.ajax(url[, options])
$.ajax([options])
Trong đó:
URL: Là chuỗi chứa URL sử dụng AJAX để thực hiện các request.
Option: Là một chủ đề (Object) thuần và chúng chứa những thiết lập cho request AJAX.
Với phương thức hàm $.ajax() đầu tiên, request AJAX dùng tham số URL, kết hợp cùng các cài đặt đã được chỉ định trong Option.
Với dạng phương thức hàm $.ajax() thứ 2, tham số Option chỉ định URL. Hoặc URL cũng có thể được lược bỏ khi request gửi đến đường dẫn của trang hiện tại.
Cách thức hoạt động của AJAX
- Từ trình duyệt của client, có một sự kiện để ta gọi ajax. Khi đó javascript sẽ tạo nên một đối tượng là XMLHttpRequest. Đối tượng này sẽ gửi một request đến server
- Khi server nhận được HttpRequest sẽ xử lý request và trả về response cho web.
- Sau khi nhận được một response từ server, Javascript sẽ nhanh chóng xử lý và cập nhật vào trang web cho chúng ta.
Các phương thức cơ bản của AJAX jQuery là gì?
Thực tế, Ajax jQuery hay còn gọi là AJAX trong PHP tồn tại nhiều phương thức khác nhau. Trong phạm vi chia sẻ của bài viết, Hosting Việt sẽ giới thiệu 3 phương thức cơ bản nhất:
- Phương thức jquery load () jQuery AJAX
Đây là phương thức tải dữ liệu (load) từ máy chủ, sau đó, nó trả lại dữ liệu cho phần tử đã chọn.
Cú pháp như sau:
$(selector).load(URL,data,callback);
Trong đó:
– URL: Đây là đường dẫn muốn lấy dữ liệu.
– Data: Cặp thông tin K.e_y/value đã gửi cùng với request.
– Callback: Đây là tên của hàm được thực thi sau khi hoàn thành phương thức tải dữ liệu.
Ví dụ: File nội dung demo_test.txt như sau:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id=”p1″>This is some text in a paragraph.</p>
Tải nội dung file “demo_test.txt“ vào một div có id = div1. Câu lệnh như sau:
<!DOCTYPE html>
<html>
<head>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).load(“demo_test.txt”);
});
});
</head>
<body>
<div id=”div1″><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
- Phương thức Post () trong JQuery AJAX
Phương thức này thực hiện vai trò lấy dữ liệu từ máy chủ thông qua HTTP POST REQUEST.
Cú pháp:
$(selector).post(URL,data,function(data,status,xhr),dataType)
Trong đó:
– URL: Thông tin này bắt buộc. Nó chính là đường dẫn đến tệp tin cần lấy thông tin.
– Data: Thông tin này không bắt buộc. Đây là đối tượng object chứa K.e_y và value sẽ gửi đến máy chủ.
– Function (data, status, xhr): Đây là chức năng xử lý sau khi thực hiện thành công parameters.
+ Data: Là các dữ liệu trả về từ yêu cầu.
+ Status: Là trạng thái của yêu cầu. Nó gồm các trạng thái như “success”, “notmodified”, “error”, “timeout”, “parsererror”).
+ XHR: Là đối tượng XMLHttpRequest
Ví dụ : File “demo_test_post.asp“ như sau
<%
dim fname,city
fname=Request.Form(“name”)
city=Request.Form(“city”)
Response.Write(“Dear ” & fname & “. “)
Response.Write(“Hope you live well in ” & city & “.”)
%>
<!DOCTYPE html>
<html>
<head>
$(document).ready(function(){
$(“button”).click(function(){
$.post(“demo_test_post.asp”,
{
name: “Donald Duck”,
city: “Duckburg”
},
function(data,status){
alert(“Data: ” + data + “nStatus: ” + status);
});
});
});
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
– Tham số thứ nhất của $ .post (): URL nhận request (“demo_test_post.asp).
– Tham số data: Gửi thông tin về name, city bằng phương thức post. Cụ thể, trang “demo_test_post.asp” có nhiệm vụ đọc dữ liệu, xử lý và trả về kết quả.
– Tiếp theo là Function call back chứa 2 tham số. Đầu tiên là tham số callback lưu các nội dung của trang yêu cầu. Kế đến, tham số thứ 2 sẽ giữ trạng thái của request sau khi nó được trả về là success.
- Phương thức Get () trong Jquery Ajax
Phương thức này có nhiệm vụ lấy dữ liệu từ máy chủ thông qua HTTP GET
Cú pháp của phương thức:
$.get(URL,data,function(data,status,xhr),dataType)
Ví dụ :
<!DOCTYPE html>
<html>
<head>
$(document).ready(function(){
$(“button”).click(function(){
$.get(“demo_test.asp”, function(data, status){
alert(“Data: ” + data + “nStatus: ” + status);
});
});
});
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>
Tham số đầu tiên của $ .get () chính là đường dẫn URL file nhận request (trong ví dụ này là “demo_test.asp”).
Kế tiếp là một function call back gồm 2 tham số:
– Data: Là tham số lưu các nội dung của trang yêu cầu
- Status: Trạng thái của yêu cầu sau khi nó được trả về status là success.
Xử lý lỗi AJAX khi dùng WPML
Khi làm việc chung với WordPress và WPML để thực hiện xử lý đa ngôn ngữ cho website, có thể bạn sẽ dùng AJAX để tải bài theo mỗi ngôn ngữ. Trong trường hợp, bạn muốn hiển thị 5 bài mới nhất trong WordPress và dùng cú pháp sau, thì WPML sẽ xử lý trong câu Query để thực hiện yêu cầu.
<?php
$news_lastest = new WP_Query([
‘post_type’ => ‘post’,
‘posts_per_page’ => 5,
‘post_status’ => ‘publish’
]);
Câu lệnh:
jQuery.post( ‘/wp-admin/admin-ajax.php’, {
action: ‘get-news-lastest’,
}, function( data) {
})
Câu lệnh xử lý tại máy chủ:
<?php
add_action( ‘wp_ajax_get-news-lastest’, ‘wp_ajax_get_news_lastest_func’ );
add_action( ‘wp_ajax_get-news-lastest’, ‘wp_ajax_get_news_lastest_func’ );
function wp_ajax_get_news_lastest_func() {
if( isset( $_POST[‘action’] )
&& $_POST[‘action’] == ‘get-news-lastest’
) {
$data_return = [];
$news_lastest = new WP_Query([
‘post_type’ => ‘post’,
‘posts_per_page’ => 5,
‘post_status’ => ‘publish’
]);
if( $news_lastest->have_posts() ) {
while ($news_lastest->have_posts() ) {
$news_lastest->the_post();
$row = new \Stdclass;
$row->name = get_the_title();
$row->link = get_the_permalink();
$data_return[] = $row;
}
wp_reset_postdata();
wp_send_json_success( $data_return );
}
}
wp_send_json_error();
}
Đoạn mã như sau:
jQuery.post( ‘/wp-admin/admin-ajax.php’, {
action: ‘get-news-lastest’,
lang: ‘lang code hiện tại’
}, function( data) {
})
Như vậy bài viết trên chúng tôi đã giới thiệu cho bạn AJAX là gì ?, lịch sử hình thành, tại sao ta nên sử dụng nó và cách thức hoạt động của AJAX. Mong bài viết này của chúng tôi sẽ hữu dụng cho bạn.
