AJAX-da fetch bilen işlemegiň esaslary

Indi bolsa, bir sahypanyň bir bölegini AJAX arkaly nädip ýüklemek mümkinçiligine serediň. Sahypamyzda index.html bir div we bir düwmýanyň ýerleşdirilen bolsun (bu ýerde body-iň mazmuny görkezilýär):

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

Bizde ajax.html sahypasy hem bolsun, onda üç abzas (sahypa tegleri bolmaz, diňe abzaslar) ýerleşdirilen:

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

Geliň, index.html sahypasyndaky düwmýä basylanynda, ajax.html sahypasynyň mazmuny div-e ýüklenýändigi ýaly edeliň.

Bunun üçin, ilki bilen elementlerimize salgylary üýtgeýjänlere alyň:

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

Geliň düwmýä basylyş işleýjisini baglaýalyň:

button.addEventListener('click', function() {
	// bu ýerde AJAX haýyşyny ýerine ýetireris
});

Indi bolsa AJAX haýyşyny ýerine ýetireýliň. Bunun üçin fetch funksiýasy ulanylýar, aljak mazmuny sahypanyň salgysyny parametr hökmünde alýar. Serwerimizdeki ajax.html sahypasynyň salgysyny görkezeliň:

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

fetch öz netijesi hökmünde promise gaýtarar. Sebäbi AJAX arkaly sahypa haýyş etmek - bu asinkron amal, sebäbi sahypanyň bize jogap bermegi üçin käbir wagt geçer.

Geliň promisiň netijesini alalyň:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// serweriň jogaby 'response' üýtgeýjäninde ýatýar
	});
});

Gereksiz üýtgeýjäni aýryp, ýönekeýleşdireýliň:

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

Ok funksiýasyny ulanyp, ýönekeýleşdireýliň:

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

Has okap bolýan görnüşde ýerine ýetireýliň:

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

response üýtgeýjäninde Response klasynyň ýeterlik derejede çylşyrymly obýekti bar:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response klasynyň obýekti
	});
});

Bu obýekti gowrak indiki sapaklarda öwreneris, ýöne häzirki wagtda bize iň ýönekeýi - haýyş edilen sahypanyň tekstini almak gerek. Bunuň üçin bu obýektde text metody bar. Emma bu metod sahypanyň tekstini däl-de, onuň teksti bilen promisi gaýtarýar:

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

Sahypanyň teksti ýetmek üçin, response.text-den alynan promisi ýene bir gezek işlemek gerek:

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

Şeýlelik bilen, ahyrsoňy haýyş edilen sahypanyň tekstini aldyk we, meselem, ony div-imize ýazyp bileris:

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

Üç düwmýe we bir div berlen. Serwerde üç sahypa berlen. Her bir düwmýäniň degişli sahypany dive ýüklemegini ýerine ýetiriň.

Serwerde bäş sahypa bolsun. Düwmýäniň birinji basylyşy birinji sahypany, ikinji basylyşy ikinji sahypany, we ş.m. sahypalar gutarýança ýüklesin.