Jinsi ya Kupanga Ajax (na Picha)

Orodha ya maudhui:

Jinsi ya Kupanga Ajax (na Picha)
Jinsi ya Kupanga Ajax (na Picha)

Video: Jinsi ya Kupanga Ajax (na Picha)

Video: Jinsi ya Kupanga Ajax (na Picha)
Video: GANGSTAR VEGAS (КАЖДЫЙ ГАНГСТА, ДО ...) СУБТИТРЫ 2024, Aprili
Anonim

AJAX au Ajax ni Asynchronous JavaScript na XML. Inatumika kwa kubadilishana data na seva na kusasisha sehemu ya ukurasa wa wavuti bila kupakia tena ukurasa wote wa wavuti upande wa mteja. Kuonyesha na tabia ya ukurasa wa wavuti uliopo hauingiliwi kabisa wakati wa kubadilishana na kusasisha data. Ajax pia inachukuliwa kama kikundi cha teknolojia ambayo ina HTML, CSS, DOM, na JavaScript ambayo hutumiwa kuweka alama, mtindo, na kuruhusu mtumiaji kuingiliana na habari kwenye ukurasa wa wavuti. Katika nakala hii, itakuonyesha jinsi ya kuandika programu rahisi katika hatua za Ajax kwa hatua ukitumia Notepad ++. Ujuzi fulani wa kimsingi wa HTML, DOM, JavaScript, na seva ya Wavuti ya karibu au Seva ya mbali ya Wavuti inahitajika. WampServer hutumiwa katika nakala hii kwa jaribio.

Hatua

Njia ya 1 ya 2: Usimbuaji

3929304 1
3929304 1

Hatua ya 1. Andaa picha kwa kuandika programu ya Ajax

Hifadhi picha kwenye folda moja ambapo utahifadhi html yako na faili za maandishi zinazoonyesha programu ya Ajax. Katika nakala hii, saraka ya "ProgramInAjax" imewekwa ndani ya folda ya "wamp" chini ya saraka ya "www" ambapo uliweka WampServer.

3929304 2
3929304 2

Hatua ya 2. Fungua kihariri chochote cha maandishi

Notepad ++ hutumiwa kama mhariri wa maandishi katika nakala hii.

3929304 3
3929304 3

Hatua ya 3. Unda faili mpya katika kihariri cha maandishi

Andika zifuatazo:


Oh oh! Maua ya manjano yalikwenda wapi?

Unaweza kuandika chochote unachotaka ndani ya html taghere.

3929304 4
3929304 4

Hatua ya 4. Hifadhi faili kama hati ya maandishi yenye jina la "ajax-data.txt

” Kwa kweli, unaweza kutaja faili chochote unachotaka lakini hakikisha unaingiza jina moja la faili kwenye usimbo katika mstari huu:

xmlhttp.open ("GET", "ajax-data.txt", kweli);

Walakini, tagi za HTML zilizotumiwa kwa kichwa ili iweze kuonekana kubwa na isiyoonekana.

3929304 5
3929304 5

Hatua ya 5. Unda faili mpya kwa ukurasa wa wavuti

Faili hii ni ya faili ya HTML kutazama programu ya Ajax kwenye kivinjari cha Wavuti.

3929304 6
3929304 6

Hatua ya 6. Nakili nambari ifuatayo:

  Mpango Wangu wa Kwanza wa Ajax na Mimi Weka nambari ya Ajax hapa chini.  


Bonyeza kitufe hapa chini ili kufanya maua yatoweke

3929304 7
3929304 7

Hatua ya 7. Hifadhi faili

Bonyeza kitufe cha kuokoa kwenye mwambaa wa menyu. Sanduku la "Okoa Kama" liko wazi. Ingiza jina la hati yako. Katika nakala hii, jina la faili ni "faharisi."

3929304 8
3929304 8

Hatua ya 8. Bonyeza kishale kunjuzi kuchagua kiendelezi cha faili

Kwenye uwanja wa "Hifadhi kama aina", bonyeza kitufe cha kushuka ili uchague kiendelezi cha faili.

3929304 9
3929304 9

Hatua ya 9. Chagua "Faili ya Lugha ya Markup ya Nakala ya Hyper

” Hakikisha kuwa ina "html" ndani ya mabano. Bonyeza kuokoa baada ya kuchagua "html."

3929304 10
3929304 10

Hatua ya 10. Jaribu faili ya HTML kwenye kivinjari cha Wavuti

