AJAX деген не, jQuery деген не

8 Тамыз 2014

AJAX деген не, jQuery деген не және олардың сайт жасауда қандай маңызы бар деген сұрақтар сайт ашуды алдына мақсат қылып қойған адамдарды мазалауы мүмкін.

Өйткені, AJAX тың сайт жасауда қолданылуы артып келеді.

Себебі, ол біраз дүниені сайт бетіне сайтты қайта жүктемей-ақ орналастыруға мүмкіндік береді.

AJAX(Asynchronous Javascript And Xtml) -   деректерді сервермен фоновый режимде байланыстыратын веб-сайт жасайтын құрал.|

Бұл кезде пайдаланушы динамикалы түрде өзгеретін сайттың парақшасын сайтты түгелдей жүктемей-ақ ала алады.

jQuery-javascriptе жазылған және клиент жағында орындалатын фреймворк,DOM мен  AJAX арқылы javascripтің көптеген мүмкіндіктерін пайдаланатын библиотекасы бар.

jQuery ді қолдану үшін оның соңғы версиясын оның өз сайтынан жүктеп алу жеткілікті.

Бұл жерде біз тек jQuery библиотекасының тек бір функциясының, яғни тек $.ajax() тің жұмыс істеу принциптерін қарастырамыз.

Бұл функция деректерді серверге жіберумен ғана емес, одан келген жауаптарды да өңдей алады.Және осы процестердің бәрі фоновый режимде өтеді, яғни парақша қайтадан жүктелмейді.

Деректерді жіберу және қабылдау жүйесін икемге келтіру $.ajax() функциясын шақыру кезіндегі оның параметрлеріне байланысты.

$.ajax() қалай  жұмыс жасайды.

Осылардың ең негізгілеріне тоқталып кетейін.

Есте сақтайтын негізгі нәрселер төмендегідей.

1. Файлдар бәрі UTF-8 кодировкада сақталуы керек.

2. Скриптердің бәрі тек серверде орындалуы керек.

Енді практикаға көшейік.

Мысал: Секунд бойынша өзгеретін сайт парақшасының беті.

Яғни, басқа сыртқы файлдан AJAX арқылы осы сәттегі уақытты жүктеп отыратын файлдың жұмысының нәтижесін көре аламыз.

Іс жүзінде AJAX қалай жұмыс істейтінін көру үшін Notepad++ редакторында алдымен мынадай файлдарды жазып шығайық.

1. Негізгі PHP скрипт.


PHP коды жазылған файлдың атын "menajax2.php" деп атап  "testphp" папкасына сақтап жіберіңіз.Енді осы скрипті талдап өтейік.

1. Алтыншы жолға дейін сізге түсінікті болуы керек, себебі бұл әрбір HTML ден жасалған парақшаның өзгермейтін басты бөлігі.

Енді төмендегі алтыншы-жетінші жолдарға қараңыз.

Бұл жолда алдында мен жоғарыда көрсетіп кеткен www.jquery.com сайтынан сіздер өз компьютерлеріңе жүктеп алған оның библиотекасы көрсетілген. 

Еске ұстайтын жағдай-осы мысалдағы файлдардың бәрін бір папкада сақтау керек.

2. 9-жолда бос контейнер көрсетілген. Яғни, div тегіне (ДОМ - объекті модуль)  15ші жолдағы жоғарыда айтып кеткен сыртқы файл "menajax1.php" скрипті   $.ajax() функциясы арқылы орындалған соң, оның нәтижесі қойылады.

3. Яғни, 12-21 жолдарда сипатталған show() функциясы іске қосылғанда, ішіндегі $.ajax() орындалады.

 url -  орындалатын сыртқы файлдың аты,  cache - нәтижесі "кеш"ке жазылмайды дегенді білдіреді, success - егер сервер сәтті жауап берсе, келген жауап параметр түрінде функцияға беріліп, құрамы жоғарыда айтып өткен div  контейнеріне барып орналасады.

4. Енді 22-25 жолдар арасындағы скрипт үзіндісі былай дейді:документ, яғни парақшамыз түгел жүктеліп болған соң show() функциясы әр 1 секунд сайын орындалады.

 

Бұл жердегі jQueryдің  мына  $(document).ready(function(){} функциясы өз ішіндегі кодты документтің (парақшаның) объекті модулі (ДОМ) түгел жүктеліп біткен соң орындалуын талап етеді.Жай сөзбен айтқанда, парақша түгел браузер бетіне жайғасып болмай, jQuery функциялары орындалмайды.

5. Енді төмендегі суретте көрсетілген кодты тағы Notepad редакторына жазып, файлдың атын "menajax1.php" деп алдыңғы файл сықылды "testphp" папкасына салып қойыңыз.Бұл $.ajax() арқылы орындалғаннан шығатын нәтиже DIV контейнеріне жүктелетін скрипт коды, яғни  $.ajax() функциясының ішіндегі "menajax1.php" .

6. Енді уақытша хостингіміз болып отырған Денверді оның ярлыгы "StartDenwer" арқылы жұмысқа қосамыз.Сосын 2 DOS тың қара экрандары жүріп болған соң, қалаған браузеріміздің адрес теретін жолына былай деп жазып localhost/testphp/menajax2.php деп өзіміздің жаңа ғана жазған файлымызды шақырамыз. 

Сонымен тоқетері, "menajax2.php" скрипті орындалғанда төмендегідей секунд сайын өзгеріп тұратын нақты уақытты қөрсететін нәтиже шығады.

Яғни AJAX арқылы таймердің көмегімен динамикалық түрде өзгеріп тұратын парақша жасадық.

Бұл жердегі мақсат- мысал келтіріп оны орындау арқылы AJAX тың функциясының әзірге тек бір қырын сіздерге түсіндіріп беру еді.


Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер