Ang AJAX o Ajax ay Asynchronous JavaScript at XML. Ginagamit ito para sa pagpapalitan ng data sa isang server at pag-update ng isang bahagi ng isang webpage nang hindi nai-reload ang buong webpage sa panig ng kliyente. Ang pagpapakita at pag-uugali ng mayroon nang webpage ay hindi makagambala sa lahat habang nagpapalitan at nag-a-update ng data. Ang Ajax ay isinasaalang-alang din ng isang pangkat ng mga teknolohiya na mayroong HTML, CSS, DOM, at JavaScript na ginagamit upang markahan, istilo, at payagan ang gumagamit na makipag-ugnay sa impormasyon sa webpage. Sa artikulong ito, ipapakita sa iyo kung paano magsulat ng isang simpleng programa sa mga hakbang sa Ajax sa pamamagitan ng mga hakbang na gumagamit ng Notepad ++. Ang ilang pangunahing kaalaman sa HTML, DOM, JavaScript, at isang lokal na Web server o remote Web Server ay kinakailangan. Ang WampServer ay ginagamit sa artikulong ito para sa isang pagsubok.
Mga hakbang
Paraan 1 ng 2: Coding
Hakbang 1. Maghanda ng isang larawan para sa pagsulat ng isang programa ng Ajax
I-save ang larawan sa parehong folder kung saan mo mai-save ang iyong html at mga text file na ipinapakita ang Ajax program. Sa artikulong ito, ang direktoryo ng "ProgramInAjax" ay naka-set up sa loob ng folder na "wamp" sa ilalim ng direktoryo ng "www" kung saan mo na-install ang WampServer.
Hakbang 2. Buksan ang anumang text editor
Ang Notepad ++ ay ginagamit bilang text editor sa artikulong ito.
Hakbang 3. Lumikha ng isang bagong file sa text editor
I-type ang sumusunod:
Oh oh! Saan napunta ang dilaw na bulaklak?
Maaari mong i-type ang anumang gusto mo sa loob ng html taghere.
Hakbang 4. I-save ang file bilang isang dokumento sa teksto na may pangalan ng "ajax-data.txt
” Sa totoo lang, maaari mong pangalanan ang file kahit anong gusto mo ngunit tiyaking inilagay mo ang parehong pangalan ng file sa pag-coding sa linyang ito:
xmlhttp.open ("GET", "ajax-data.txt", true);
Gayunpaman, ginamit ang HTML tagis para sa header upang ang hitsura nito ay mas malaki at mas hindi nakikita.
Hakbang 5. Lumikha ng isang bagong file para sa isang webpage
Ang file na ito ay para sa isang HTML file upang matingnan ang programa ng Ajax sa isang Web browser.
Hakbang 6. Kopyahin ang sumusunod na code:
Ang Aking First Ajax Program na Ako Ilagay ang Ajax code sa ibaba.I-click ang pindutan sa ibaba upang mawala ang bulaklak
Hakbang 7. I-save ang file
I-click ang save button sa menu bar. Ang isang kahon na "I-save Bilang" ay bukas. Maglagay ng pangalan para sa iyong dokumento. Sa artikulong ito, ang pangalan ng file ay "index."
Hakbang 8. I-click ang drop down arrow upang mapili ang extension ng file
Sa patlang na "I-save bilang uri", i-click ang drop down arrow upang piliin ang extension ng file.
Hakbang 9. Piliin ang "Hyper Text Markup Language file
” Tiyaking mayroon itong "html" sa loob ng panaklong. I-click ang i-save pagkatapos piliin ang "html."
Hakbang 10. Subukan ang HTML file sa isang Web browser
Buksan ang webpage sa isang web browser. Pumunta sa "Run" sa tuktok na menu bar. I-click ito at piliin ang "Ilunsad sa Chrome" o anumang browser na nai-install sa iyong system. Ginagamit ang Google Chrome para sa pagsubok sa artikulong ito. Maaari kang magkaroon ng ilang iba pang mga browser na naka-install sa loob ng Notepad ++. Maaari mong piliin ang iyong paboritong browser. Ang isa pang pagpipilian, maaari mong i-click ang icon na WampServer sa mga taskbar sa ilalim ng screen at piliin ang "Localhost." Dapat mong makita ang iyong direktoryo doon at i-click ang index file.
Hakbang 11. I-click ang pindutan sa ibaba ng larawan upang subukan ang script
Hakbang 12. Ang iyong huling webpage
Ang iyong webpage ay dapat na nai-refresh sa impormasyon na iyong ipinasok sa text file sa simula. Ang bulaklak at ang header ay dapat mapalitan ng bagong header na tinatawag na "Oh oh! Saan napunta ang dilaw na bulaklak?"
Paraan 2 ng 2: Pagpapaliwanag ng Code
Hakbang 1. Ang seksyon ng katawan
Ang katawan ng HTML ay may seksyong "div" at isang pindutan. Ang seksyon na ito ay gagamitin upang ipakita ang impormasyong ibinalik mula sa server. Ang pindutan ay tumatawag sa isang pagpapaandar na pinangalanang "loadXMLDoc ()," kung ito ay na-click.
Ang Aking First Ajax Program na Ako Ang isang imahe ay pupunta dito upang subukan ang programa ng Ajax.I-click ang pindutan sa ibaba upang mawala ang bulaklak
Ang isang pindutan ay pupunta dito
Hakbang 2. Ang seksyon ng ulo
Ang seksyon ng ulo ng HTML file ay may isang script tag na naglalaman ng "loadXMLDoc ()" na function.
Ang Aking First Ajax Program na Ako Ilagay ang Ajax code sa ibaba.
Hakbang 3. Mas Paliwanag
Ang pinakamahalagang bagay ng Ajax ay ang XMLHttpRequest na bagay. Ginagamit ito upang makipagpalitan ng data sa server at sinusuportahan ng lahat ng mga modernong browser ang bagay.
- Ang syntax upang lumikha ng isang XMLHttpRequest () na object ay variable = bagong XMLHttpRequest (); ngunit sa parehong oras ang syntax upang lumikha ng mga lumang bersyon ng Internet Explorer (IE5 at IE6) na gumagamit ng isang object ng ActiveX ay variable = bagong ActiveXObject ("Microsoft. XMLHTTP");.
- Upang mahawakan ang lahat ng mga modernong browser, kailangang suriin kung sinusuportahan ng mga browser ang XMLHttpRequest na bagay. Kung gagawin ito, lumilikha ito ng isang XMLHttpRequest na bagay. Kung ang isa ay hindi, lilikha ito ng isang bagay na ActiveX para dito.
- Pagkatapos ay magpapadala ito ng isang kahilingan sa server. Gagamitin ang pamamaraan ng XMLHttpRequest object na tinatawag na "open ()" at "send ()". xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.
Mga Tip
- Ang isa pang pagpipilian upang i-preview ang resulta, maaari mong buksan ang iyong paboritong browser at i-type ang "localhost / ProgramInAjax" sa web address bar upang maipakita ang web page. Dapat mong makita ang webpage kung pinangalanan mo ang iyong HTML file sa "index.html."
- Mas madalas i-save ang iyong html file sa iyong trabaho. Ang pagpindot sa Ctrl at S sa parehong oras para sa mga gumagamit ng Window ay makakatipid ng mas maraming oras.
- Tiyaking idagdag ang iyong nai-save na HTML file sa parehong lokasyon kung nasaan ang iyong imahe at data text file.
- Kapag pinangalanan mo ang isang file, ito ay isang sensitibong kaso kapag idinagdag mo ang mga pangalang iyon sa code. Halimbawa, ang "myImage" ay naiiba sa "MyImage" o "myimage."
