Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

xanburzum

jQuery + ASP

Por , em ASP Clássico

Recommended Posts

xanburzum    169

xanburzum
Postado

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 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-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 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" é 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito