Misingi ya Kufanya Kazi na fetch katika AJAX

Wacha sasa tuangalie jinsi ya kupakia sehemu ya ukurasa kwa kutumia AJAX. Acha kwenye ukurasa wetu index.html iwe kuna div na kifungo (yaliyomo ya body yanaonyeshwa hapa):

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

Acha pia tuwe na ukurasa ajax.html, ambayo kuna aya tatu (bila vitambulisho vya ukurasa, aya tu):

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

Wacha tufanye ili kubofya kifungo kwenye ukurasa index.html kwenye div ipakie yaliyomo ya ukurasa ajax.html.

Ili kufanya hivyo kwa mara ya kwanza tupate viungo kwenye vipengele vyetu kwenye viambajengo:

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

Wacha tuweke kichujio cha kubofya kwenye kifungo:

button.addEventListener('click', function() {
	// hapa tutafanya ombi la AJAX
});

Wacha sasa tufanye ombi la AJAX. Kwa hili inatumika kitendo fetch, kinachopokea anwani ya ukurasa kama kigezo, yaliyomo ambayo tunataka kupata. Tutaonyesha anwani ya ukurasa ajax.html kwenye seva yetu:

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

Kwa matokeo yake fetch itarudisha ahadi. Jambo ni kwamba kuomba ukurasa kupitia AJAX - huu ni utendakazi usio na mfuatano, kwani itapita muda fulani, baada ya hapo ukurasa utatujibu.

Wacha tupate matokeo ya ahadi:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// jibu la seva liko kwenye kigezo response
	});
});

Wacha turahisishe, tukuondoe kigezo kisichohitajika:

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

Wacha turahisishe, tukitumia kitendakazi kisicho na mshale:

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

Wacha tuwasilishe kwa namna inayosomeka vyema:

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

Kwenye kigezo response kuna kitu ngumu cha kutosha cha tabaka la Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // kitu cha tabaka la Response
	});
});

Kitu hiki tutasoma kwa kina katika masomo yajayo, lakini kwa sasa tunahitaji jambo rahisi zaidi - kupata maandishi ya ukurasa uliombwa. Kwa hili kwenye kitu hiki kuna utendaji text. Utendaji huu, hata hivyo, haurudishi maandishi ya ukurasa, bali ahadi na maandishi yake:

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

Ili kufikia maandishi ya ukurasa, ni muhimu ahadi, iliyopatikana kutoka response.text, kusindika tena:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // maandishi ya ukurasa
		}
	);
});

Kwa hiyo, hatimaye tumepata maandishi ya ukurasa uliombwa na tunaweza, kwa mfano, kuiandika kwenye div yetu:

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

Kuna vibonye vitatu na div. Kwenye seva kuna kurasa tatu. Fanya ili kila kifungo kipakie kwenye div ukurasa unaofanana.

Acha kwenye seva kuwe na kurasa tano. Acha kubofya kwa mara ya kwanza kwenye kifungo kupakie ukurasa wa kwanza, kubofya kwa mara ya pili - wa pili, na kadhalika, hadi kurasa zikome.