Então, AJAX AJAX e AJAX, que é o que fazemos extensivamente estes dias. Ele economiza tempo, aumenta a dinâmica e lhe dá uma sensação de usar um tipo de aplicação de software de sentir. Lá estão muitas maneiras de usar AJAX com muitas bibliotecas. Mas como você pode ver neste site é para jQuery, vamos olhar para os básicos, ou talvez alguns usos AJAX avançados.
O que nós precisamos?
biblioteca jQuery (of course)
Um pequeno script php
Vamos começou a falar. Em jQuery, existem basicamente seis tipos de método para fazer operações de AJAX. São
- $. Ajax (opções)
- $. Get (url, dados, callback)
- $. GetJSON (url, dados, callback)
- $. GetScript (url, callback)
- carga (url, dados, callback)
- $. Pós (url, dados, callback,
Para além do número um, todos os outros métodos de usar $. Ajax internamente. Então isso significa que $. Ajax () é a nossa função de mãe para operações de AJAX jQuery. Vejamos como $. Ajax () parece
$. Ajax ({
, type: "POST",
, url: "some.php",
, dados: "name = Peter & location = NY",
( msg ) { success: function (msg) {
+ msg ) ; alert ("Resposta do servidor" + msg);
}
}); |
Isso é bem isso. O parâmetro de tipo leva "GET" ou "POST", que significa que você pode enviar AJAX requestion como POST ou GET (eu prefiro sempre POST). O resto dos parâmetros são bastante auto-explicativo, se você der uma olhada no código novamente.
Agora vamos fazer um pequeno script AJAX que lê o link de tags de hiperlinks (<a>) e carrega a pedido de alguns elementos div no documento.
Primeiro vamos dar uma html normal do documento php que será parecido com este
<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="PT-BR">
<head>
<title> teste de link 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> |
Agora vamos adicionar alguns links para o documento. Para um melhor tipo de menu de olhar usaremos uma UL> LI e Link. Isso vai ficar assim
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> carga em Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> carga em Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> carga em Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> carga em Div 4 </ a> </ li>
</ Ul> |
Como você pode ver, temos colocar links em elementos da lista dentro de um objeto de lista não ordenada. Dê uma olhada em propriedades do tag <a>. Temos href, classe e atributo rel que parece nada diferente do que uma ligação normal. Se você ver, temos dado o atributo rel para alguns nomes div nomeadamente div1, div2 .. assim por diante. Isso significa que nós queremos a resposta do href para ser carregado para essas divs. Como fazer isso? Vamos adicionar os divs primeiro
<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> |
E a parte de verdade agora - nós, dadas as ligações de uma classe "ajax_link". Nós só vamos adicionar dinamicamente ações ajax apenas links que têm um nome de classe chamada "ajax_link". Inferno, nós não todos os links de uma página para ter ações ajax, não é?
Então, sobre a carga documento que faríamos isso.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, type: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { success: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Deixe-me explicar o roteiro um pouco. O evento document.ready é um evento que é disparado no carregamento da página. E, então, está atribuindo algum tipo de códigos sobre o evento clique dos links que têm uma classe "ajax_link". Fazendo isso current_link $ = $ (this); permite ter o objeto de link atual estar disponível dentro da função de callback. E nós temos
$ ("#" + $ Current_link.attr ("rel")). Html (e)
o que significa que $ ("div_id") html (server_response) e temos que definir o param url da função ajax $ dinamicamente com url:.. $ current_link.attr ("href"). Então, agora todos os meios "todos esses links que têm uma classe" ajax_link "- Adicionar um clique manipulador de eventos - em seguida, executar e levar o pedido AJAX ligações href poperty e carregar a resposta em uma div cujo id corresponde ao" "atributo rel do ligação ". E o retorno false impede que o trabalho link como link normal 
Quero ver uma ação? Aqui vai.
E você pode baixar o código fonte também.
Na próxima seção deste pequeno tutorial vamos usar a mesma coisa, mas com um pouco de conforto.
Aplicando o método mais fácil
Tudo permanece quase o mesmo. Nós vamos mudar o método ajax aqui. Então, ao invés de escrever todo o bloco ajax $. Podemos conseguir a mesma coisa com o seguinte.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (this) attr ("href").);
; return false;
});
}); |
É muito menos complicado agora, certo? O método load carrega o conteúdo ajax dentro do elemento que está anexado. Se $ ("# somediv_id"). Load ("mypage.php"), ele vai tentar carregar o conteúdo mypage.php está nele. Muito simples, não é? Mas eu sugiro que você se acostumar com o método main (mostrado na primeira parte).
No arquivo zip há um outro arquivo chamado ajax2.php que demonstra essa methos que tem o mesmo resultado.
Então, AJAX não é tão difícil quanto parece, né? Quando você se torna muito fluente com operações AJAX, você vai criar magias.
Obrigado por ler btw.
Comentários Recentes