AJAX эсвэл Ajax бол асинхрон JavaScript ба XML юм. Энэ нь сервертэй өгөгдөл солилцох, вэб хуудсыг үйлчлүүлэгчийн талд бүхэлд нь дахин ачаалалгүйгээр вэб хуудасны хэсгийг шинэчлэхэд ашиглагддаг. Өгөгдөл солилцох, шинэчлэх явцад одоо байгаа вэб хуудасны дэлгэц, зан байдал огт хөндөгдөхгүй. Ajax нь HTML, CSS, DOM, JavaScript -ийг ашиглан вэб хуудсан дээрх мэдээлэлтэй харилцах, тэмдэглэх, хэвлэхэд хэрэглэгддэг технологийн бүлэг гэж тооцогддог. Энэ нийтлэлд Notepad ++ ашиглан алхам алхмаар энгийн програмыг Ajax дээр хэрхэн бичихийг танд үзүүлэх болно. HTML, DOM, JavaScript, локал вэб сервер эсвэл алсын вэб серверийн талаар анхан шатны мэдлэг шаардагдана. WampServer -ийг энэ нийтлэлд тест хийхэд ашигладаг.
Алхам
2 -ийн 1 -р арга: Кодлох
Алхам 1. Ajax програм бичихийн тулд зураг бэлтгэ
Ajax програмыг харуулсан html болон текст файлуудаа хадгалах нэг хавтсанд байгаа зургийг хадгална уу. Энэ нийтлэлд "ProgramInAjax" лавлахыг WampServer -ийг суулгасан "www" лавлах дор "wamp" фолдер дотор байрлуулсан болно.
Алхам 2. Аливаа текст засварлагчийг нээнэ үү
Notepad ++ нь энэ нийтлэлд текст засварлагчаар ашиглагддаг.
Алхам 3. Текст засварлагч дээр шинэ файл үүсгэх
Дараахыг бичнэ үү.
Өө өө! Шар цэцэг хаашаа явсан бэ?
Та html хаягаар хүссэн зүйлээ бичиж болно.
Алхам 4. Файлыг “ajax-data.txt
” Үнэн хэрэгтээ та хүссэн зүйлээ нэрлэх боломжтой боловч энэ мөрөнд ижил файлын нэрийг оруулна уу.
xmlhttp.open ("GET", "ajax-data.txt", үнэн);
Гэсэн хэдий ч HTML тагийг толгойн хэсэгт ашигладаг бөгөөд ингэснээр илүү том, үл үзэгдэх харагддаг.
Алхам 5. Вэб хуудсанд шинэ файл үүсгэх
Энэ файл нь вэб хөтөч дээр Ajax програмыг үзэх HTML файл юм.
Алхам 6. Дараах кодыг хуулна уу
Миний анхны Ajax програм Ajax кодыг доор оруулна уу.Цэцгийг алга болгохын тулд доорх товчийг дарна уу
Алхам 7. Файлыг хадгална уу
Цэсийн мөрөнд хадгалах товчийг дарна уу. "Хадгалах" хайрцаг нээлттэй байна. Баримт бичгийнхээ нэрийг оруулна уу. Энэ нийтлэлд файлын нэр нь "индекс" юм.
Алхам 8. Унтраах сумыг дарж файлын өргөтгөлийг сонгоно уу
"Төрөл хэлбэрээр хадгалах" талбарт унах сумыг дарж файлын өргөтгөлийг сонгоно уу.
Алхам 9. "Hyper Text Markup Language file" -г сонгоно уу
” Хаалтанд "html" байгаа эсэхийг шалгаарай. "Html" -ийг сонгосны дараа хадгалах товчийг дарна уу.
Алхам 10. HTML файлыг вэб хөтөч дээр туршиж үзээрэй
Вэб хуудсыг вэб хөтөч дээр нээнэ үү. Цэсний дээд хэсэгт байрлах "Ажиллуулах" руу очно уу. Үүнийг товшоод "Chrome -д эхлүүлэх" эсвэл таны системд суулгасан дурын хөтчийг сонгоно уу. Энэ нийтлэлд Google Chrome -ийг туршихад ашигладаг. Notepad ++ дээр өөр хөтчүүд суулгасан байж магадгүй. Та дуртай хөтөчөө сонгож болно. Өөр нэг сонголт бол та дэлгэцийн доод хэсэгт байрлах WampServer дүрс дээр дарж "Localhost" -ыг сонгож болно. Та өөрийн лавлахыг тэнд хараад индекс файлыг дарна уу.
Алхам 11. Зургийн доор байгаа товчлуур дээр дарж скриптийг туршиж үзээрэй
Алхам 12. Таны эцсийн вэб хуудас
Таны вэб хуудас эхэнд текст файлд оруулсан мэдээллээр шинэчлэгдэх ёстой. Цэцэг ба толгойг "Өө өө!" Нэртэй шинэ толгойгоор солих хэрэгтэй. Шар цэцэг хаашаа явсан юм бэ?"
2 -ийн 2 -р арга: Кодын тайлбар
Алхам 1. Биеийн хэсэг
HTML -ийн үндсэн хэсэг нь "div" хэсэг, нэг товчлууртай. Энэ хэсгийг серверээс буцаасан мэдээллийг харуулахад ашиглах болно. Хэрэв товчлуур дарагдсан бол товчлуур нь "loadXMLDoc ()" нэртэй функцийг дууддаг.
Миний анхны Ajax програм Ajax програмыг туршиж үзэхийн тулд зураг энд байна.Цэцгийг алга болгохын тулд доорх товчийг дарна уу
Энд товчлуур дарна
Алхам 2. Толгойн хэсэг
HTML файлын толгой хэсэг нь "loadXMLDoc ()" функцийг агуулсан скриптийн тагтай.
Миний анхны Ajax програм Ajax кодыг доор оруулна уу.
Алхам 3. Нэмэлт тайлбар
Ajax -ийн хамгийн чухал зүйл бол XMLHttpRequest объект юм. Энэ нь сервертэй мэдээлэл солилцоход хэрэглэгддэг бөгөөд орчин үеийн бүх хөтчүүд уг объектыг дэмждэг.
- XMLHttpRequest () объект үүсгэх синтакс нь хувьсагч = шинэ XMLHttpRequest (); гэхдээ үүний зэрэгцээ ActiveX объектыг ашигладаг Internet Explorer (IE5 ба IE6) хуучин хувилбаруудыг үүсгэх синтакс нь хувьсагч = шинэ ActiveXObject ("Microsoft. XMLHTTP");.
- Орчин үеийн бүх хөтөчтэй ажиллахын тулд хөтчүүд XMLHttpRequest объектыг дэмждэг эсэхийг шалгах шаардлагатай. Хэрэв тийм бол энэ нь XMLHttpRequest объектыг үүсгэдэг. Хэрэв үгүй бол энэ нь ActiveX объект үүсгэх болно.
- Дараа нь сервер рүү хүсэлт илгээх болно. XMLHttpRequest объектын "open ()" ба "send ()" гэсэн аргыг ашиглах болно. xmlhttp.open ("GET", "ajax_info.txt", үнэн); xmlhttp.send ();.
Зөвлөмж
- Үр дүнг урьдчилан харах өөр нэг сонголт бол та дуртай хөтөчөө нээж, вэб хаягийг харуулахын тулд вэб хаягийн мөрөнд "localhost/ProgramInAjax" гэж бичиж болно. Хэрэв та HTML файлаа "index.html" гэж нэрлэвэл вэб хуудсыг харах боломжтой байх ёстой.
- Ажлын явцад html файлыг илүү олон удаа хадгалаарай. Цонхны хэрэглэгчдэд Ctrl болон S товчлууруудыг нэгэн зэрэг дарахад илүү их цаг хэмнэх болно.
- Таны хадгалсан HTML файлыг таны зураг болон өгөгдлийн текст файл байгаа газарт нэмж оруулахаа мартуузай.
- Та файлд нэр өгөхдөө эдгээр нэрийг кодонд нэмэхэд энэ нь жижиг үсгийг томъёолдог. Жишээлбэл, "myImage" нь "MyImage" эсвэл "myimage" -ээс өөр юм.
