Ajax (programmalastırıw)

Ajax (sonday-aq AJAX; ingl. Asynchronous Javascript and XML − «asinxron JavaScript hám XML» yamasa “Asinxron JavaScript jetkerip beriw (x-fer)") — bul asinxron veb-qosımshalardı jaratıw ushın klient tárepte hár túrli veb-texnologiyalardı paydalanatuǵın veb-programmalastırıw metodlarınıń jıynaǵı. Ajax járdemi menen veb-qosımshalar serverden maǵlıwmatlardı asinxron túrde (fonda) bar bettiń displeyine hám háreketine kesent etpey jiberip hám shıǵarıp alıw imkaniyatına iye. Kórsetiw dárejesinen maǵlıwmatlar almasıw qabatın ajırata alıw arqalı Ajax veb-betlerge hám keńeytpe boyınsha veb-qosımshalarǵa pútkil betti qayta júklewdi talap etpesten kontentti dinamikalıq túrde ózgertiwge imkaniyat beredi. Ámeliyatta zamanagóy qosımshalar XML ornına JSON-dı paydalanadı.

Ajax − bul texnologiya emes, al programmalastırıw koncepciyası bolıp tabıladı. Informaciyanı belgilew hám stillew ushın HTML hám CSS penen birge paydalanıwı múmkin. Veb-betti JavaScript arqalı dinamikalıq túrde kórsetiw hám paydalanıwshıǵa jańa informaciya menen óz-ara baylanısta bolıwǵa imkaniyat beriw ushın ózgertiwge boladı. Ornatılǵan XMLHttpRequest obyekti veb-betlerde Ajax-tı orınlaw ushın paydalanadı, bul veb-saytlarǵa betti jańalamay ekranǵa kontentti júklewge imkaniyat beredi. Ajax jańa texnologiya emes, jańa tilde emes. Onıń ornına, bul jańa usıl menen qollanılatuǵın qollanıwdaǵı texnologiyalar.

Tariyxı

1990 jıllardıń basınan ortasına shekem kóplegen veb-saytlar HTML betlerine tiykarlanǵan. Hárbir paydalanıwshı háreketi serverden júklenetuǵın tolıq jańa betti talap etti. Bul process ónimsiz edi, bul paydalanıwshı tájiriybesinen kórinedi: barlıq bettiń kontenti joǵalıp ketti, sonnan keyin jańa bet payda boldı. Brauzer tolıq emes ózgertiwge baylanıslı betti qayta júklegen sayın, informaciyanıń bir bólegi ǵana ózgerse de, barlıq kontentti qayta jiberiwge tuwra keldi. Bul serverge qosımsha júkleme túsirip, ótkiziw qábiletliliginiń effektivligin sheklewshi faktorına aylandırdı.

1996 jılı iframe tegi Internet Explorer arqalı engizildi; obyekt elementi sıyaqlı ol veb-bettiń bir bólegin asinxron túrde júkley aladı. 1998 jılı Microsoft Outlook Web Access toparı XMLHttpRequest skript obyektiniń artındaǵı koncepciyasın tayarladı. Ol 1999 jılı martta Internet Explorer 5.0 versiyası menen jetkizilgen MSXML kitapxanasınıń ekinshi versiyasında XMLHTTP retinde payda boldı.

IE 5 te Windows XMLHTTP ActiveX basqarıwınıń funkcionallıǵın, keyinirek Mozilla Firefox, Safari, Opera, Google Chrome hám basqa brauzerler XMLHttpRequest JavaScript obyekti retinde ámelge asırdı. Microsoft korporaciyası Internet Explorer 7-degi original XMLHttpRequest modelin qabılladı. ActiveX versiyasına ele de Internet Explorer brauzerinde qollap-quwatlandı, biraq Microsoft Edge-de joq. Bul fonlıq HTTP sorawlarınıń hám asinxron veb-texnologiyalardıń utilitası Outlook Web Access (2000) hám Oddpost (2002) sıyaqlı keń kólemli onlayn qosımshalarda payda bola baslaǵanǵa shekem júdá túsiniksiz bolıp qaldı.

Google Gmail (2004) hám Google Maps (2005) járdemi menen standartlarǵa sáykes keletuǵın , kross keń kólemli Ajax brauzerde qolladı. 2004 jıl oktyabr ayında Kayak.com saytınıń ǵalabalıq beta-versiyası, sol waqıttaǵı baǵdarlamashılar “xml http nársesi” dep ataytuǵın elektron kommerciyanıń dáslepki keń kólemli qosımshalarınıń bir boldı. Bul veb-programma baǵdarlamashılardıń Ajax-qa degen qızıǵıwshılıǵın arttırdı.

AJAX terminin 2005 jılı 18-fevralda Djessi Djeyms Garret Google betlerinde qollanılatuǵın texnikalarǵa tiykarlanǵan Ajax: veb-qosımshalarǵa jańa kózqaras atlı maqalasında ǵalabalı túrde qollandı.

2006 jıl 5-aprelde Dúnyajúzlik Internet konsorciumı (W3C) rásmiy veb-standart jaratıw maqsetinde XMLHttpRequest obyekti ushın specifikaciyanıń birinshi proektin shıǵardı. XMLHttpRequest obyektiniń sońǵı proekti 2016 jıl 6 oktyabrde járiyalandı, hám XMLHttpRequest specifikaciyası endi ómir súriw standartı bolıp tabıladı.

Texnologiyalar

Ajax paydalanatuǵın qosımshaǵa qarsı veb-qosımshanıń ádettegi modeli

Ajax termini bettiń aǵımdaǵı jaǵdayına kesent etpey, fon rejiminde server menen baylanısatuǵın veb-programmanı ámelge asırıw ushın paydalanıwı múmkin veb-texnologiyalardıń keń toparın bildiredi. Ajax terminin kirgizgen maqalada, Djessi Djeyms Garret tómendegi texnologiyalar engizilgenin túsindirdi:

• Kórsetiwge arnalǵan HTML (yamasa XHTML) hám CSS
• Maǵlıwmatlardı dinamikalıq kórsetiw hám olar menen óz-ara tásir etiw ushın hújjet obyektiniń modeli (ingl. Document Object Model (DOM))
• Maǵlıwmatlar menen almasıw ushın JSON yamasa XML hám XML manipulyaciyası ushın XSLT
• Asinxron baylanısqa arnalǵan XMLHttpRequest obyekti
• Usı texnologiyalardı biriktiriw ushın JavaScript

Sonnan berli, biraq Ajax qosımshasında qollanılatuǵın texnologiyalarda hám Ajax termininiń anıqlamasında bir qatar ózgerisler boldı. XML endi maǵlıwmatlar almasıwın talap etpeydi, sonlıqtan XSLT  maǵlıwmatlardı qayta islew ushın kerek emes. JavaScript Object Notation (JSON) jiyi maǵlıwmatlar almasıw ushın alternativ format retinde paydalanıladı, biraq aldınnan formatlanǵan HTML yamasa ápiwayı tekst sıyaqlı basqa formatlardı da paydalanıwǵa boladı. Hár túrli ataqlı JavaScript kitapxanaları, sonıń ishinde JQuery, Ajax sorawların orınlawǵa járdemlesetuǵın abstrakciyalardı qamtıydı.

Mısallar

JavaScript mısalı

JavaScript tilinde jazılǵan GET metodın qollanatuǵın ápiwayı Ajax sorawına mısal.

get-ajax-data.js:

// Bul klient táreptegi skript.

// HTTP sorawın inicializaciyalaw.
let xhr = new XMLHttpRequest();
// sorawdı anıqlań
xhr.open('GET', 'send-ajax-data.php');

// Soraw jaǵdayınıń ózgerislerin baqlań.
xhr.onreadystatechange = function () {
	const DONE = 4; // ReadyState 4 sorawınıń orınlanǵanın bildiredi.
	const OK = 200; // jaǵday 200 - sátli qaytarıw.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // 'Bul shıǵıw.'
		} else {
			console.log('Error: ' + xhr.status); // Soraw waqtında qátelik júz berdi.
		}
	}
};

