Implementação de um carrinho de compras usando Ajax

O exemplo de carrinho de compras será implementado na sua forma abreviada para fins de explicação. A solução irá centrar-se na geração do URL original e usando essa URL exclusivo ao comprar algo.

A solução inicial

O seguinte ilustra o shopping código fonte exemplo.

 Fonte: / cliente / artigos ajaxrest / Arquitectura / shoppingcart.html  Carrinho de Compras Initialize ()">

No exemplo de código fonte, o código em negrito representa os pedaços de funcionalidades que se relacionam a um uso específico de UniqueURL. A página HTML em um contexto global representa a página pai que toda a gente usa para ter um carrinho de compras e comprar alguns itens. Quando a página é carregada, o evento body.onload é acionado, fazendo com que a função Initialize a ser chamado. Na execução do Initialize, unique.getIt é chamado, o que resulta em um único URL que representa um carrinho de compras.

Ao adicionar o código de URL exclusivo para o evento body.onload, você está certo de que quem visita a página HTML terá um carrinho de compras à sua disposição. A URL gerada é utilizada sempre que os usuários clicam no botão Buy It, provocando o chamado função BuyItems. A implementação geral de BuyIt não é importante, porque o que você está fazendo é postando os últimos detalhes restantes para comprar o que os usuários tenham adicionado ao carrinho de compras. Na chamada de método asynchronous.post, o URL usado é unique.uniqueURL. Quando a compra foi desmarcada na execução onComplete, o membro de dados uniqueURL é limpo e um novo, único shopping-cart URL é recuperada. O código fornece um entendimento de como usar a URL original, mas você deve compreender as seguintes considerações:

• Quando um URL exclusivo, como / pyservices/shopping/cart/122343, é devolvido, o cliente acrescenta o identificador / checkout. Usando uma URL nonappended exigiria a URL para aceitar solicitações GET e POST para estruturas de dados, e que não seria compatível com REST. No lado do cliente, adicionando um identificador não é grande coisa, mas no servidor, ele se torna um grande negócio, como será discutido em breve.

• O exemplo de página HTML não incluir o código para pesquisar, navegar e adicionar itens à página HTML. Você pode usar duas soluções: a injeção de conteúdo ou um iframe. Usando a injeção de conteúdo, os itens do catálogo seria pedaços de código HTML que seria adicionado à página HTML atual usando a propriedade innerHTML. A outra abordagem é usar um iframe flutuante, que permite separar a exibição de itens do catálogo da manipulação.

• No caso do carrinho de compras, o proprietário do URL original é o cliente. Isto levanta a pergunta: "Se os usuários pressione a atualização da página, como eles irão se lembrar o que estavam fazendo referência?" O servidor não vai dizer aos clientes que o original é URL. Os clientes podem gerir este cliente usando cookies de lado, como será ilustrado em breve.

Seguindo a pista do Unique URLs

Normalmente, os frameworks de aplicativos da Web usam cookies para manter o servidor de objetos de sessão do lado. Embora possa parecer que o servidor de objetos de sessão do lado resolver muitos problemas, que na verdade pode causar muitos problemas. Vamos dizer que você está escrevendo uma arquitetura orientada a serviços (SOA) do cliente que usa os serviços da Web em nenhum lugar da documentação do Web Service você nunca vai encontrar instruções sobre como manter a sessão, porque é assim que o código está escrito. Remover o termo Web Services e usar uma chamada de procedimento remoto. Por padrão, uma chamada de procedimento remoto não vai se lembrar que a chamou. Chamadas de procedimento remoto esperar o chamador para lembrar que, como é que a abordagem correta. Para lhe dar um exemplo real de por que é ruim para usar do lado do servidor sessões , digamos que você for fazer compras na Amazon.com, e você decide comprar algumas coisas. Você não está indo para pagar o conteúdo em seu carrinho de compras, porque sua mãe decidiu comprar tudo como um presente de aniversário. Em um verdadeiro supermercado de vida, tendo sua mãe comprar o conteúdo do seu carrinho de compras é tão fácil como entregar seu carrinho de compras.

Na Amazon.com, cada usuário recebe um carrinho de compras único. Portanto, para que sua mãe pagar pelo conteúdo, você deve criar manualmente uma lista que você enviar e-mail para sua mãe. Ou você poderia perguntar a sua mãe para seu cartão de crédito. A primeira opção é fácil de fazer, mas é demorado e "manco", como ele requer que você escreva o conteúdo do seu carrinho de compras e, em seguida, ter seu adicionar os itens ao seu carrinho de compras. É como se você entrar em uma loja, encher o carrinho, e então criar uma lista de itens no carrinho de mão e que lista a sua mãe. Sua mãe, então tem de corrida ao redor do supermercado e encher o carrinho com os mesmos itens para que ela possa pagar. A segunda opção não exige nenhum esforço, como extra, mas requer sua mãe confiando em você com seu cartão de crédito. Eu tenho certeza que sua mãe iria confiar em você, mas ela provavelmente seria desconfortável, como seria de ninguém. Como você pode ver, não há nenhuma opção viável envolvendo, lado servidor baseada em sessão URLs.

