jQuery é uma biblioteca que é projetada para ajudar desenvolvedores web com Javascript de uma maneira muito mais simples. Internamente, ele lida com um monte de bobagens que os desenvolvedores têm que trabalhar, em termos de incompatibilidades cross-browser e sua sintaxe e habilidades, o que resulta em muito menos código a ser escrito.
O cenário: uma Select box contendo os nomes das empresas do banco de dados Northwind, com o endereço e outros detalhes, a serem recuperados de forma assíncrona quando a empresa é selecionada. Estes serão exibidos em uma área específica na página. Há uma diferença – para além da utilização de jQuery – em que os dados relativos aos detalhes da empresa serão gerados como uma string JSON, ao invés de um trecho de html.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<%
strConn = "Data Source=127.0.0.1;Initial Catalog=NorthWind;Integrated Security=SSPI;"
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open strConn
Set rs = Conn.Execute("SELECT [CustomerID], [CompanyName] FROM [Customers]")
If Not rs.EOF Then
arrCustomer = rs.GetRows
rs.Close : Set rs = Nothing : Conn.Close : Set Conn = Nothing
%>
<form>
<select name="CustomerID" id="CustomerID">
<option> -- Select Customer -- </option>
<%
for i = 0 to Ubound(arrCustomer,2)
Response.Write "<option value=""" & arrCustomer(0,i) & """>"
Response.Write arrCustomer(1,i) & "</option>" & VbCrLf
next
%>
</select>
</form>
<%
Else
rs.Close : Set rs = Nothing : Conn.Close : Set Conn = Nothing
Response.Write "<p>Algo errado ocorreu</p>"
End If
%>
<div id="CustomerDetails"></div>
</body>
</html>O VBScript se conecta a um banco de dados SQL Server local Northwind e obtém o ID e o nome da empresa para todos os clientes. Supondo que eles foram recuperados com êxito, eles são colocados em uma matriz através da método RecordSet.GetRows () . A matriz é iterada através de elementos <option> são adicionados dinamicamente para a página com a identificação de como o valor e o CompanyName como o texto que o usuário vê. No exemplo original, o <select> tinha um manipulador de eventos onchange embutida nele. jQuery é toda sobre “unobtrusive” Javascript e tem uma bela maneira de gerir o registro de um manipulador de eventos com um elemento HTML. Mas antes de chegar ao Javascript, nós vamos lidar com o código que retorna dados individuais do cliente.
FetchCustomers.asp:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
strConn = "Data Source=127.0.0.1;Initial Catalog=NorthWind;Integrated Security=SSPI;"
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open strConn
query = "SELECT * FROM Customers WHERE CustomerID = ?"
CustomerID = Request.QueryString("CustomerID")
arParams = array(CustomerID)
Set cmd = Server.CreateObject("ADODB.Command")
cmd.CommandText = query
Set cmd.ActiveConnection = Conn
Set rs = cmd.Execute(,arParams,1)
If Not rs.EOF Then
Response.Write "{""j"":[{""__type"":""Customer""," & _
"""CompanyName"":""" & rs("CompanyName") & """," & _
"""Address"":""" & rs("Address") & """," & _
"""City"":""" & rs("City") & """," & _
"""Region"":""" & rs("Region") & """," & _
"""PostalCode"":""" & rs("PostalCode") & """," & _
"""Country"":""" & rs("Country") & """," & _
"""Tel"":""" & rs("Phone") & """}]}"
End If
rs.Close
Set rs = Nothing
Set cmd = Nothing
Conn.Close
Set Conn = Nothing
Response.End()
%> Esta é uma peça bastante padrão de acesso a dados. Ele se conecta ao banco de dados e recupera o registro de company associada ao valor de CustomerID passado no QueryString. Ele usa parâmetros para se proteger contra qualquer possibilidade de SQL Injection. Se recuperado com êxito, uma cadeia de caracteres JSON é construída a partir do registro. Toda duplicação das cotações no código VBScript torna difícil ver exatamente o que o formato da saída será, aqui está como seria o registro:
{"j":[{"__type":"Customer","CompanyName":"Empresa XXXX","Address":"Av. Paulo Grande",
"City":"Piracicaba","Region":"SP","PostalCode":"13420080","Country":"Brasil","Tel":"(19) 3422-2951"}]} Este é um objeto Javascript, chama J, que contém uma propriedade. A propriedade é um array de objetos aninhados Javascript. Esta matriz contém apenas um elemento ou objeto, que tem um número de propriedades com seus valores definidos. Javascript que será responsável por chamar a página, passando os valores QueryString e gerar o JSON que é retornado na resposta:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#CustomerID').change(getCustomer);
});
function getCustomer() {
$.ajax({
type: "GET",
url: "FetchCustomer.asp",
data: "CustomerID=" + $('#CustomerID').val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var customer = (typeof response.j) == 'string' ? eval('(' + response.j + ')') : response.j;
$('#CustomerDetails').empty();
$('#CustomerDetails').append('<p><strong>' + customer[0].CompanyName + '</strong><br />' +
customer[0].Address + '<br />' +
customer[0].City + '<br />' +
customer[0].Region + '<br />' +
customer[0].PostalCode + '<br />' +
customer[0].Country + '<br />' +
'Tel: ' + customer[0].Tel + '</p>');
}
});
}
</script> Depois de linkar para o jQuery que está disponível a partir do Google Code, chegamos ao script da página. A instrução encontra o primeiro elemento com o id do CusomterID (que é o <select>), e adiciona um manipulador de eventos para o evento onchange. Nesse caso, a função GetCustomer é chamado. GetCustomer é definido. Usando jQuery’s built-in funcionalidade de AJAX, uma solicitação GET é preparado que chama a página FetchCustomer.asp. O valor selecionado da lista <select> é passada como um parâmetro QueryString. Se a chamada for bem sucedida, a resposta é primeiro validado em seguida eval () é usado para a string JSON em objetos de volta Javascript.
De lá, a div com o id “CustomerDetails” é inocentada de qualquer conteúdo existente, e as propriedades do objeto do cliente são escritas para o div em vez disso.
Se você retornar JSON ou html formatada é até você. JSON carrega uma sobrecarga significativamente menor em termos de carga sobre a rede, mas requer mais código para gerenciar no cliente. Às vezes você pode não ter escolha, por exemplo, se você está USIG um serviço da Web externo que retorna JSON. Neste caso, como você não tem controle sobre o conteúdo retornado, você não deve usar o eval () para deserialise a string JSON. Se você cavar em torno entre os plugins do jQuery, você vai encontrar algumas que foram criadas exclusivamente para validar e deserialise JSON de origem desconhecida com segurança.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?