// Sorawdı send-ajax-data.php adresine jiberiń.
xhr.send(null);

send-ajax-data.php:

<?php
// Bul server táreptegi skript.

// Kontent tipin ornatıń.
header('Content-Type: text/plain');

// Maǵlıwmatlardı qaytarıp jiberiń.
echo "Bul shıǵıw.";
?>

Fetch mısalı

Fetch - bul jergilikli JavaScript API. Google baǵdarlamashılarınıń hújjetlerine sáykes, “Fetch eski XMLHttpRequest-ke qaraǵanda veb-sorawlar jaratıwdı hám juwaplardı qayta islewdi jeńilletedi”.

fetch('send-ajax-data.php')
    .then(data => console.log(data))
    .catch (error => console.log('Error:' + error));

ES7 async/await mısalı

async function doAjax1() {
    try {
        const res = await fetch('send-ajax-data.php');
        const data = await res.text();
        console.log(data);
    } catch (error) {
        console.log('Error:' + error);
    }
}

doAjax1();

Fetch JavaScript wádelerine súyenedi.

Fetch specifikaciyası Ajax-tan tómendegi zárúr tárepler menen ózgeshelenedi:

• Fetch() funkciyasınan qaytarılǵan wáde HTTP qáte jaǵdayında, hátte juwap HTTP 404 yamasa 500 bolsa da qabıllamaydı (prog. won't reject on HTTP error status). Onıń ornına, server zagolovkalar menen juwap bergende, wáde normal túrde sheshiledi (juwaptıń ok qásiyeti menen). Juwap 200–299 aralıǵında bolmasa, nadurıs mánisine ornatıladı hám ol tek tarmaq islemey qalǵanda yamasa sorawdı tamamlawǵa bir nárse tosqınlıq qılǵan jaǵdayda ǵana biykarlaydı.
• fetch() dizimge alıw maǵlıwmatlarınıń init opciyasın ornatpasańız kross-original cookie faylların jibermeydi (prog. won't send cross-origin cookies). (2018-jıl aprelden baslap: Ózgeshelik ádepki dizimge alıw maǵlıwmatlarınıń siyasatın birdey kelip shıǵıwǵa ózgertti. Firefox 61.0b13 versiyasınan baslap ózgerdi.)

Artıqmashılıqları

Ajax veb-programma ónimliligin hám paydalanıwshı tájiriybesin aytarlıqtay jaqsılaytuǵın bir neshe artıqmashılıqlardı usınadı. Server trafigin azaytıw hám tezlikti arttırıw arqalı Ajax zamanagóy veb-programmalastırıwda sheshiwshi rol atqaradı. Ajax-tıń basqa artıqmashılıǵı onıń maǵlıwmatlardı izlewdi talap etpesten veb-qosımshalardı kórsetiw imkaniyatı bolıp tabıladı, nátiyjesinde server trafigi azayadı. Bul optimallastırıw serverde de, klientte de juwap beriw waqtın azaytıp, paydalanıwshılardıń júklew ekranlarına shıdaw zárúrligin joq etedi.

Sonıń menen bir qatarda, Ajax asinxron maǵlıwmatlardı izlewge sorawlardı ónimli qayta islewge imkaniyat beretuǵın XmlHttpRequest paydalanıwdı jeńilletiw arqalı asinxron qayta islewdi jeńilletedi. Sonıń menen birge, kontenttiń dinamikalıq júkleniwi qosımshanıń ónimliligin aytarlıqtay arttıradı.

Sonday-aq, Ajax barlıq tiykarǵı veb-brauzerlerde keń qollawdı paydalanadı, sonıń ishinde Microsoft Internet Explorer 5 hám onnan joqarı versiyaları, Mozilla Firefox 1.0 hám onnan keyingi versiyaları, Opera 7.6 hám onnan joqarı versiyaları hám Apple Safari 1.2 hám onnan joqarı versiyaları.

Sırtqı siltemeler

• [1] Ajax: A New Approach to Web applications - Article that coined the Ajax term and Q&A
• Ajax (programming) at Curlie
• Ajax Tutorial with GET, POST, text and XML examples.