AJAX-ում fetch-ի հետ աշխատանքի հիմունքներ

Հիմա եկեք նայենք, թե ինչպես կարելի է էջի մի մասը բեռնել օգտագործելով AJAX: Ենթադրենք, որ մեր index.html էջի վրա տեղադրված է div և կոճակ (այստեղ ցուցադրված է body-ի պարունակությունը):

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

Ենթադրենք, որ մենք ունենք նաև ajax.html էջ, որի վրա տեղադրված են երեք պարբերություն (առանց էջի թեգերի, պարզապես պարբերություններ):

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

Եկեք անենք, որ index.html էջի կոճակի վրա կտտացնելիս div-ի մեջ բեռնվի 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-ի միջոցով ասինխրոն գործողություն է, քանի որ որոշ ժամանակ կանցնի, որից հետո էջը մեզ կպատասխանի:

Եկեք ստացենք պրոմիսի արդյունքը:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// սերվերի պատասխանը գտնվում է response փոփոխականում
	});
});

Պարզեցնենք՝ ազատվելով ավելորդ փոփոխականից:

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

Պարզեցնենք՝ օգտագործելով սլաքային ֆունկցիա:

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 մեթոդը: Սակայն այս մեթոդը վերադարձնում է ոչ թե էջի տեքստը, այլ դրա տեքստով պրոմիս:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // կցուցադրի Promise
		}
	);
});

Էջի տեքստին հասնելու համար անհրաժեշտ է response.text-ից ստացված պրոմիսը ևս մեկ անգամ մշակել:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // էջի տեքստը
		}
	);
});

Այսպիսով, մենք վերջապես ստացանք հարցված էջի տեքստը և կարող ենք, օրինակ, գրել այն մեր div-ի մեջ:

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

Տրված են երեք կոճակ և div: Սերվերում տրված են երեք էջ: Ապահովեք, որ կոճակներից յուրաքանչյուրը div-ի մեջ բեռնի համապատասխան էջը:

Ենթադրենք, որ սերվերում կա հինգ էջ: Թող կոճակի վրա առաջին կտտոցը բեռնի առաջին էջը, երկրորդ կտտոցը՝ երկրորդը, և այդպես շարունակ, մինչև էջերը չվերջանան: