Sử dụng PJAX với Laravel
Bài đăng này đã không được cập nhật trong 3 năm
Hôm nay mình xin giới thiệu với các bạn về PJAX, một cái mình vừa mới được biết thông qua sự gợi ý của Master Ho 
)))))
- Với những bạn từng làm qua frame YII , chắc sẽ không lạ lẫm với PJAX. Đó là một plugin kết hợp giữa ajax và PushState. PushState cho phép chúng ta thay đổi một phần nội dung của trang mà không phải load toàn bộ trang đồng thời đường dẫn trên thanh location bar của trình duyệt cũng thay đổi theo và nó cũng có nghĩa là đường dẫn đó được lưu vào lịch sử trình duyệt của bạn.
- Một ví dụ sinh động cho các bạn trải nghiệm đây : https://pjax.herokuapp.com/.
- Khi sử dụng PushState khi bạn dùng nút back của trình duyệt trang cũng không cần load lại. Nhiêu đó cũng đủ để mọi người thấy được sự thuận tiện khi sử dụng PJAX thay cho các cách làm truyền thống trước đây rồi nhỉ. Sau đây mình xin đi vào nội dung chính của bài viết đó là triển khai một ứng dụng thực tế sử dụng Pjax trên frame Laravel ))))))
I. Chuẩn bị
Khá là nhiều nguồn cho cái pjax này, và chị google gợi ý cho mình một link như sau: https://cdnjs.com/libraries/jquery.pjax.
Ah nhớ là phải có jquery > 1.8 nữa nhé !
Khi làm việc trên laravel mình sử dụng gói của anh JacobBennett https://github.com/JacobBennett/pjax để thêm Middleware. Hướng dẫn của anh rất tường minh, cụ thể. Và lần mà mình tải cái này về có báo lỗi về phiên bản của dom-clawler )))), nên các bạn chú ý nếu nó có báo lỗi thì các bạn cứ cài đặt đúng phiên bản như nó thông báo nhé, nó sẽ nằm trong vendor/symphony/ sau khi mà các bạn tải về thành công, còn cái Middleware sẽ nằm trong \vendor\jacobbennett\pjax\src\Jacobbennet\Pjax\PjaxMiddleware. )))))
Sau khi tải xong cái pakage kia của anh Jacob bạn add thêm middleware PjaxMiddleware vào file Kernel.php
<?php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
protected $middleware = [
...
'JacobBennett\Pjax\PjaxMiddleware',
];
protected $routeMiddleware = [
...
];
}
II. Cài đặt
Ứng dụng mình xây dựng có 3 trang new, contact, wellcome con được extend từ trang base.
Trang base của mình như sau:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script type="text/javascript" src="{{asset('jquery.min.js')}}"></script>
<script type="text/javascript" src="{{asset('jquery.pjax.js')}}"></script>
<script type="text/javascript">
$(function(){
// pjax
$(document).pjax('a', '#body')
})
$(document).ready(function(){
// does current browser support PJAX
if ($.support.pjax) {
$.pjax.defaults.timeout = 2000; // time in milliseconds
}
});
</script>
</head>
<body id="body">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{url('/')}}">pjax Laravel 5 demo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home"><a href="{{url('/')}}">Home</a></li>
<li id="about"><a href="{{url('/about')}}">About</a></li>
<li id="contact"><a href="{{url('/contact')}}">Contact</a></li>
<li id="new"><a href="{{url('/new')}}">New</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script>
document.
getElementById("{{$active}}").className = "active";
</script>
@yield('body')
</body>
</html>
Chú ý vào đoạn pjax kia bạn có thể thấy. Mỗi lần bạn click vào thẻ <a> trên thanh nav thì thành phần có id là body sẽ được load lại và đường dẫn trên thanh location bar cũng sẽ thay đổi tương ứng.
III Kết thúc
Bản thân mình khi áp dụng pjax là vào công việc thay đổi nội dung của trang khi click vào các đường dẫn phân trang mà không cần phải load lại trang. Lúc đầu giải pháp đưa ra là sử dụng ajax để hiển thị nội dung của phần cần thay đổi mỗi khi click vào các item phân trang. Tuy nhiên đến khi bookmark thì nó lại lưu đường dẫn của cái trang hiện tại chứ không lưu cái đường dẫn trang mà mình mong muốn. Ví dụ mình đang ở trang page/1 giờ xử lý blah blah blah để sang page/2 thì ajax vẫn xử lý được để nội dung hiển thị ra như mong muốn, tuy nhiên bookmark thì nó lại lưu trang page/1 do đường dẫn không thay đổi nên phải chuyển hướng... Và Master Ho đã chỉ dẫn cho mình đến với Pjax thần thánh ))))) phải nói là nó sướng và nhẹ nhàng hơn nhiều khi sử dụng bố ajax huyền thoại. Bài viết này mình đi nhiều vào phần ứng dụng, chứ chưa giải thích được cơ chế hoạt động của nó, cũng như vì sao lại phải thêm cái middleware của anh Jacob vào thì nó mới hoạt động đúng như mình mong muốn (không thêm thì vẫn load lại trang bình thường), lý do là mình cũng chưa tìm hiểu sâu và cũng hạn chế trong kiến thức. Vì thế hy vọng với sự quan tâm của những bộ óc thiên tài, các bạn có thể giúp mình giải thích vài thắc mắc trên. Mình rất cảm ơn sự quan tâm của mọi người )))))
All rights reserved
