Так AJAX AJAX і AJAX, це те, що ми робимо в ці дні широко. Це економить час, додає динаміки і дає вам відчуття використання вигляді програмного додатка почуття. Там вже багато способів використовувати AJAX з багатьма бібліотеками. Але як ви можете бачити цей сайт для JQuery, ми будемо дивитися на основній або, можливо, деякі передові звичаї AJAX.
Що ви нам потрібні?
JQuery бібліотеки (звичайно)
Крихітні PHP скрипт
Давайте почав говорити. У JQUERY, в основному існують шість типів спосіб зробити АЯКС операцій. Це
- $. Ajax (опції)
- $. Отримати (URL, дані, виклик)
- $. GetJSON (URL, дані, виклик)
- $. GetScript (URL, виклик)
- навантаження (URL, дані, виклик)
- $. Повідомленням (URL, дані, зворотного дзвінка,
Крім номер 1, всі інші методи використовувати $. Ajax внутрішньо. Отже, що означає $. Ajax () наша мати функція JQuery AJAX операцій. Давайте подивимося, як $. Ajax () виглядає
$. Ajax ({
, типу: "POST",
, URL: "some.php»,
, дані: "ім'я = Peter & Location = Нью-Йорк»,
( msg ) { Успіх: функція (MSG) {
+ msg ) ; Alert ("Відповідь сервера" + MSG);
}
}); |
Це досить його. Тип параметр приймає "GET" або "POST", який означає, що ви можете надіслати AJAX запиту на як POST або GET (я б вважав за краще, POST завжди). Решта параметрів є досить зрозумілі, якщо ви погляньте на код знову.
Тепер ми збираємося зробити невеликий скрипт, який читає AJAX ланка теги гіперпосилань (<a>) і завантажує запит на деяких DIV елементи в документі.
Спочатку ми беремо нормальні HTML документа PHP який буде виглядати наступним чином
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title> Ajax перевірки каналу </ TITLE>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.2.6.min.js"> </ SCRIPT>
</ HEAD>
<body>
</ BODY> </ HTML> |
Тепер давайте додамо деякі посилання на документ. Для кращого меню вид погляду ми будемо використовувати UL> LI і Link. Це буде виглядати наступним чином
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> навантаження в розділ 1 </ A> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> навантаження в Розділ 2 </ A> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> навантаження в Дивізіон 3 </ A> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> навантаження в Div 4 </ A> </ li>
</ UL> |
Як ви бачите, ми поставили посилання в списку елементів усередині неупорядкованого списку об'єкт. Візьмемо ближчий погляд на властивості тега <a> автора. У нас є HREF, клас і отн атрибут, який не виглядає відрізняється від звичайного посилання. Якщо ви бачите, ми дали отн атрибутом деяких DIV імена саме дів1, div2 .. так далі. Це означає, що ми хочемо, щоб реакція HREF для завантаження в ці діви. Як це зробити? Давайте додамо ці діви першої
<span> DIV -1 </ span>
<div id="div1" class="content_loader"> </ DIV>
<span> DIV -2 </ span>
<div id="div2" class="content_loader"> </ DIV>
<span> DIV -3 </ span>
<div id="div3" class="content_loader"> </ DIV>
<span> DIV -4 </ span>
<div id="div4" class="content_loader"> </ DIV> |
І реальна частина зараз - ми дали посилання класу "ajax_link". Ми тільки динамічно додавати Ajax дії тільки посилання мають ім'я класу називають "ajax_link". Чорт, ми не всі посилання на сторінці, щоб мати Ajax дій, чи не так?
Так, в документі навантаження, що ми зробимо це.
. ready ( function ( ) { $ (Документ). Готові (функція () {
) . click ( function ( ) { $ ("A.ajax_link»). Натисніть (функція () {
this ) ; Current_link $ = $ (це);
$. Ajax ({
, типу: "пост",
( "href" ) , URL:. $ Current_link каста ("HREF"),
( e ) { Успіх: функція (е) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (". #" + $ Current_link каста ("Rel")) HTML (E);
}
});
; повернення помилковим;
});
}); |
Дозвольте мені пояснити, сценарій небагато. Document.ready подія є подією, яка спрацьовує при завантаженні сторінки. А потім ми присвоюємо якийсь коди на події натискання посилання, які мають клас "ajax_link". Робити це current_link $ = $ (це); дозволяє мати поточний об'єкт посилання буде доступна у функції зворотного виклику. І у нас є
$ ("#" + $ Current_link.attr ("Rel")). HTML (E)
що означає $ ("div_id") HTML (server_response), і ми встановили URL параметр функції $ Ajax динамічно. URL:. $ current_link.attr ("HREF"). Так що тепер всі ті кошти «Всі ті посилання, які мають клас" ajax_link "- додати обробник подій натискання - і потім виконати AJAX запит приймаючи посилання HREF Райфайзен і завантажити відповідь у DIV з ідентифікатором відповідає" Rel "атрибут зв'язок ". І повернення помилковим запобігає посилання працювати як звичайно посилання 
Хочете побачити цю дію? Ось він іде.
І ви можете завантажити вихідний , а також.
У наступному розділі цій невеликій статті ми будемо використовувати одне і те ж, але з трохи комфорту.
Застосувавши метод простіше
Все залишається майже такою ж. Ми просто змінити метод Ajax тут. Таким чином, замість написання цілого $. Ajax блок ми можемо досягти того ж з наступним.
. ready ( function ( ) { $ (Документ). Готові (функція () {
) . click ( function ( ) { $ ("A.ajax_link»). Натисніть (функція () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (". #" + $ (Це) каста ("Rel")) навантаженні ($ (це) каста ("HREF").);
; повернення помилковим;
});
}); |
Це набагато менше, складні зараз, правда? Метод Load завантажує Ajax вміст елемента він приєднаний. Якщо $ ("# somediv_id»). Навантаженню ("mypage.php"), він намагатиметься завантажити mypage.php 'з вмістом в ньому. Досить просто, так? Але я пропоную вам звикнути до основним методом (показано в першій частині).
У архіву є ще один файл з ім'ям ajax2.php який демонструє це Митос який має той же результат.
Так, AJAX не так складно, як здається, чи не так? Коли ви стаєте дуже вільно з операціями AJAX, Ви створите магії.
Спасибі за читання до речі.
Останні коментарі