Implementando a classe Asynchronous em Ajax

Tendo determinado XMLHttpRequests assíncronas são o caminho a percorrer, a classe de encapsulamento Asynchronous está definido. Uma classe de encapsulamento não é necessário, mas torna mais simples para trabalhar com o objeto XMLHttpRequest. A principal vantagem de usar uma classe de encapsulamento é a associação do objeto XMLHttpRequest, com um bloco de código. Para relembrar, vamos analisar o código para carregar um feed Atom novamente:

LoadAtomFeed function () (var assíncrono = Asynchronous novo (); asynchronous.settings = (onComplete: function (xmlhttp) (parseAtom (xmlhttp.responseXML); flexbox.update ();)) asynchronous.get ( "/ serviços / blog / entradas / current ");)

Para fazer o trabalho de classe assíncrona, o usuário precisa fazer duas coisas: associar o membro de dados de configurações com algumas informações e chamar um método adequado (por exemplo, obter) para fazer uma solicitação HTTP. A finalidade do membro de dados de definições é fornecer a informação extra e callbacks associados a um pedido. No exemplo, o método onComplete é chamado uma vez o pedido de HTTP é concluída.

O código como está, é bastante fácil de entender, mas lembre-se que o código é assíncrona. Como resultado, quando o método asynchronous.get é chamado, a função LoadAtomFeed vai sair antes de chamar onComplete e devolver o controle ao usuário. Em um cenário pessimista, se um usuário vai clicar louco, pode haver dezenas de solicitações estão sendo feitas. A alternativa é usar chamadas síncronas, que trava o navegador, e que em si não é uma opção. No lado positivo, o comportamento assíncrono permite que um usuário para iniciar as tarefas e esperar pelos resultados. O programador tem de se manter vigilante e certifique-se que o usuário não começar antes de ele ou ela mesma. Agora que você tem uma compreensão básica de como usar a classe Asynchronous, vamos olhar para os detalhes da implementação assíncrona. A classe expõe um método para cada verbo HTTP, e no exemplo do método get corresponde ao verbo HTTP GET. A implementação de chegar é o seguinte:

função HttpRequest_get (strURL) (this.call ((: action "GET", url: strURL));)

Na execução do HttpRequest_get, que é mapeado para Asynchronous.get, uma referência para a chamada de função é feita. A função get é um método de conveniência para o método de chamada. A chamada de método aceita um único parâmetro: um objeto com os membros de dados específicos. No caso de o método GET, a ação e os membros url dados são definidos. Então, por que criar um objeto, quando você poderia ter usado dois parâmetros, a ação ea url, para chamar o método? A resposta é a flexibilidade. JavaScript não compreende funções sobrecarregadas, e só pode haver uma única função com um único conjunto de parâmetros. Assim que o desenvolvedor não tem que jogar as permutações e as combinações do jogo com os parâmetros (por exemplo, que os parâmetros, que ordem, etc), um objeto com membros de dados é criado.

O método mais importante da chamada assíncrona é, pois, independentemente de qual verbo HTTP é usado, o método é executado. O código a seguir é a implementação completa da chamada.

 Fonte:

Vou agora explicar o método de chamada do começo ao fim, e eu reitero os pedaços de código individual, com algumas reiterações abreviado. Eu mostro o código de novo se for caso disso, para facilitar a compreensão, como a implementação da chamada é relativamente longo, e faz muitas coisas diferentes. Começando pelo topo, a variável de instância é atribuído o valor assim: var exemplo = this; Esta atribuição é necessário porque um bloco de código será atribuído ao membro dados onreadystatechange, eo bloco de código tem de lembrar que Asynchronous instância está sendo referenciada. Após a atribuição, podemos validar que o membro de dados de definições foi preenchido:

if (! this.settings) (throw new Error ( "Settings não está definido");)

O membro de dados de configurações tem de existir, pois contém informações sobre quais os métodos a ser chamada quando o pedido foi concluída e que os cabeçalhos HTTP para adicionar ao pedido. Nesse ponto, você deve notar que dois objetos são necessários para fazer funcionar o método de chamada. O primeiro objeto é ajustes, eo segundo objeto é o parâmetro de solicitação. Como um atalho, um desenvolvedor pode combinar os dois objetos em um, e quer passá-lo para o método de chamada ou atribuí-lo ao membro de dados de configurações. Este atalho seria equivocada, pois cada objeto tem um propósito diferente.

O objeto de pedido é usado para definir as configurações para o pedido de URL específico que está sendo feito. As configurações de objeto é usado para definir as configurações que transcendem todas as chamadas e pode ser considerado um retorno global para a instância do objeto assíncrona. A idéia é que você alocar uma instância de Asynchronous, definir como deve se comportar, e então começar a fazer os pedidos com a possibilidade de chamar URLs diferentes. Então, o próximo passo é verificar se a instância XMLHttpRequest actual já não está preocupado:

if (this.xmlhttp.readyState! = 4 & & this.xmlhttp.readyState! = 0) (throw new Error ( "pedido Atualmente ativa não pode continuar");)