A única opção viável é parar de usar do lado do servidor, baseada em sessão URLs e começar a usar URLs únicas com o cliente, gestão das referências para o URL. Usando o cliente gerenciado URLs únicas abre novas possibilidades. Por exemplo, digamos que você criar uma TV, rádio e sistema de som e adicionar os itens a um carrinho de compras. Então, como um serviço de valor adicionado, que promove o seu carrinho de compras, e sempre que alguém queira comprar o seu super sistema de som, eles pagam apenas para o carrinho de compras e não ter que ir ao redor do local encontrar os itens individuais. Em teoria, você poderia criar milhares de carrinhos de compras diferentes, com diferentes configurações. Entanto, você não pode fazer aquele tipo de hoje, com valor acrescentado no lado do servidor, baseada em sessão URLs. Muitos dizem cookies HTTP são ruins, mas isso depende de como Os cookies são usados. Eu considero cookies como um papel de apoio para qualquer tipo de aplicação. Agora vamos falar sobre client-side cookies e demora uma discussão mais aprofundada do bolinho até mais tarde neste artigo. Não há nenhuma diferença real entre um client-side ou server-cookie lado, porque um "cookie" é um símbolo mantido pelo cliente e enviados para o servidor. O cliente ou servidor pode atribuir o token, e no caso do carrinho de compras, o cliente irá atribuir o cookie. O cookie que é atribuída é a URL original, bem como o código modificado carrinho de compras é a seguinte (note que apenas o código foi abreviado para fins de clareza):

O código em negrito representa o código relacionado ao gerenciamento de um cookie. Em particular, três as-de-mas ainda indefinido funções são usadas: createCookie, readCookie e eraseCookie. Estas três funções são usados para escrever, ler e deletar um cookie. As funções têm sido orientadas para a facilidade de utilização, tornando-o mais simples possível para ler e escrever pares chave-valor. A chave é um nome de cookie, eo valor é um valor de cookie. A lógica da funcionalidade do cookie é o seguinte:

• Quando a página é carregada, o Initialize função verifica readCookie usando a função para ver se um cookie com um carrinho de compras nome. Se o cookie existe, então não é necessário criar um novo cookie, mas o valor do cookie tem que ser atribuído ao membro dados unique.uniqueURL. Se o cookie não existir, isso significa que não há carrinho de compras associados, e assim o unique.getIt função precisa ser chamada.

• Se um cookie tem que ser recuperado usando o método unique.getIt, em seguida, quando o único URL é gerada, o unique.haveIt método é chamado. Na execução do unique.haveIt, o carrinho de compras "cookie" é atribuído o valor do membro de dados unique.uniqueURL com um prazo de dois dias.

• Quando o carrinho de compras foi paga e uma nova URL original é gerado, o cookie é apagado com o eraseCookie função. A implementação das rotinas de cookie document.cookie manipula o objeto. O objeto document.cookie retorna os cookies aplicável ao domínio atual. O código a seguir mostra a implementação do cookie2 funções:

createCookie função (nome, valor, dias) (if (dia) (var date = new Date (); date.setTime (date.getTime () + (dias * 24 * 60 * 60 * 1000)); var expires = " ; expires = "+ date.toGMTString ();) else var expires =" "; document.cookie = nome +"="+ value + expires + "; path = /";ReadCookie) function (name) (var nameEQ = name + "="; var ca = document.cookie.split (';');for (var i = 0; i <ca.length; i + +) (var c = ca [i]; while (c.charAt (0) == '') c = c.substring (1, c.length); if (c.indexOf (nameEQ) == 0) c.substring retorno (nameEQ.length, c.length);) return null;) eraseCookie function (name) ( createCookie (nome ,"",- 1);)

O código em negrito ilustra como o objeto document.cookie é manipulado. A manipulação é bastante peculiar e completamente heterodoxo. Na execução do createCookie, um buffer é criado e atribuído a document.cookie. Normalmente, uma tarefa para um membro de dados redefine o valor do membro de dados. Não é assim com o membro de dados document.cookie. Atribuir o membro de dados ou cria um novo cookie ou redefine o valor de um cookie existente.

Na execução do createCookie, o dia parâmetro atribuir um tempo para o cookie a ser criado, indicando que o cookie irá expirar. Se o cookie eo createCookie função não estão associadas a uma data de tempo, então o cookie que expire o momento em que o navegador for fechado. Document.cookie Ao ler o membro de dados, os cookies aplicável ao domínio atualmente carregada e documentos são recuperados. O seguinte pode ser um exemplo de valor document.cookie:

cc = valor1; shoppingcart = / pyservices / / carrinho / toRedirected

O valor da document.cookie é problemático, porque é uma cadeia que contém múltiplos cookies. Para encontrar um único cookie, a cadeia tem de ser analisado. A implementação de readCookie gerencia automaticamente a análise e recupera o valor para um cookie identificador particular. EraseCookie A função utiliza a função createCookie para excluir um cookie. Novamente, isso é pouco convencional, mas usa a funcionalidade de atribuição de uma data em que expirou a um cookie irá apagar automaticamente o cookie.

um artigo submetido por Sonja Lande

Isenção de responsabilidade:O nosso site não se responsabiliza pelo conteúdo deste artigo. Webarticles é uma fonte de informação livre.
Importante: Este artigo "Implementação de um carrinho usando Ajax" foi traduzida por um software automático. Nós sentimos muito por quaisquer erros de ortografia que pode ter ocorrido. Obrigado pela sua compreensão.