AJAX կամ Ajax- ը Ասինխրոն JavaScript և XML է: Այն օգտագործվում է սերվերի հետ տվյալների փոխանակման և վեբ էջի մի մասի թարմացման համար ՝ առանց հաճախորդի կողմից ամբողջ վեբ էջը վերբեռնելու: Տվյալների փոխանակման և թարմացման ընթացքում գոյություն ունեցող վեբ էջի ցուցադրումն ու վարքագիծն ընդհանրապես չեն խանգարում: Այաքսը համարվում է նաև տեխնոլոգիաների խումբ, որն ունի HTML, CSS, DOM և JavaScript, որոնք օգտագործվում են նշելու, ոճավորելու և օգտագործողին թույլ տալու փոխազդել վեբ էջի տեղեկատվության հետ: Այս հոդվածում այն ձեզ ցույց կտա, թե ինչպես գրել Ajax- ի քայլերով պարզ ծրագիր ՝ քայլ առ քայլ Notepad ++ - ի միջոցով: HTML- ի, DOM- ի, JavaScript- ի և տեղական վեբ սերվերի կամ հեռավոր վեբ սերվերի վերաբերյալ որոշ հիմնական գիտելիքներ են անհրաժեշտ: WampServer- ն օգտագործվում է այս հոդվածում `փորձարկման համար:
Քայլեր
Մեթոդ 1 2 -ից. Կոդավորում
Քայլ 1. Պատրաստեք Այաքս ծրագիր գրելու համար նկար:
Պահեք նկարը նույն թղթապանակում, որտեղ կպահեք ձեր HTML և տեքստային ֆայլերը, որոնք ցուցադրում են Ajax ծրագիրը: Այս հոդվածում «ProgramInAjax» գրացուցակը տեղադրված է «wamp» թղթապանակի ներսում ՝ «www» գրացուցակի տակ, որտեղ տեղադրել եք WampServer- ը:
Քայլ 2. Բացեք ցանկացած տեքստային խմբագիր:
Այս հոդվածում որպես տեքստային խմբագիր օգտագործվում է Notepad ++:
Քայլ 3. Տեքստային խմբագրիչում ստեղծեք նոր ֆայլ:
Մուտքագրեք հետևյալը.
Օ o Ու՞ր գնաց դեղին ծաղիկը:
Դուք կարող եք մուտքագրել այն, ինչ ցանկանում եք html taghere- ի ներսում:
Քայլ 4. Պահեք ֆայլը որպես տեքստային փաստաթուղթ ՝ «ajax-data.txt» անունով:
” Իրականում, դուք կարող եք անվանել ֆայլը ինչ ուզում եք, բայց համոզվեք, որ այս տողի կոդավորման մեջ մուտքագրեք նույն ֆայլի անունը.
xmlhttp.open ("GET", "ajax-data.txt", true);
Այնուամենայնիվ, HTML tagis- ն օգտագործվում է վերնագրի համար, որպեսզի այն ավելի մեծ և անտեսանելի տեսք ունենա:
Քայլ 5. Ստեղծեք նոր ֆայլ վեբ էջի համար:
Այս ֆայլը նախատեսված է HTML ֆայլի համար ՝ Ajax ծրագիրը վեբ դիտարկիչում դիտելու համար:
Քայլ 6. Պատճենեք հետևյալ ծածկագիրը
Իմ առաջին Այաքս ծրագիրը իմ կողմից Ստորև տեղադրեք Այաքսի ծածկագիրը:Կտտացրեք ներքևի կոճակին, որպեսզի ծաղիկը անհետանա:
Քայլ 7. Պահեք ֆայլը:
Կտտացրեք «Պահել» կոճակին ընտրացանկի բարում: «Պահել որպես» տուփը բաց է: Մուտքագրեք ձեր փաստաթղթի անունը: Այս հոդվածում ֆայլի անունը «ինդեքս» է:
Քայլ 8. Ֆայլի ընդլայնումը ընտրելու համար սեղմեք բացվող սլաքը:
«Պահել որպես տիպ» դաշտում կտտացրեք բացվող սլաքը ՝ ֆայլի ընդլայնումը ընտրելու համար:
Քայլ 9. Ընտրեք «Hyper Text Markup Language file:
” Համոզվեք, որ փակագծում այն ունի «html»: Կտտացրեք պահպանել «html» - ն ընտրելուց հետո:
Քայլ 10. Փորձարկեք HTML ֆայլը վեբ դիտարկիչում:
Բացեք վեբ էջը վեբ դիտարկիչում: Գնացեք «Գործարկել» ցանկի վերին ցանկում: Կտտացրեք այն և ընտրեք «Գործարկել Chrome- ում» կամ ձեր համակարգչում տեղադրված որևէ դիտարկիչ: Այս հոդվածում փորձարկման համար օգտագործվում է Google Chrome- ը: Հնարավոր է, որ Notepad ++ - ում տեղադրված լինեն այլ դիտարկիչներ: Կարող եք ընտրել ձեր նախընտրած դիտարկիչը: Մեկ այլ տարբերակ ՝ կարող եք կտտացնել WampServer պատկերակին ՝ էկրանի ներքևի աշխատանքային վահանակներում և ընտրել «Localhost»: Դուք պետք է այնտեղ տեսնեք ձեր գրացուցակը և կտտացրեք ինդեքսի ֆայլը:
Քայլ 11. Սցենարը փորձարկելու համար կտտացրեք նկարի ներքևի կոճակին:
Քայլ 12. Ձեր վերջին վեբ էջը:
Ձեր վեբ էջը պետք է թարմացվի այն տեղեկություններով, որոնք սկզբում մուտքագրել եք տեքստային ֆայլ: Flowerաղիկը և վերնագիրը պետք է փոխարինվեն նոր վերնագրով, որը կոչվում է «Օ o Ո՞ւր գնաց դեղին ծաղիկը »:
Մեթոդ 2 2 -ից. Կոդի բացատրություն
Քայլ 1. Մարմնի հատվածը:
HTML- ի մարմինն ունի «div» բաժինը և մեկ կոճակ: Այս բաժինը կօգտագործվի սերվերից վերադարձված տեղեկատվությունը ցուցադրելու համար: Կոճակը կանչում է «loadXMLDoc ()» անունով գործառույթ, եթե այն սեղմված է:
Իմ առաջին Այաքս ծրագիրը իմ կողմից Այստեղ պատկերը գնում է Այաքս ծրագիրը ստուգելու համար:Կտտացրեք ներքևի կոճակին, որպեսզի ծաղիկը անհետանա:
Այստեղ մի կոճակ է գնում
Քայլ 2. Գլխի հատվածը:
HTML ֆայլի գլխամասում կա սցենարի պիտակ, որը պարունակում է «loadXMLDoc ()» գործառույթը:
Իմ առաջին Այաքս ծրագիրը իմ կողմից Ստորև տեղադրեք Այաքսի ծածկագիրը:
Քայլ 3. Լրացուցիչ բացատրություն:
Այաքսի ամենակարևորը XMLHttpRequest օբյեկտն է: Այն օգտագործվում է սերվերի հետ տվյալների փոխանակման համար և բոլոր ժամանակակից դիտարկիչներն աջակցում են օբյեկտին:
- XMLHttpRequest () օբյեկտ ստեղծելու շարահյուսությունը փոփոխական է = նոր XMLHttpRequest (); բայց միևնույն ժամանակ Internet Explorer- ի (IE5 և IE6) հին տարբերակներ ստեղծելու շարահյուսությունը, որն օգտագործում է ActiveX օբյեկտ, փոփոխական է = նոր ActiveXObject («Microsoft. XMLHTTP»);
- Բոլոր ժամանակակից բրաուզերների հետ աշխատելու համար այն պետք է ստուգի ՝ արդյոք դիտարկիչներն աջակցում են XMLHttpRequest օբյեկտին: Եթե այդպես է, ապա ստեղծում է XMLHttpRequest օբյեկտ: Եթե մեկը դա չանի, ապա դրա համար ActiveX օբյեկտ կստեղծի:
- Այնուհետև այն հարցում կուղարկի սերվերին: Կօգտագործվի XMLHttpRequest օբյեկտի մեթոդը, որը կոչվում է «բաց ()» և «ուղարկել ()»: xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.
Խորհուրդներ
- Արդյունքը նախադիտելու մեկ այլ տարբերակ ՝ կարող եք բացել ձեր նախընտրած դիտարկիչը և վեբ հասցեի տողում մուտքագրել «localhost/ProgramInAjax» ՝ վեբ էջը ցուցադրելու համար: Դուք պետք է կարողանաք տեսնել կայքէջը, եթե ձեր HTML ֆայլը անվանեք «index.html»:
- Աշխատանքի ընթացքում ավելի հաճախ պահեք ձեր html ֆայլը: Ctrl- ի և S- ի միաժամանակ սեղմելը պատուհանի օգտագործողների համար ավելի շատ ժամանակ կխնայի:
- Համոզվեք, որ ձեր պահված HTML ֆայլը ավելացնեք նույն վայրում, որտեղ գտնվում են ձեր պատկերը և տվյալների տեքստային ֆայլը:
- Երբ ֆայլ եք անվանում, այն մեծատառ է, երբ այդ անունները ավելացնում եք ծածկագրին: Օրինակ, «myImage» - ը տարբերվում է «MyImage» - ից կամ «myimage» - ից:
