ASP + jQuery
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 com em termos de incompatibilidades cross-browser e sua sintaxe e habilidades ,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 ser 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á gerado 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>
<option> — Selecione Cliente — </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></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-se que eles foram recuperados com êxito, eles são colocados em uma matriz através da metodo 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 registo 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ído 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 se 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 src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script>
$(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” é inocentado de qualquer conteúdo existente, e as propriedades do objeto do cliente são escritos 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.
Escrito por X@nBuRzUm
on agosto 31, 2009. Arquivado em ASP.net, Javascript.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
2 respostas a ASP + jQuery
Deixe uma resposta
Autor do Artigo
X@nBuRzUm
muito, bom parabens, xanburzum
legal, um bom começo com JQuery