Ajax – kỹ thuật xịn xò kết hợp Javascript và PHP

1. Ajax là gì?

Ajax là kỹ thuật hiểu nôm na là load được nhiều trang cùng lúc mà lập trình cổ điển không cho phép. Các webserver chỉ cho phép load trang web ở một thời điểm chỉ được load 1 trang, giờ với kỹ thuật ajax bạn đang đứng ở trang A đồng thời cũng load được cả trang B,C,D,…

2. Ứng dụng của Ajax

Đầu tiên các bạn thấy facebook mỗi khi đang lướt face có thông báo sẽ hiện lên liền ngay biểu tượng thông báo không? Các tin nhắn cũng vậy ai nhắn cũng sẽ hiện ngay cả khi đang lướt face. Đó là kỹ thuật ajax đấy!

Tiếp theo là zing mp3, youtube,… khi các bạn đang nghe nhạc hay xem video bạn bấm chỗ bình luận để xem khi số bình luận quá nhiều thì trên điện thoại có nút xem nhiều bình luận khác khi bấm vào sẽ load được các bình luận khác trong khi video hay nhạc vẫn phát bình thường. Đó cũng là một ứng dụng của ajax đấy.

Bạn có đăng ký tài khoản google rồi phải không? Bạn có hỏi tại sao khi vừa nhập username chưa nhấn submit nữa mà nó báo tài khoản đã tồn tại không? Đó là một ứng dụng ajax khá hay ớ. Điều này là như sau: khi bạn vừa nhập xong, google sẽ lấy dữ liệu nhập và sử dụng ajax gọi đến trang kiểm tra, trang này lấy dữ liệu được truyền truy xuất đến cơ sở dữ liệu và báo tồn tại hay không trả về trang đăng ký lúc nãy. Líc này trang đó sẽ biết tồn tại hay không để báo cho người dùng.

3. Các hình thức sử dụng Ajax

Ajax sẽ gọi toàn trang web đây là điều cơ bản về Ajax. Ajax sẽ có 3 hình thức gọi:

• Gọi tên trang web. Ví dụ: trangB.php
• Gọi trang web có tham số sử dụng phương thức get. Phương thức get là tham số truyền trên url. Ví dụ: trangB.php?name=Nam
• Gọi trang web có tham số sử dụng phương thức post. Phương thức post là tham số được truyền qua form.

Các bạn xem rõ hơn về ajax tại đây nhé!

4. Cách sử dụng Ajax

4.1 Sử dụng với PHP

Bước 1: Download jquery https://code.jquery.com/jquery-3.5.1.min.js Bạn vào link và save file về nhé

Bước 2: Link file jquery vào html hoặc php của chúng ta

Bước 3: Ví dụ trang chúng ta là trang a.html có thẻ div id là noidung

<div id="noidung"> </div>

Từ trang a bạn muốn gọi trang b.html gắn nội dung trang b vào thẻ div trên

$document.ready( function(){
	$("#noidung").load("b.html");
});

//hoặc cách 2
$document.ready( function(){
	$.get("trangCanLayDuLieu", {thamsoURL}, function(data) {
    
    });
  
  //ví dụ
  $.get("b.html", {ten:"hao"}, function(data) {
    	$("#noidung").load(data);
    });
});

//hoặc cách 3
$document.ready( function(){
	$.post("trangCanLayDuLieu", {thamsoURL}, function(data) {
    
    });
  
  //ví dụ
  $.post("b.html", {ten:"hao"}, function(data) {
    	$("#noidung").load(data);
    });
});

4.2 Sử dụng với Laravel

Thêm link sau vào header view

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script type="text/javascript">
  $('.dashboard').on('click',function(){  // thay dashboard thành element điều hướng
  $value = $(this).val(); //lấy các giá trị form nếu xài post
  $.ajax({
    type: 'get',  //chỉnh phương thức cho phù hợp
    url: '{{ URL::to('') }}', //Link tới Route cần lấy dữ liệu
    data: {
      '': $value // gắn giá trị vào URL
      },
    success:function(data){
      $('.content-ajax').html(data); // thay thành chỗ đổ dữ liệu ra
    }
  });
})
  $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>

Kết Luận

Trên đây là phần chia sẻ của mình về AJAX. Cảm ơn các bạn đã đọc bài viết. Nếu có thắc mắc gì cứ để lại bình luận bên dưới nhé!