Ao utilizar XMLHttpRequest no modo assíncrono, é possível fazer uma solicitação HTTP em uma nova instância XMLHttpRequest execução. O problema é que XMLHttpRequest não pode servir a dois pedidos, e vai parar o pedido de execução já para fazer uma nova solicitação. A propriedade readyState é usado para indicar o estado do objeto XMLHttpRequest. Se readyState é 0, então nenhuma solicitação foi feita uma solicitação HTTP e podem ser feitas. Se readyState é 4, em seguida, um pedido foi feito, o pedido foi concluído, eo objeto está pronto para fazer outro pedido. ReadyState Se tiver qualquer outro valor, o pedido está sendo executado, e, portanto, um outro pedido de execução não faz sentido. Após a inicialização e verificação foi concluída, é possível fazer um pedido: this.xmlhttp.open (request.action, solicitar . url, true, this.settings.username, this.settings.password); chamar o método Open, você precisa especificar no verbo aminimum o HTTP (por exemplo, GET, POST), através do membro de dados request.action eo URL via o membro de dados request.url. Sempre que você fizer qualquer solicitação XMLHttpRequest, certifique-se que a primeira ação é o método aberto. Se você atribuir a função antes de chamar onreadystatechange aberto, o seu pedido não irá funcionar corretamente. Se você tentar atribuir cabeçalhos de solicitação antes de chamar aberto, o seu pedido não irá funcionar corretamente. O método aberto é usado para inicializar e criar um novo pedido; aberto não irá chamar o servidor, que é da responsabilidade de enviar.

No exemplo de método aberto, um nome de usuário e senha this.settings.username (e this.settings.password, respectivamente) são sempre enviadas para o servidor, mesmo se não houver nenhum nome de usuário e senha. Não faz nenhum dano para enviar valores nulos, e que não irá afectar o funcionamento de uma solicitação HTTP. O nome de usuário ea senha são usados somente quando o servidor HTTP executa um desafio e pede um username e password. No contexto do objeto XMLHttpRequest, o nome de usuário ea senha são usados somente se a implementação subjacente de XMLHttpRequest necessita da informação. Depois de ter aberto o pedido, você pode adicionar cabeçalhos HTTP personalizados usando o método setRequestHeaders:

if (Request.Headers) (for (defHeader em Request.Headers) (this.xmlhttp.setRequestHeader (defHeader, Request.Headers [defHeader]);)) if (this.settings.headers) (for (defHeader em this.settings . headers) (this.xmlhttp.setRequestHeader (defHeader, this.settings.headers [defHeader]);))

Os cabeçalhos são atribuídas duas vezes: uma vez para que as configurações associadas com o pedido (Request.Headers) e uma vez para as configurações globais (this.settings.headers). Os cabeçalhos que você atribuir cabeçalhos podem ser padrão ou cabeçalhos HTTP personalizados. Se você planeja usar cabeçalhos HTTP personalizados, é sempre uma boa idéia de prefixo com X-los. Dessa forma, seus cabeçalhos não serão confundidos com os cabeçalhos HTTP padrão. Depois de ter atribuído os cabeçalhos, a função de retorno onreadystatechange é atribuído:

this.xmlhttp.onreadystatechange = function () (switch (instance.xmlhttp.readyState) (case 1: if (instance.settings.onLoading) (instance.settings.onLoading (instance.xmlhttp);) break; case 2: if ( instance.settings.onLoaded) (instance.settings.onLoaded (instance.xmlhttp);) break; case 3: if (instance.settings.onInteractive) (instance.settings.onInteractive (instance.xmlhttp);) break; case 4: if (instance.settings.onComplete) (try (instance.settings.onComplete instance.xmlhttp ();) catch (e) (globals.errorHandler break (e);));)

Na execução assíncrona de onreadystatechange, uma instrução switch executa um dos quatro estados válidos pronto. Da fonte, você pode associar cada número com um estado específico. O estado mais importante está pronto 4, indicando que o conteúdo foi recuperado, carregado e processado. O estado 4 pronto chama o método definido pelo cliente nas definições de propriedade. Repare na execução da função atribuída onreadystatechange que a variável de instância substituiu uma referência a isso.

A execução da função onreadystatechange é um exagero, pois 98% do tempo você usa Asynchronous você só se preocupam com o estado de pronto da 4. Para todos os outros estados pronto, dependendo do navegador, uma certa funcionalidade é possível. Por causa desta inconsistência e incompletude do estado do objeto XMLHttpRequest, não há nenhuma necessidade real para o processo de outros estados pronto. O código de função restantes chamada envolve o envio do pedido para o servidor usando a função Enviar:

try (this.xmlhttp.send (request.data);) catch (e) (globals.errorHandler (e);)

A enviar função é usada para fazer a solicitação física para o servidor. A função também é utilizado para enviar todos os dados associados com a solicitação. Se não houver dados, em seguida, chamar enviar com valor nulo não irá gerar um erro. Quando o método enviar fez o seu pedido, ele retorna imediatamente, ea função JavaScript Asynchronous_call retornará controle para o navegador. Neste momento, o cliente deve adicionar algum código para não permitir que várias chamadas. Por exemplo, se o pedido foi ativado usando o botão, então até que o pedido foi devolvido, o botão pode ser desativado. Evidentemente, este apresenta um potencial problema, caso o pedido não retorna eo botão permanece desativado. Para resolver esse problema, você pode introduzir um temporizador que dá ao solicitar um valor máximo de tempo. Se durante esse período, a solicitação ainda não tenha retornado, o método é chamado e XMLHttpRequest.abort o botão é ativado novamente.

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 da Classe Asynchronous em 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.