Ajax -та қалай бағдарламалау керек (суреттермен)

Мазмұны:

Ajax -та қалай бағдарламалау керек (суреттермен)
Ajax -та қалай бағдарламалау керек (суреттермен)

Бейне: Ajax -та қалай бағдарламалау керек (суреттермен)

Бейне: Ajax -та қалай бағдарламалау керек (суреттермен)
Бейне: Архитектура ЭВМ | Основы Операционных Систем | 06 2024, Сәуір
Anonim

AJAX немесе Ajax - асинхронды JavaScript және XML. Ол сервермен мәліметтер алмасу үшін және веб -беттің бір бөлігін клиент тарапынан қайта жүктемей -ақ жаңарту үшін қолданылады. Деректерді алмастыру және жаңарту кезінде қолданыстағы веб -беттің көрінісі мен мінез -құлқына ешқандай кедергі болмайды. Ajax сонымен қатар HTML, CSS, DOM және JavaScript бар технологиялар тобы болып саналады, олар пайдаланушыға веб -беттегі ақпаратпен өзара әрекеттесуге мүмкіндік береді. Бұл мақалада сізге Notepad ++ көмегімен қадамдармен Ajax -те қарапайым бағдарламаны қалай жазу керектігін көрсетеді. HTML, DOM, JavaScript және жергілікті веб -сервер немесе қашықтағы веб -сервер туралы кейбір негізгі білім қажет. WampServer тесті үшін осы мақалада қолданылады.

Қадамдар

2 -ші әдіс 1: кодтау

3929304 1
3929304 1

Қадам 1. Ajax бағдарламасын жазу үшін сурет дайындаңыз

Ajax бағдарламасын көрсететін html мен мәтіндік файлдарды сақтайтын суретті сол қалтаға сақтаңыз. Бұл мақалада «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 файлын таңдаңыз

” Жақшаның ішінде «html» бар екеніне көз жеткізіңіз. «Html» таңдағаннан кейін сақтау түймесін басыңыз.

3929304 10
3929304 10

Қадам 10. HTML файлын веб -шолғышта тексеріңіз

Веб -браузерде веб -бетті ашыңыз. Жоғарғы мәзір жолағындағы «Іске қосу» бөліміне өтіңіз. Оны басып, «Chrome -да іске қосу» немесе жүйеде орнатылған кез келген шолғышты таңдаңыз. Бұл мақалада тестілеу үшін Google Chrome пайдаланылады. Блокнот ++ ішінде басқа браузерлер орнатылған болуы мүмкін. Сіз өзіңізге ұнайтын шолғышты таңдай аласыз. Басқа опция, сіз экранның төменгі жағындағы тапсырмалар тақтасындағы 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» дегеннен өзгеше.

Ұсынылған: