AJAX алхам алхамаар

AJAX-ын тухай өмнө нь энд бас энд бичсэн билээ. Алхам алхамаар судлаж өөриймшүүлсээр яваад ямар ч байсан нэг бүтээгдэхүүн гаргаад тавьчихлаа. Хишгээ ах дээр нэг чимхээд байлуу үгүй билүү? Үзмээр байгаа бол нөгөө эрхээрээ ороод үзээрэй. Таньд зориулаад full эрх нэгийг нээчихсэн шүү. Ямар ажил гэдгээ харин нийтэд зарлахгүй ээ. Сайн болсон бол аяндаа хүмүүс яриад л унах биз. Үгүй бол тэр л биз тэ?

Одоо ийгээд дараагийн алхамаа хийсү:

Өмнө яриад байсан аргууд бол XML –гүй (Frame, iFrame ашиглах) ажилбаруудын тухай байсан билээ. Энэ нь бас өөрийн гэсэн давуу талтай байсан хэрэг л дээ. Харин одоо xmlHTTP ороод жинхэнэ AJAX.

Дараах файлыг татаад задлаарай. Дотор нь танд хэрэгтэй жижигхээн жишээ байгаа. Би хийгээгүй л дээ. Номон дээрээс авсан эд. Зохих тохиргоог хийгээд дараа нь:
Эхлээд XMLHttpExample1.htm –файлыг нээгээд хар.

Нэг товчны onClick дээр requestCustomerInfo() гээд нэг хөөрхөн JS-ын функц бий. За тэгээд хөөгөөд уншаад байтал чинь энэ функц дотор чинь огцом oXmlHttp нэртэй обьект гараад ирнэ. Энэ бол харин zxml.js дотор байгаа юм шүү. Энэ файл юу хийгээд байгааг энэ линкээр ороод өөрөө үзчих тэх үү :P. xmlHttp протоколын талаар өчнөөн материал нэт-д бий.

Зиак тэхээр цаашаа...

oXmlHttp.open("get", "GetCustomerData.php?id=" + sId, true)

энэ функц бол JS-ын стандарт санд байж байдаг бололтойм. Гол нь 2 дах аргумент болох "GetCustomerData.php?id=" + sId энэ хэсэг юм. GET method-оор энэ PHP файлыг нээдэг гол зорилго нь id –хувьсагчид утга (sId) дамжуулж байгаа хэрэг юм шүү дээ найзаа.

Энэ файл нь цаанаа $_GET[‘id’] гээл уншаад авчина.

Ийгээд GetCustomerData.php file руу:- Баазад байж байх шаардлагатай SQL-ыг ашиглаад баазаа үүсгээрэй. Холболт энээ тэрээгээ хийчих. Тэгээд цаашаа ->

http://localhost/c/GetCustomerData.php?id=1 гээд аддрес дээрээ шидээд үз.

PHP-файлд хэлээд байх юм үнэндээ алга. Гэхдээ энд хэвлэгдэж байгаа өгөгдөл XML-бүтэцтэй байж болохнээ гэдгийг л ойлгоод авчих. Энэ удаа бол зүгээр л plain текст байгааз? Тэхээр эргээд гол HTML файл дээрээ очих хэрэгтэй болсоон гэсэн үг.

Onreadystatechange гэдэг обьект нь харин түрүүчийн open() –р дуудагдсан хуудас Requist хийсний дараа төлөвт нь ямар нэг өөрчлөлт орсон эсэхийг шалгана.

if (oXmlHttp.readyState == 4)

энэ readyState нь дөрөв байна уу үгүй юу гэж шалгаад байдаг нь хариу ирсэн эсэхийг, харин

oXmlHttp.status == 200

энэ бол бүрэн алдаагүй уншигдсан уу гэдгийг илэрхийлнэ. Өөр ямар ямар тоонууд ямар ямар утга илэрхийлдэгийг эндээс харчих найз минь.

displayCustomerInfo(oXmlHttp.responseText);

Зиа энэ бол нөгөө өмнө үзээд байсан танил арга байгааз? Танихгүй байвал функций нь хайж олоод юу хийгээд байгааг нь харчихаарай. Ингээд гүйцээ. Ёох. Энэ хүртэл уншаад туршсан чинь ойлгомжгүй зүйл байгаад би будилсан байвал коммэнт дээр намайг загнаж болно.

Хэрэг болно зүгээр л ороод үз, сонирх таалагдана.

Санал болгох ном:

Javascript Complete Reference.

AJAX In Action

Ajax for Dummies

Professional Ajax