O Ajax não é uma nova linguagem de programação, mas uma nova abordagem que usa os padrões existentes. O Ajax pode trocar dados com o servidor sem recarregar a página inteira. Esse método de interação assíncrona permite que os usuários obtenham novos dados sem precisar atualizar a página depois de clicar.
Objeto xmlHttPrequest
O núcleo do AJAX é o objeto xmlHttPrequest (XHR). O XHR fornece uma interface para enviar solicitações ao servidor e resolver as respostas do servidor. Capacidade de obter novos dados do servidor de maneira assíncrona.
Crie objetos no navegador (suporta apenas IE7 e superior):
var xhr = novo xmlHttPrequest ();
Como usar xhr
A primeira coisa a introduzir é o método open (). Recebe 3 parâmetros:
• O tipo de solicitação a ser enviado (postagem, obtenha, etc.)
• URL solicitado
• Valor bolean indicando se a solicitação é enviada de forma assíncrona
Chamando Open () Exemplo:
xhr.open ("get", "index.jsp", false);
Obtenha solicitação para index.jsp. A URL é relativa à página atual em que o código é executado; Chamando o método Open () na verdade não envia a solicitação, ele apenas inicia uma solicitação de envio.
Ligue para o envio () para enviar a solicitação:
xhr.send (nulo);
Send () recebe um parâmetro, ou seja, os dados a serem enviados como órgão solicitante. Se não for necessário que os dados sejam enviados através do órgão de solicitação, o NULL deverá ser passado.
Os dados correspondentes serão preenchidos com as propriedades relevantes do objeto XHR:
• ResponseText: o texto retornou como o corpo de resposta
• Responsexml: o tipo de conteúdo como a resposta é "text/xml" ou "aplicativo/xml"
• Status: o status HTTP da resposta
• Statustext: Descrição do status HTTP
Depois de receber a resposta, verifique o atributo de status e confirme se a resposta retornou, geralmente 200 é usado como um sinal de sucesso. O código de status 304 indica que o recurso não foi modificado e a versão em cache no navegador pode ser usada diretamente.
Para receber uma resposta adequada, dois códigos de status devem ser detectados da seguinte maneira:
xhr.open ("get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.Responsext); mais.Ao detectar a propriedade ReadyState, a fase ativa atual do processo de solicitação/resposta pode ser determinada.
• 0: Não é inicializado. O método open () não foi chamado
• 1: Iniciar. O método open () foi chamado e o método send () não foi chamado.
• 2: Enviar. O método send () foi chamado, nenhuma resposta foi recebida
• 3: Receba. Alguns dados foram recebidos
• 4: concluído. Todos os dados foram recebidos e podem ser usados no lado do cliente
Quando o valor da propriedade ReadyState mudar, um evento ReadyStateChange será acionado. Para garantir a compatibilidade do navegador, especifique o manipulador de eventos ONREADESTATECHANGE antes de ligar para o Open ().
var xhr = new xmlHttPrequest (); xhr.onReadyStateChange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) | xhr.status == 304). " + xhr.status);}}}; xhr.open (" get "," index.jsp ", true); xhr.send (null);A solicitação assíncrona pode ser cancelada antes de receber a resposta:
xhr.abort ();
Informações do cabeçalho HTTP
Os objetos XHR fornecem métodos para manipular cabeçalhos de solicitação e responder às informações do cabeçalho.
Por padrão, ao enviar uma solicitação XHR, as seguintes informações do cabeçalho também serão enviadas.
• Aceitar: o tipo de conteúdo que o navegador pode lidar
• Aceitar-Charset: o conjunto de caracteres que o navegador pode exibir
• Aceitar codificação: codificação compactada que o navegador pode lidar
• Aceitar Language: o idioma atualmente definido pelo navegador
• Conexão: o tipo de conexão entre o navegador e o servidor
• Cookie: qualquer cookies definido na página atual
• Host: o domínio onde a página em que a solicitação foi emitida está localizada
• Referente: URL da página que emitiu a solicitação
• Usuário-AENT: a sequência do agente do usuário do navegador
Use o setRequestHeader () para definir informações de cabeçalho de solicitação personalizadas. Você deve chamar o método open () depois de chamá -lo e antes de ligar para send ()
setRequestHeader ():
xhr.open ("get", "index.jsp", true); xhr.setRequestHeader ("myheader", "myValue"); xhr.send (nulo);Ligue para getResponseHeader () e passe no nome do campo para obter as informações correspondentes do cabeçalho da resposta. getAllResponseHeader () recebe uma string longa contendo todas as informações do cabeçalho.
var myHeader = xhr.getResponseHeader ("myHeader"); var allHeaders = xhr.getAllResponseHeader ();Obtenha solicitação
O Get está acostumado a consultar o servidor para obter determinadas informações. Você pode anexar os parâmetros da string de consulta ao final do URL. O nome e o valor de cada parâmetro na sequência de consulta devem ser codificados usando o codeuricomponent ():
xhr.open ("get", "login.jsp? name1 = value1 & name2 = value2", false); addurlparam () recebe três parâmetros: o URL do parâmetro a ser adicionado, o nome do parâmetro e o valor do parâmetro. var url = "login.jsp"; // adicione parâmetro url = addurlparam (url, "nome de usuário", "xxyh"); url = addurlparam (url, "senha", "xxyh123"); // inicialize a solicitação XHR.OPEN ("get", url, false);Solicitação de postagem
A solicitação de postagem é usada para enviar dados para o servidor que devem ser salvos. O corpo de uma solicitação de postagem pode conter muitos dados e o formato é ilimitado.
Solicitação de inicialização:
xhr.open ("post", "login.jsp", true); Defina primeiro as informações do cabeçalho do tipo de conteúdo como Application/X-Www-Form-Urlencoded e, em seguida, crie um formato de String. Se você precisar serializar os dados do formulário na página e enviá-los para o servidor através do XHR, poderá usar a função Serialize () para criar essa string: xhr.open ("get", "Login.jsp", false); xhr.setRequestHeader ("content-type", "Application/x-ww-form-curled") Document.getElementById ("User-Info"); Xhr.send (Serialize (form));O exposto acima é o entendimento profundo do Ajax em JavaScript apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!