Social update with AJAX

Hôm qua có người khen mình là cái blog này đẹp làm mình sướng đê mê, phê hơn con cá trê, trong lòng thấy no nê nhưng nhiều chỗ khác lại thấy tê tê ( chắc tại trời lạnh quá ).

Hùi mới đầu tui cũng có ý nghĩ là sẽ làm cái home page update toàn bộ các hoạt động của mình trên tất cả các mạng xã hội mình than gia… Như kiểu 1 cái life stream vậy. Lúc đó thì lại có 2 lựa chọn, 1 là tổng hợp tất cả và sắp xếp theo thứ tự thời gian, cái này thì dễ  theo dõi và đỡ tốn diện tích hơn, nhưng mà tui không biết làm trên hết là chắc chắn cái list đó sẽ toàn tumblr với youtube… Nên tui tính kiểu 2 đó là hiển thị theo từng dịch vụ, cái này thì tốn diện tích và load tất cả thì sẽ lâu. Nhưng đã có 1 giải pháp là dùng AJAX.

Thực ra nguyên lý của nó đơn giản chỉ là đọc RSS rồi hiển thị ra thôi. Đầu tiên ta viết 1 file social.php để đọc RSS rồi xuất ra HTML. Ta sẽ truyền tham số service = tên dịch vụ để lấy update của dịch vụ tương ứng.

Vì dụ nếu truy xuất

social.php?service=tumblr

Ta sẽ xử lý lấy tin từ tumblr

switch ($_REQUEST['service']) {
	case 'tumblr':
		$url = 'http://zinki.tumblr.com/rss';
		$xml = new SimpleXMLElement($url, NULL, TRUE);
		echo '<ul class="home-thumb">';
		foreach ( $xml->channel->item as $item ) {
			preg_match('/<img[^>]+src\s*=\s*"([^"]*)"[^>]*>/',$item->description,$img);
			if($img[1]) {
				echo '<li class="tumblr_thumb"><a href="' . $item->link . '"><img src="' . $img[1] . '" /></a></li>';
			} else {
			$content = strip_tags($item->description);
				echo '<li><a href="' . $item->link . '" target="_blank">' . $content . '</a></li>';
			}
		}
		echo '</ul>';
		break;
}

Đơn giản ta dùng hàm SimpleXMLElement để đọc file RSS sau đó lấy các node rồi hiển thị tùy ý dưới dạng HTML. Cái này thì tùy theo sở thích mà có các sắp xếp khác nhau.

Dùng regex để bắt link ảnh, nếu có ảnh ta sẽ chỉ hiện thumb thôi, còn nếu không có ảnh ta sẽ hiện text.

Vậy là lo xong phần dư liệu để hiển thị. Giờ ta bắt tay vào phần AJAX.

Trước tiên ta có thể thấy là cần 3 phần, 1 là cai navigation để đặt link gọi AJAX, 2 là phần để hiển thị content lấy được, và 1 phần nữa là để hiển thị loading trong khi chờ dữ liệu.

<div id="home-content">
	First
</div>
<div id="ajaxloader"></div>
<div id="home-nav">
	<a href="#" onClick="javascript:load('facebook')">Facebook</a>
	<a href="#" onClick="javascript:load('twitter')">Twitter</a>
	<a href="#" onClick="javascript:load('tumblr')">Tumblr</a>
</div>

Mô tả thì nó sẽ như thến ày. Cái #home-content sẽ hiển thị dữ liệu ban đầu, còn cái #ajaxloader sẽ ẩn đi. Đến khi click vào link gọi làm load thì #home-content trong khi chưa có dữ liệu mới sẽ lui về hậu trường nhường cho cái #ajaxloader, lúc này ta sẽ thấy cái ảnh lad. Khi load xong dữ liệu thì #home-content sẽ lại chạy ra và ajaxloader lại ẩn đi.

OK, ta bắt tay xào jquery cho nó

function load(service){
	$('div#home-content').slideUp('slow');
	$('div#ajaxloader').slideDown('slow');
	$('div#home-content').load('social.php?service='+service, function() {
		$('div#ajaxloader').slideUp('slow');
		$(this).slideDown('slow');
	});
}

Ở đây ta dùng slideUP để kéo height về băng 0 – lúc đó div sẽ ẩn đi, còn slideDown để kéo xuống lúc đó sẽ lại hiện ra Sau khi làm load thực hiện thì #ajaxloader sẽ slideUp và #home-content sẽ slideDown.

Đây chỉ là hướng dẫn cơ bản về hướng làm thôi, xin đừng copy&paste vì sẽ không chạy được đâu. Chúc mọi người vui vẻ dịp đầu năm.

Không có bài viết liên quan.