Така AJAX AJAX и AJAX, че е това, което правим широко тези дни. Това спестява време, добавя динамика и ви дава усещане за използване на софтуерно приложение вид на усещане. Там сте много начини за използване на AJAX с много библиотеки. Но както можете да видите на този сайт е за JQuery, ние ще разгледаме основните или може би някои допълнителни употреби AJAX.
Какво ни трябва?
Jquery библиотеката (разбира се)
A малък скрипт PHP
Нека да започна да говори. В Jquery, там са основно шест типа метод да се направи AJAX операции. Това са
- $. Аякс (опции)
- $. Получите (URL, данни, обаждане)
- $. GetJSON (URL, данни, обаждане)
- $. GetScript (URL, обаждане)
- натоварване (URL, данни, обаждане)
- $. Мнение (URL, данни, обаждане,
Освен номер 1, всички други методи използват $. Аякс вътрешно. Така че това означава, че $. Аякс () е майка ни функция за операции по закона за AJAX. Нека да разгледаме как $. Аякс () изглежда
$. Аякс ({
, тип: "POST",
, URL: "some.php",
, данни: "име = Peter & място = NY",
( msg ) { успех: функция (MSG) {
+ msg ) ; сигнал ("Сървър Response" + MSG);
}
}); |
Това е доста него. В зависимост от типа параметър се "да" или "пост", което означава, че можете да изпратите AJAX requestion като POST или GET (аз предпочитам винаги POST). Останалите параметри са доста самостоятелно обяснителен ако погледнете отново кода.
Сега отиваме да направим малък скрипт AJAX, която чете връзката на хипервръзки тагове (Ха) и зарежда по искане на някои Разделения елементи в документа.
Първо вземете нормално HTML документ PHP, който ще изглежда така
<DOCTYPE HTML публично място! "- / / 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 линк тест </ заглавие>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.2.6.min.js"> </ скрипта>
</ Глава>
<body>
</ Тялото> </ HTML> |
Сега нека добавим някои връзки към документа. За по-добро меню вид поглед ще използваме UL> LI и Link. Това ще изглежда така
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Load в Div 1 </ A> </ Li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Load в Div 2 </ A> </ Li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load в Div 3 </ A> </ Li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load в Div 4 </ A> </ Li>
</ Ул.> |
Както можете да видите ние имаме поставени връзки в списък елементи във вътрешността неподреден списък обект. Обърнете по-отблизо в имоти етикет <a> си. Имаме HREF, класа и REL атрибут, който изглежда нищо по-различно от нормална връзка. Ако виждате, сме дали на REL атрибут на някои Разделения имена именно div1, div2 .. така нататък. Това означава, че ние искаме отговор на HREF да бъдат заредени в тези Divs. Как да направите това? Нека добавим тези Divs първа
<span> DIV -1 </ педя>
<div id="div1" class="content_loader"> </ Div>
<span> DIV -2 </ педя>
<div id="div2" class="content_loader"> </ Div>
<span> DIV -3 </ педя>
<div id="div3" class="content_loader"> </ Div>
<span> DIV -4 </ педя>
<div id="div4" class="content_loader"> </ Div> |
И реалната част сега - сме дали връзките клас "ajax_link". Ние само ще добавите динамично Аякс действия само връзки с името на класа, наречен "ajax_link". По дяволите, ние не всички връзки на страницата, за да имат Аякс действия, нали?
Така че, на документ натоварване бихме правили това.
. ready ( function ( ) { $ (Документ). Готов (функция () {
) . click ( function ( ) { $ ("A.ajax_link"). Щракнете върху (функция () {
this ) ; $ Current_link = $ (това);
$. Аякс ({
, тип: "пост",
( "href" ) , URL:. $ current_link ATTR ("HREF"),
( e ) { успех: функция (д) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link ATTR ("относителна")) HTML (д);
}
});
; връщане фалшиви;
});
}); |
Нека ти обясня сценария малко. The document.ready събитие е събитие, което се задейства при зареждане на страницата. И тогава ние сме възлагане някаква кодове на клик случай на връзките, които имат клас "ajax_link". Правейки това current_link $ = $ (това); позволява да текущия обект връзка да бъде на разположение в рамките на функция за обратно извикване. И ние имаме
$ ("#" + $ Current_link.attr ("REL")). HTML (Е)
което означава $ ("div_id") HTML (server_response) и сме си поставили на URL параметър на $ функция Аякс с динамично URL:.. $ current_link.attr ("HREF"). Така че сега, всички тези "означават всички връзки, които имат клас" ajax_link "- Добави манипулатор събитие кликване - после за изпълнението и AJAX молбата, като на връзки HREF покупки и натоварване на отговор в дивизия, чиито номер съвпада с" REL "атрибут на връзка ". И на връщане фалшиви предотвратява връзка работа като нормална връзка 
Искате ли да го видите иск? Тук тя отива.
И вие можете да изтеглите източник , както добре.
В следващия раздел на този малък урок ние ще се използва едно и също нещо, но с малко комфорт.
Прилагането лесен метод
Всичко остава почти същата. Просто ще сменя метода Аякс тук. Така че вместо да пише цялата $. Аякс блок можем да постигнем същото нещо със следната.
. ready ( function ( ) { $ (Документ). Готов (функция () {
) . click ( function ( ) { $ ("A.ajax_link"). Щракнете върху (функция () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Това) ATTR ("REL")) натоварване ($ (това) ATTR ("HREF").);
; връщане фалшиви;
});
}); |
Това е много по-сложно, нали? Натоварването метод зарежда Аякс съдържание вътре в елемента, че е приложен към. Ако $ ("# somediv_id"). Натоварване ("mypage.php"), ще се опитате да заредите mypage.php е съдържанието в него. Доста просто, нали? Но аз предлагам да се използва за основен метод (показан в първата част).
В пощенски файл има и друг файл, наречен ajax2.php която демонстрира това благоприятно при борбата, която има същия резултат.
Така че, AJAX не е толкова трудно, колкото звучи, нали? Когато стане много свободно с операции AJAX, ще създаде магии.
Благодаря за четене между другото.
Скорошни коментари