Bazat e punës me fetch në AJAX

Le të shohim tani se si të ngarkojmë pjesë të një faqeje me ndihmën e AJAX. Le të supozojmë se në faqen tonë index.html do të ketë një div dhe një buton (këtu tregohet përmbajtja e body):

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

Le të supozojmë gjithashtu se kemi faqen ajax.html, ku janë vendosur tre paragrafë (pa etiketat e faqes, thjesht paragrafë):

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

Le të bëjmë që me klikim në buton në faqen index.html në div të ngarkohet përmbajtja e faqes ajax.html.

Për këtë, së pari le t'i marrim në variabla referencat për elementët tanë:

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

Le të vendosim në buton një përgjigjës të klikimit:

button.addEventListener('click', function() {
	// këtu do të kryejmë kërkesën AJAX
});

Le të kryejmë tani kërkesën AJAX. Për këtë përdoret funksioni fetch, që merr si parametër adresën e faqes, përmbajtjen e së cilës duam të marrim. Le të tregojmë adresën e faqes ajax.html në serverin tonë:

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

Si rezultat, fetch do të kthejë një promise. Çështja është se kërkesa e një faqeje përmes AJAX - është një operacion asinkron, sepse do të kalojë një kohë, pas së cilës faqja do të na përgjigjet.

Le të marrim rezultatin e promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// përgjigjja e serverit qëndron në variablin response
	});
});

Le të thjeshtësojmë, duke hequr variablin e tepërt:

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

Le të thjeshtësojmë, duke përdorur funksionin shigjetor:

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

Le ta paraqesim në një formë më të lexueshme:

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

Në variablin response përmban një objekt mjaft kompleks të klasës Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // objekt i klasës Response
	});
});

Këtë objekt do ta studiojmë thellësisht në mësimet në vijim, por tani për tani na duhet gjëja më e thjeshtë - të marrim tekstin e faqes së kërkuar. Për këtë në këtë objekt ekziston metoda text. Kjo metodë, megjithatë, nuk kthen tekstin e faqes, por një promise me tekstin e saj:

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

Për të arritur tek teksti i faqes, është e nevojshme që promise, i marrë nga response.text, të përpunohet edhe një herë:

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

Pra, më në fund kemi marrë tekstin e faqes së kërkuar dhe mund, për shembull, ta shkruajmë atë në div-in tonë:

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

Janë dhënë tre butona dhe një div. Në server janë dhënë tre faqe. Bëni që secili prej butonave të ngarkojë në div faqen përkatëse.

Le të supozojmë se në server ka pesë faqe. Le të shtypja e parë në buton të ngarkojë faqen e parë, shtypja e dytë - të dytën, dhe kështu me radhë, derisa të mbarojnë faqet.