Асосҳои кор бо fetch дар AJAX

Акнун биёед бубинем, ки чӣ тараф як қисми саҳифаро бо ёрии AJAX бор кунем. Бибард, ки дар саҳифаи мо index.html як див ва як тугма ҷойгир карда шуда бошад (дар ин ҷо мундариҷаи body нишон дода шудааст):

<div></div>
<button>click me</button>

Бибард, ки мо инчунин саҳифаи ajax.html дорем, ки дар он се абзас ҷойгир карда шудаанд (бегӯй тегҳои саҳифа, фақат абзасҳо):

<p>1</p>
<p>2</p>
<p>3</p>

Биёед ҳамин тавр кунем, ки бо пахш кардан ба тугма дар саҳифаи index.html ба див мундариҷаи саҳифаи ajax.html бор карда шавад.

Барои ин, аввал ба тағйирёбандаҳо ишораҳо ба унсурҳои мо ҳосил кунем:

let div    = document.querySelector('div');
let button = document.querySelector('button');

Биёед ба тугма муроҷиати клик ҷорӣ кунем:

button.addEventListener('click', function() {
	// дар ин ҷо мо дархости AJAX-ро иҷро хоҳем кард
});

Акнун биёед дархости AJAX-ро иҷро кунем. Барои ин функсияи fetch истифода мешавад, ки параметр суроғаи саҳифаеро мегирад, ки мо мехоҳем мундариҷаи онро ҳосил кунем. Суроғаи саҳифаи ajax.html-ро дар сервери мо муайян кунем:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

Бо натиҷаи худ fetch як ваъда (промис) бармегардонад. Масъала ин аст, ки дархости саҳифа тавассути AJAX - ин амалиёти асинхронӣ аст, зеро вақт мегузарад, пас аз он саҳифа ба мо ҷавоб медиҳад.

Биёед натиҷаи ваъдаро (promise) ҳосил кунем:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// ҷавоби сервер дар тағйирёбандаи response ҷойгир аст
	});
});

Содда кунем, бо рафъ кардани тағйирёбандаи безарур:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

Содда кунем, бо истифода аз функсияи тир (arrow function):

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

Ба шакли беҳтар барои хондан пешкаш кунем:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

Дар тағйирёбандаи response объекти кофӣ мураккаб аз синфи Response ҷойгир аст:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // объекти синфи Response
	});
});

Мо ин объектро дар дарсҳои оянда амиқ омӯхта хоҳем шуд, ва ҳол он ки мо ба осонтарӣ ниёз дорем - матини саҳифаи дархостшударо гирем. Барои ин дар ин объект усули text мавҷуд аст. Ин усул, аммо, матни саҳифаро барнамегардонад, балки ваъда (promise) бо матни онро бармегардонад:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise-ро чоп мекунад
		}
	);
});

Барои расидан ба матни саҳифа, зарур аст ки ваъдаеро (promise), ки аз response.text гирифта шудааст, боз як маротиба коркард кунем:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // матни саҳифа
		}
	);
});

Ҳамин тавр, мо ниҳоят матни саҳифаи дархостшударо гирифтем ва метавонем, масалан, онро ба диви мо нависем:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

Се тугма ва як див дода шудаанд. Дар сервер се саҳифа дода шудаанд. Ҳамин тавр созед, ки ҳар як аз тугмаҳо ба див саҳифаи мувофиқро бор кунад.

Бибард, ки дар сервер панҷ саҳифа мавҷуд аст. Бибард ки пахши аввал ба тугма саҳифаи аввалро бор кунад, пахши дуюм - саҳифаи дуюмро, ва ҳамин тавр идома ёбад, то саҳифаҳо тамом шаванд.