Fungua ukurasa wa wavuti katika kivinjari. Nenda kwenye "Run" kwenye mwambaa wa menyu ya juu. Bonyeza na uchague "Zindua kwenye Chrome" au kivinjari chochote kinachosanikishwa kwenye mfumo wako. Google Chrome hutumiwa kwa upimaji katika nakala hii. Unaweza kuwa na vivinjari vingine vilivyosanikishwa ndani ya Notepad ++. Unaweza kuchagua kivinjari chako unachopenda. Chaguo jingine, unaweza kubofya ikoni ya WampServer kwenye bar za kazi chini ya skrini na uchague "Localhost." Unapaswa kuona saraka yako hapo na bonyeza faili ya faharisi.

Hatua ya 11. Bonyeza kitufe chini ya picha ili kujaribu hati

3929304 12
3929304 12

Hatua ya 12. Ukurasa wako wa mwisho wa wavuti

Ukurasa wako wa wavuti unapaswa kuburudishwa na habari uliyoingiza kwenye faili ya maandishi mwanzoni. Maua na kichwa vinapaswa kubadilishwa na kichwa kipya kinachoitwa Oh oh! Maua ya manjano yalikwenda wapi?”

Njia 2 ya 2: Ufafanuzi wa Kanuni

3929304 13
3929304 13

Hatua ya 1. Sehemu ya mwili

Mwili wa HTML una sehemu ya "div" na kitufe kimoja. Sehemu hii itatumika kuonyesha habari iliyorudishwa kutoka kwa seva. Kitufe huita kazi iitwayo "loadXMLDoc ()," ikiwa imebofiwa.

   Mpango Wangu wa Kwanza wa Ajax na Mimi   Picha inakwenda hapa kujaribu programu ya Ajax.

Bonyeza kitufe hapa chini ili kufanya maua yatoweke

Kitufe huenda hapa

3929304 14
3929304 14

Hatua ya 2. Sehemu ya kichwa

Sehemu ya kichwa cha faili ya HTML ina lebo ya hati iliyo na kazi ya "mzigoXMLDoc ()".

 Mpango Wangu wa Kwanza wa Ajax na Mimi Weka nambari ya Ajax hapa chini. 

Hatua ya 3. Ufafanuzi zaidi

Jambo muhimu zaidi la Ajax ni kitu cha XMLHttpRequest. Inatumika kubadilisha data na seva na vivinjari vyote vya kisasa vinaunga mkono kitu.

  • Sintaksia ya kuunda kitu cha XMLHttpRequest () ni ya kutofautiana = mpya XMLHttpRequest (); lakini wakati huo huo syntax ya kuunda matoleo ya zamani ya Internet Explorer (IE5 na IE6) ambayo hutumia kitu cha ActiveX ni variable = mpya ActiveXObject ("Microsoft. XMLHTTP");.
  • Ili kushughulikia vivinjari vyote vya kisasa, inahitaji kuangalia ikiwa vivinjari vinaunga mkono kitu cha XMLHttpRequest. Ikiwa inafanya hivyo, inaunda kitu cha XMLHttpRequest. Ikiwa mtu hafanyi hivyo, itaunda kitu cha ActiveX kwa hiyo.
  • Halafu itatuma ombi kwa seva. Njia ya kitu cha XMLHttpRequest inayoitwa "open ()" na "send ()" itatumika. xmlhttp.open ("GET", "ajax_info.txt", kweli); xmlhttp.send ();.

Vidokezo

  • Chaguo jingine la kukagua matokeo, unaweza kufungua kivinjari chako kipendacho na andika "localhost / ProgramInAjax" kwenye upau wa anwani ya wavuti kuonyesha ukurasa wa wavuti. Unapaswa kuona ukurasa wa wavuti ikiwa utaita faili yako ya HTML kuwa "index.html."
  • Hifadhi faili yako ya html mara nyingi wakati wa kazi yako. Kubonyeza Ctrl na S kwa wakati mmoja kwa watumiaji wa Dirisha kutaokoa muda zaidi.
  • Hakikisha kuongeza faili yako ya HTML iliyohifadhiwa katika eneo moja ambapo faili yako ya picha na data iko.
  • Unapotaja faili, ni nyeti wakati unaongeza majina hayo kwenye nambari. Kwa mfano, "myImage" ni tofauti na "MyImage" au "myimage."

Ilipendekeza: