Аякс программасын кантип түзүү керек (сүрөттөр менен)

Мазмуну:

Аякс программасын кантип түзүү керек (сүрөттөр менен)
Аякс программасын кантип түзүү керек (сүрөттөр менен)

Video: Аякс программасын кантип түзүү керек (сүрөттөр менен)

Video: Аякс программасын кантип түзүү керек (сүрөттөр менен)
Video: ЖЕР ТИТИРӨӨДӨ ӨМҮРҮҢҮЗДҮ САКТАГАН 10 МААЛЫМАТ! 2024, Март
Anonim

AJAX же Ajax - асинхрондук JavaScript жана XML. Бул сервер менен маалымат алмашуу жана веб -баракчанын бир бөлүгүн кардар тарабында кайра жүктөбөстөн колдонулат. Маалымат алмашуу жана жаңылоо учурунда учурдагы веб -баракчанын көрүнүшү жана жүрүм -турумуна эч кандай кийлигишүү болбойт. Ajax ошондой эле HTML, CSS, DOM жана JavaScriptке ээ болгон технологиялар тобу катары каралат, алар белгилөө, стиль жана колдонуучуга веб -баракчадагы маалымат менен баарлашууга мүмкүнчүлүк берет. Бул макалада, ал кантип Notepad ++ аркылуу кадамдар менен Ajax этаптарында жөнөкөй программа жазууну көрсөтөт. HTML, DOM, JavaScript жана жергиликтүү веб -сервер же алыскы веб -сервер боюнча кээ бир негизги билимдер талап кылынат. WampServer бул макалада сыноо үчүн колдонулат.

Кадамдар

Метод 1 2: Коддоо

3929304 1
3929304 1

Кадам 1. Ajax программасын жазуу үчүн сүрөт даярдаңыз

Сүрөттү ошол эле папкада сактаңыз, анда сиз HTML жана Ajax программасын көрсөткөн текст файлдарын сактайсыз. Бул макалада "ProgramInAjax" каталогу WampServer орнотулган "www" каталогунун астындагы "wamp" папкасынын ичинде орнотулган.

3929304 2
3929304 2

Кадам 2. Каалаган текст редакторун ачыңыз

Notepad ++ бул макалада текст редактору катары колдонулат.

3929304 3
3929304 3

Кадам 3. Текст редакторунда жаңы файл түзүңүз

Төмөнкүлөрдү териңиз:


Оо! Сары гүл кайда кетти?

Сиз каалаган нерсени html тегинин ичине жаза аласыз.

3929304 4
3929304 4

Кадам 4. Файлды текст документи катары “ajax-data.txt

” Чынында, сиз файлга каалаган нерсеңизди атасаңыз болот, бирок ушул сапта коддоо үчүн ошол эле файлдын атын киргизиңиз:

xmlhttp.open ("Get", "ajax-data.txt", туура);

Бирок, HTML тегдери баш үчүн колдонулат, ошондуктан ал чоңураак жана көрүнбөгөндөй көрүнөт.

3929304 5
3929304 5

Кадам 5. Веб -баракча үчүн жаңы файл түзүңүз

Бул файл Ajax программасын веб -браузерде көрүү үчүн HTML файлы үчүн.

3929304 6
3929304 6

Кадам 6. Төмөнкү кодду көчүрүү:

  Менин биринчи Ajax программам Төмөндө Ajax кодун коюңуз.  


Гүлдү жок кылуу үчүн төмөндөгү баскычты басыңыз

3929304 7
3929304 7

Кадам 7. Файлды сактаңыз

Меню тилкесиндеги сактоо баскычын чыкылдатыңыз. "Сактоо" кутусу ачык. Документиңиздин атын киргизиңиз. Бул макалада файлдын аты "индекс".

3929304 8
3929304 8

Кадам 8. Файл кеңейтүүсүн тандоо үчүн ылдый түшүүчү жебени басыңыз

"Түр катары сактоо" талаасында, файлдын кеңейтүүсүн тандоо үчүн ачылуучу жебени чыкылдатыңыз.

3929304 9
3929304 9

Кадам 9. Тандоо “Hyper Text Markup Language file

” Анын кашаанын ичинде "html" бар экенин тактаңыз. "Html" тандагандан кийин, чыкылдатыңыз.

