Ngày càng có nhiều trang web dừng sử dụng cách chuyển đổi trang phản hồi yêu cầu cũ, trong đó mỗi chuyển đổi trang làm mới toàn bộ trang trong trình duyệt.
Thay vào đó, họ chỉ làm mới dữ liệu và bản thân trang không được tải lại.
Cách này có hiệu suất tốt hơn và nó cũng giúp trải nghiệm người dùng mượt mà hơn nhiều.

Bạn có thể thấy một ví dụ tuyệt vời trong github nơi bạn nhấp vào một trong các tệp.

Trong bài viết này tôi sẽ giải thích làm thế nào điều này đạt được từng bước.

Bản trình diễn của tôi


Yêu cầu:
Vì một số lý do, hầu hết tất cả các ví dụ tôi thấy trên internet về trò đùa này được sử dụng theo cách này hay cách khác.
Bài đăng này KHÔNG sử dụng bất kỳ thư viện của bên thứ ba nào ngoại trừ tập lệnh history.js cho các trình duyệt không hỗ trợ tính năng history.pushState . Tôi lấy kịch bản này từ github .


Bước 1 - xử lý các liên kết
Chúng tôi muốn rằng việc nhấn một liên kết sẽ kích hoạt chức năng JavaScript.
Bạn có thể làm điều đó theo nhiều cách.
Tôi đã làm nó như thế này:

var elements = document.getElementsByTagName('a');
var address;
for(var i=0; i<elements.length;i++){
	element=elements[i];
	address=element.getAttribute('href');
	if(address.substring(0,2)=="./"){ //inner links only
		element.setAttribute('onclick','goto("'+address+'",event)');
	}
}

 Nó sẽ đi qua tất cả các liên kết trong trang và sẽ đính kèm một lệnh gọi đến hàm goto (), nhưng nó sẽ thực hiện nó chỉ cho các liên kết trỏ đến các trang bên trong.
Hàm goto () lấy địa chỉ của trang và sự kiện nhấp chuột.
Bằng cách này, bạn viết cho bạn các thẻ liên kết như bình thường.


Bước 2 - ngăn chuyển hướng trang
Chúng tôi muốn rằng việc nhấn vào một liên kết sẽ không khiến trang web bị chuyển hướng, vì vậy chúng tôi cần ngăn chặn hành vi mặc định của sự kiện nhấp vào liên kết.
Đây là cách nó được thực hiện:

theEvent.preventDefault();

 Bước 3 - tải dữ liệu trong Ajax
Bây giờ chúng ta cần lấy dữ liệu sẽ được làm mới từ máy chủ.
Có những triển khai vô tận cho điều đó.
Đây là những gì tôi đã sử dụng.

function ajax(page){
	var xmlhttp;
	if (window.XMLHttpRequest)	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}
	else{// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			updateText(xmlhttp.responseText); //the method to be called when the data is fetched
		}
	}
	xmlhttp.open("GET","test.php?page="+page,true);
	xmlhttp.send();
}

 Tất nhiên bạn sẽ phải đưa dữ liệu lên máy chủ. Tôi đã sử dụng trong ví dụ của mình một trang php đơn giản nhận trang dưới dạng tham số, nhưng bạn cũng có thể sử dụng các tệp html tĩnh.


Bước 4 - cập nhật dữ liệu trang trong một div bên trong
Sau khi bạn nhận được dữ liệu từ máy chủ, bạn cần in nó trên màn hình.
Bạn có thể đơn giản như thế này:

document.getElementById('myDiv').innerHTML = theData;

Trong ví dụ của tôi, tôi đã sử dụng một hình ảnh động làm cho mọi thứ trở nên mát mẻ hơn một chút, tôi sẽ nói về điều đó sau.


Bước 5 - đẩy trang vào lịch sử
Trong chuyển đổi trang thông thường, địa chỉ trang mới được cập nhật trên thanh địa chỉ trình duyệt và nó cũng đi vào ngăn xếp lịch sử của trình duyệt.
Chúng tôi sẽ bắt chước hành vi này như thế này:

history.pushState('', pageTitle, pageAddress);

 Bước 6 - xử lý các hành động quay lại / chuyển tiếp lịch sử
Bây giờ chúng tôi đã đẩy trang giả mạo mới của chúng tôi vào ngăn xếp lịch sử, chúng tôi cũng cần phải chuẩn bị khi trang giả mạo này xuất hiện từ lịch sử.

window.onpopstate = function(event) {
	var currentPage = location.pathname;
	updateContent();
}

 Bước 7 - xử lý ánh xạ trang trong máy chủ của bạn cho các liên kết trực tiếp
Có lẽ bạn cũng nên chuẩn bị cho khả năng người dùng sẽ muốn truy cập trực tiếp vào các trang bên trong.
Bạn có thể đạt được điều này bằng cách ánh xạ đơn giản trong máy chủ web của bạn.


Tùy chọn - thêm hình động
Bạn có thể chọn thêm một số loại hình động, ví dụ đồng hồ trong khi dữ liệu được tải hoặc một loại hiệu ứng văn bản như tôi đã làm.
Điều này sẽ làm cho mọi thứ thậm chí mát hơn.
Tôi đã sử dụng một hình ảnh động gõ. Đây là cách tôi đã thực hiện nó:

function startAnimation(text){
	clearInterval(start);
	thediv.innerHTML="";
	thetext=text;

	if (document.getElementById||document.all){
		start=setInterval("animation()",20);
	}

}

function animation(){
	var oldLen = thediv.innerHTML.length;
	var finalLen = thetext.length;

	if(oldLen<finalLen){
		thediv.innerHTML=thetext.substring(0,oldLen+1);
	}
}

 Triển khai hiện có
Bạn nên biết rằng nếu bạn muốn, bạn chỉ có thể sử dụng một trong những ý nghĩa hiện có trên mạng.
Đây là cách thực hiện rất tuyệt vời của github .