Дакле, Ајак Ајак и АЈАКС, то је оно што ми радимо интензивно ових дана. То штеди време, додаје динамику и даје вам осећај помоћу софтверске апликације врсту осећаја. Постоји много начина да нам користе Ајак са многим библиотекама. Али, као што можете да видите овај сајт је за јКуери, ми ћемо погледати на основним или можда неким напредним АЈАКС обичајима.
Шта нам је потребно?
јКуери библиотеку (наравно)
Мали ПХП скрипт
Да су почели да разговарају. У јКуери, у основи постоје 6 типова начин да урадите АЈАКС операције. Ово су
- $ Ајак (опција).
- $. Гет (урл, подаци, цаллбацк)
- $ ГетЈСОН (урл, подаци, цаллбацк).
- $ ГетСцрипт (урл, цаллбацк).
- оптерећење (урл, подаци, цаллбацк)
- $ Пост (урл, подаци, повратни позив.,
Поред броја 1, све остале методе користе $ Ајак интерно.. Значи $ Ајак () је наша мајка функција за јКуери АЈАКС операције.. Хајде да погледамо како $ Ајак () изгледа.
$ Ајак. ({
, Тип: "ПОСТ",
, урл: "соме.пхп",
, подаци: "назив = Питер локација = & НИ",
( msg ) { успех: функција (МСГ) {
+ msg ) ; алерт ("Одговор сервера" + МСГ);
}
}); |
То је прилично га. Типе параметар узима "ГЕТ" или "пост" што значи да можете да шаљете АЈАКС рекуестион као ПОСТ или ГЕТ (ја бих радије ПОСТ увек). Остали параметри су прилично разумљива ако се узме поново погледамо кода.
Сада ћемо направити малу АЈАКС скрипт који чита линк на хипервезу (ознака <а>) и учитава захтев на неке див елемената у документу.
Прво ћемо узети нормалан ХТМЛ ПХП документ који ће изгледати овако
<ДОЦТИПЕ хтмл ПУБЛИЦ "- / / В3Ц / / ДТД КСХТМЛ 1.0 Стрицт / / ЕН"! "Хттп://ввв.в3.орг/ТР/кхтмл1/ДТД/кхтмл1-стрицт.дтд">
<хтмл кмлнс="хттп://ввв.в3.орг/1999/кхтмл" кмл:ланг="ен-УС" ланг="ен-УС">
<хеад>
<титле> Ајакс Линк тест </ титле>
<мета хттп-екуив="цонтент-типе" цонтент="тект/хтмл; цхарсет=исо-8859-1" />
<сцрипт типе="тект/јавасцрипт" срц="јкуери-1.2.6.мин.јс"> </ сцрипт>
</ Хеад>
<боди>
</ Боди> </ хтмл> |
Сада ћемо додати неке линкове у документу. За бољи изглед менија врсту ћемо користити УЛ> Ли и Линк. То ће изгледати овако
<ул ид="нав">
<ли> <а цласс="ајак_линк" рел="див1" хреф="респонсе.пхп?усер=јохн"> оптерећења у Див 1 </ а> </ п>
<ли> <а цласс="ајак_линк" рел="див2" хреф="респонсе.пхп?усер=насх"> оптерећења у Див 2 </ а> </ п>
<ли> <а цласс="ајак_линк" рел="див3" хреф="респонсе.пхп?усер=стелла"> оптерећења у Див 3 </ а> </ п>
<ли> <а цласс="ајак_линк" рел="див4" хреф="респонсе.пхп?усер=јасон"> оптерећења у Див 4 </ а> </ п>
</ Ул> |
Као што видите ми смо ставили линкове на листи елемената унутар Несређена листа објекта. Обратите пазњу на особине ознаку <а> екипе. Имамо хреф, класу и рел атрибут који изгледа ништа другачије од нормалне везе. Ако видите, ми смо добили атрибут рел неким див имена, наиме див1 див2 .. тако даље. То значи да желимо одговор хреф да се учита у те дивови. Како да се то уради? Додајмо прво оне дива
<спан> ДИВ -1 </ п>
<див ид="див1" цласс="цонтент_лоадер"> </ див>
<спан> ДИВ -2 </ п>
<див ид="див2" цласс="цонтент_лоадер"> </ див>
<спан> ДИВ -3 </ п>
<див ид="див3" цласс="цонтент_лоадер"> </ див>
<спан> ДИВ -4 </ п>
<див ид="див4" цласс="цонтент_лоадер"> </ див> |
А сада прави део - дали смо на везе класа "ајак_линк". Ми ћемо само додати динамички АЈАКС радње само линкови имају име класе под називом "ајак_линк". До ђавола, не да се све везе на страници имају АЈАКС акције, зар не?
Дакле, на документу оптерећења бисмо то урадили.
. ready ( function ( ) { $ (Доцумент) реади (фунцтион (). {
) . click ( function ( ) { $ ("А.ајак_линк"). Кликните (фунцтион () {
this ) ; Цуррент_линк $ = $ (ово);
$ Ајак. ({
, Тип: "Пост",
( "href" ) , урл: $ цуррент_линк аттр ("хреф"),.
( e ) { успех: функција (е) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; $ (. "#" $ + Цуррент_линк аттр ("рел")) ХТМЛ (е).;
}
});
; ретурн фалсе;
});
}); |
Дозволите ми да објасним скрипта мало. Доцумент.реади догађај је догађај који се активира при учитавању. И онда смо додељујући неку врсту кодекса на клик догађај од линкова који имају класе "ајак_линк". На тај начин цуррент_линк $ = $ (ово), омогућава да се тренутна веза објекат бити доступан у оквиру цаллбацк функције. И ми имамо
$ ("#" $ + Цуррент_линк.аттр ("рел")) ХТМЛ (е).
што значи $ ("див_ид") ХТМЛ (сервер_респонсе) и ми смо подесити УРЛ парам од $ ајак функцију динамички са УРЛ:. $ цуррент_линк.аттр ("хреф").. Тако да сада све те средства "Сви они који имају везе класе" ајак_линк "- Додајте руковалац клик догађај - затим изврши и АЈАКС захтев узимање линкови хреф поперти и учитати одговор у див чија ИД одговара" рел "атрибут линк ". И повратак лажни линк спречава рад као нормалне везе 
Желим да види акцију? Ево га.
И можете преузети извор , као добро.
У следећем делу овог малог туторијала ћемо користити исту ствар, али са мало комфора.
Примена метода лакше
Све остаје готово иста. Само ћемо овде промените АЈАКС метод. Дакле, уместо писања свих $. Ајак блок можемо постићи исту ствар са натписом.
. ready ( function ( ) { $ (Доцумент) реади (фунцтион (). {
) . click ( function ( ) { $ ("А.ајак_линк"). Кликните (фунцтион () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Овај) аттр ("рел")) оптерећење ($ (овај) аттр ("хреф").);
; ретурн фалсе;
});
}); |
То је много мање компликовано, зар не? Оптерећење метод учитава ајак садржаја у оквиру елемента то је причвршћено. Ако $ ("# сомедив_ид"). Оптерећење ("мипаге.пхп"), то ће покушати да учита мипаге.пхп је садржај у њему. Прилично једноставно, зар не? Али, предлажем вам да се навикнете на главни метод (приказано у првом делу).
У зип фајл постоји још један фајл под ајак2.пхп што показује овај Метхос која има исти резултат.
Дакле, АЈАКС није тако тешко као што звучи, зар не? Када постану веома течно и АЈАКС операцијама, направићете магицс.
Хвала за читање бтв.
Недавни коментари