3929304 10
3929304 10

Кадам 10. Веб -браузерде HTML файлын текшериңиз

Веб браузерде веб баракчаны ачыңыз. Жогорку меню тилкесиндеги "Run" бөлүмүнө өтүңүз. Аны чыкылдатып, "Chromeдо ишке киргизүүнү" же тутумуңузга орнотулган браузерди тандаңыз. Google Chrome бул макалада тестирлөө үчүн колдонулат. Notepad ++ ичинде башка браузерлер орнотулган болушу мүмкүн. Сиз сүйүктүү браузериңизди тандай аласыз. Башка вариант, экрандын ылдый жагындагы тапшырмалар тилкесиндеги WampServer сөлөкөтүн чыкылдатып, "Localhost" тандасаңыз болот. Сиз каталогуңузду ошол жерден көрүп, индекс файлын чыкылдатыңыз.

Кадам 11. Сценарийди текшерүү үчүн сүрөттүн астындагы баскычты басыңыз

3929304 12
3929304 12

Кадам 12. Сиздин акыркы веб -баракчаңыз

Веб -баракчаңыз текст файлына башында киргизилген маалымат менен жаңыртылышы керек. Гүл менен аталыштын ордуна Ох о! Сары гүл кайда кетти? »

Метод 2 2: Коддун түшүндүрмөсү

3929304 13
3929304 13

Кадам 1. Дененин бөлүмү

HTML денесинде "div" бөлүмү жана бир баскыч бар. Бул бөлүм серверден кайтарылган маалыматты көрсөтүү үчүн колдонулат. Баскыч басылганда "loadXMLDoc ()" деген функцияны чакырат.

   Менин биринчи Ajax программам   Сүрөт бул жерде Ajax программасын текшерүү үчүн барат.

Гүлдү жок кылуу үчүн төмөндөгү баскычты басыңыз

Бул жерде баскыч басылат

3929304 14
3929304 14

Кадам 2. Баш бөлүмү

HTML файлынын баш бөлүмүндө "loadXMLDoc ()" функциясын камтыган скрипт теги бар.

 Менин биринчи Ajax программам Төмөндө Ajax кодун коюңуз. 

3 -кадам. Көбүрөөк түшүндүрүү

Ajaxтин эң маанилүүсү XMLHttpRequest объектиси. Бул сервер менен маалымат алмашуу үчүн колдонулат жана бардык заманбап браузерлер объектти колдойт.

  • XMLHttpRequest () объектисин түзүү синтаксиси өзгөрмө = жаңы XMLHttpRequest (); бирок ошол эле учурда ActiveX объектисин колдонгон Internet Explorerдин (IE5 жана IE6) эски версияларын түзүү синтаксиси өзгөрмө = жаңы ActiveXObject ("Microsoft. XMLHTTP");.
  • Бардык заманбап браузерлерди иштетүү үчүн, браузерлер XMLHttpRequest объектисин колдоорун текшериши керек. Эгер ошондой болсо, анда XMLHttpRequest объектисин түзөт. Эгер андай болбосо, анда ал ActiveX объектин түзөт.
  • Андан кийин ал серверге суроо жөнөтөт. "Open ()" жана "send ()" деп аталган XMLHttpRequest объектисинин методу колдонулат. xmlhttp.open ("Get", "ajax_info.txt", туура); xmlhttp.send ();.

Кеңештер

  • Жыйынтыкты алдын ала көрүү үчүн дагы бир вариант, сиз сүйүктүү браузериңизди ачып, веб -баракчаны көрсөтүү үчүн веб -дарек тилкесине "localhost/ProgramInAjax" терсеңиз болот. HTML файлыңызды "index.html" деп атасаңыз, веб -баракчаны көрө алышыңыз керек.
  • Иш учурунда html файлыңызды көбүрөөк сактаңыз. Терезе колдонуучулары үчүн Ctrl жана S бир убакта басуу көбүрөөк убакытты үнөмдөйт.
  • Сакталган HTML файлыңызды сүрөтүңүз жана маалымат текст файлы турган жерге кошууну унутпаңыз.
  • Файлга ат койгонуңузда, бул аттарды кодго кошкондо ал регистрге чоң маани берет. Мисалы, "myImage" "MyImage" же "myimage" дегенден айырмаланат.

Сунушталууда: