Uma importante tecnologia (ferramenta) usada ao projetar AJAX é o objeto XMLHTTPRequest. O objeto XMLHttpRequest é a base técnica para todos os aplicativos AJAX e Web 2.0 atuais. Embora os fornecedores de software e as comunidades de código aberto agora forneçam várias estruturas AJAX para simplificar ainda mais o uso do objeto XMLHttpRequest, ainda é necessário que entendamos as propriedades e os métodos desse objeto.
1. O que é o objeto XMLHTTPRequest?
A definição mais comum é: XmlHttp é um conjunto de APIs que podem transmitir ou receber XML e outros dados através do protocolo http em JavaScript, VbScript, Jscript e outras linguagens de script. O maior uso do XmlHttp é que ele pode atualizar parte do conteúdo de uma página da web sem atualizar a página inteira. (Esta função é um dos principais recursos do AJAX)
Explicação do MSDN: XmlHttp fornece um protocolo para o cliente se comunicar com o servidor http. O cliente pode enviar uma solicitação ao servidor http por meio do objeto XmlHttp (MSXML2.XMLHTTP.3.0) e usar o modelo de objeto de documento XML da Microsoft (DOM) para processar a resposta.
Deixe-me divagar aqui. Na verdade, essa coisa apareceu muito cedo. No entanto, o suporte do navegador não era suficiente no passado. Ele só era suportado no IE, então a maioria dos programadores WEB não o usava muito. mudou muito, Mozilla e Safari o adotaram como um padrão de fato e os navegadores convencionais começaram a suportar o objeto XMLHTTPRequest. Mas o que precisa ser enfatizado aqui é que XMLHTTPRequest ainda não é um padrão W3C, portanto o desempenho em diferentes navegadores é um pouco diferente.
2. Crie um objeto XMLHTTPRequest
Falando em diferenças, vamos dar uma olhada em como declará-lo (usá-lo). Antes de usar o objeto XMLHTTPRequest para enviar solicitações e processar respostas, devemos usar javascript para criar um objeto XMLHTTPRequest. (O IE implementa XMLHTTPRequest como um objeto ActiveX, e outros navegadores [como Firefox/Safari/Opear] o implementam como um objeto javascript nativo). Vamos dar uma olhada em como usar JavaScript para criá-lo:
A seguir está uma citação:
<linguagem script="javascript" type="text/javascript">
<!--
var xmlhttp;
//Cria objeto XMLHTTPRequest
função criarXMLHTTPRequest(){
if(window.ActiveXObject){ // Determina se o controle ActiveX é compatível
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Cria um objeto XMLHTTPRequest instanciando uma nova instância de ActiveXObject
}
else if(window.XMLHTTPRequest){ // Determine se deseja implementar XMLHTTPRequest como um objeto javascript local
xmlhttp = new XMLHTTPRequest(); // Cria uma instância de XMLHTTPRequest (objeto javascript local)
}
}
//-->
</script>3. Atributos e métodos Como há muitas coisas, usarei esta página para listar os métodos e atributos. Darei exemplos detalhados mais tarde (principalmente porque também estou aprendendo).
<html>
<cabeça>
<title>Descrição do objeto XMLHTTPRequest DEMO</title>
<linguagem script="javascript" type="text/javascript">
<!--
var xmlhttp;
//Cria um objeto XMLHTTPRequest
função createXMLHTTPRequext(){
if(janela.ActiveXObject) {
xmlhttp = novo ActiveXObject('Microsoft.XMLHTTP');
}
senão if(window.XMLHTTPRequest){
xmlhttp = novo XMLHTTPRequest();
}
}
função PostOrder(xmldoc)
{
createXMLHTTPRequext();
// Método: aberto
//Crie uma nova solicitação http e especifique o método de solicitação, URL e informações de verificação
// Sintaxe: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//parâmetros
// bstrMethod
//métodos http, como: POST, GET, PUT e PROPFIND. Insensibilidade a maiúsculas e minúsculas.
//bstrUrl
//O endereço URL solicitado pode ser um endereço absoluto ou relativo.
// varAsync[opcional]
// Tipo booleano, especifica se esta solicitação é assíncrona. O padrão é verdadeiro. Se for verdade, a função de retorno de chamada especificada pelo atributo onreadystatechange será chamada quando o estado mudar.
// bstrUser[opcional]
// Se o servidor exigir verificação, especifique o nome de usuário aqui. Se não for especificado, uma janela de verificação aparecerá quando o servidor exigir verificação.
// bstrSenha[opcional]
// A parte da senha das informações de verificação. Se o nome de usuário estiver vazio, este valor será ignorado.
// Nota: Após chamar este método, você pode chamar o método send para enviar dados ao servidor.
xmlhttp.Open("obter", " http://localhost/example.htm ", falso);
// var livro = xmlhttp.responseXML.selectSingleNode("//livro[@id='bk101']");
// alerta(livro.xml);
// Atributo: onreadystatechange
//onreadystatechange: Especifique o manipulador de eventos quando a propriedade readyState for alterada
// Sintaxe: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// O exemplo a seguir demonstra a chamada da função HandleStateChange quando a propriedade readyState do objeto XMLHTTPRequest é alterada.
// Quando os dados forem recebidos (readystate == 4) um botão nesta página será ativado
// Nota: Esta propriedade é somente gravação e é uma extensão do Modelo de Objeto de Documento W3C.
xmlhttp.onreadystatechange=HandStateChange;
// Método: enviar
//Envia solicitação para servidor http e recebe resposta
// Sintaxe: oXMLHttpRequest.send(varBody);
// Parâmetros: varBody (Dados a serem enviados através desta requisição.)
// Nota: O modo síncrono ou assíncrono deste método depende do parâmetro bAsync no método aberto. Se bAsync == False, este método aguardará a conclusão da solicitação ou atingirá o tempo limite antes de retornar. retornará imediatamente.
// Este método usa um parâmetro opcional, que é o requestBody a ser usado. Os tipos de entrada VARIANT aceitáveis são BSTR, SAFEARRAY de UI1 (bytes não assinados), IDispatch para um objeto XML Document Object Model (DOM) e IStream *. use apenas codificação em partes (para envio) ao enviar tipos de entrada IStream * O componente define automaticamente o cabeçalho Content-Length para todos os tipos de entrada, exceto IStream *.
// Se os dados enviados forem BSTR, a resposta será codificada como utf-8 e um cabeçalho do tipo de documento contendo charset deverá ser definido na posição apropriada.
// Se o tipo de entrada for SAFEARRAY de UI1, a resposta será enviada como está, sem codificação adicional. O chamador deve definir um cabeçalho Content-Type com o tipo de conteúdo apropriado.
// Se os dados enviados forem um objeto XML DOM, a resposta será codificada para a codificação declarada no documento xml. Se nenhuma codificação for declarada no documento xml, o padrão UTF-8 será usado.
// Se o tipo de entrada for IStream *, a resposta será enviada como está, sem codificação adicional. O chamador deve definir um cabeçalho Content-Type com o tipo de conteúdo apropriado.
xmlhttp.Enviar(xmldoc);
// Método: getAllResponseHeaders
// Obtém todos os cabeçalhos http da resposta
// Sintaxe: strValue = oXMLHttpRequest.getAllResponseHeaders();
// Observação: cada nome e valor do cabeçalho http são separados por dois pontos e terminam com rn. Este método pode ser chamado somente após a conclusão do método send.
alerta(xmlhttp.getAllResponseHeaders());
// Método: getResponseHeader
// Obtém o cabeçalho http especificado das informações de resposta
// Sintaxe: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// Nota: Este método pode ser chamado somente após o método send ser bem-sucedido. Se o tipo de documento retornado pelo servidor for "text/xml", então esta frase
// xmlhttp.getResponseHeader("Content-Type"); retornará a string "text/xml". Você pode usar o método getAllResponseHeaders para obter informações completas do cabeçalho http.
alert(xmlhttp.getResponseHeader("Content-Type")); // Gera a coluna Content-Type no cabeçalho http: a versão e o nome do servidor web atual.
document.frmTest.myButton.disabled = verdadeiro;
// Método: abortar
//Cancela a solicitação atual
// Sintaxe: oXMLHttpRequest.abort();
// Nota: Após chamar este método, a solicitação atual retorna o status UNINITIALIZED.
//xmlhttp.abort();
// Método: setRequestHeader
// Especifique separadamente um determinado cabeçalho http da solicitação
// Sintaxe: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// Parâmetros: bstrHeader (String, nome do cabeçalho.)
// bstrValue(String, valor.)
// Nota: Se já existir um cabeçalho http com este nome, ele será sobrescrito. Este método deve ser chamado após o método open.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
função HandleStateChange()
{
//Atributo: readyState
// Retorna o status atual da solicitação XMLHTTP
// Sintaxe: lValue = oXMLHttpRequest.readyState;
// Observações: Variável, este atributo é somente leitura e o status é representado por um número inteiro de comprimento 4. A definição é a seguinte:
// 0 (não inicializado) O objeto foi criado, mas não foi inicializado (o método aberto ainda não foi chamado)
// 1 (inicialização) O objeto foi criado e o método send ainda não foi chamado.
// 2 (Enviar dados) O método send foi chamado, mas o status atual e o cabeçalho http são desconhecidos
// 3 (Dados estão sendo transmitidos) Parte dos dados foi recebida Como a resposta e os cabeçalhos http estão incompletos, ocorrerá um erro ao obter parte dos dados por meio de responseBody e responseText.
// 4 (Completo) A recepção dos dados é concluída Neste momento, os dados de resposta completos podem ser obtidos por meio de responseBody e responseText.
if (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = falso;
// Atributo: ResponseBody
//Retorna dados de resposta do servidor em um determinado formato
// Sintaxe: strValue = oXMLHttpRequest.responseBody;
// Observações: Variável, esta propriedade é somente leitura e representa os dados binários não codificados retornados diretamente do servidor em formato de array não assinado.
alerta(xmlhttp.responseBody);
//Propriedade: ResponseStream
//Retorna informações de resposta na forma do objeto Ado Stream
// Sintaxe: strValue = oXMLHttpRequest.responseStream;
// Observações: Variável, esta propriedade é somente leitura e retorna informações de resposta na forma de um objeto Ado Stream.
alerta(xmlhttp.responseStream);
//Atributo: textoderesposta
// Retorna as informações da resposta como uma string
// Sintaxe: strValue = oXMLHttpRequest.responseText;
// Observações: Variável, esta propriedade é somente leitura e retorna as informações da resposta como uma string. XMLHTTP tenta decodificar as informações de resposta em uma string Unicode,
// XMLHTTP define a codificação dos dados de resposta para UTF-8 por padrão. Se os dados retornados pelo servidor contiverem BOM (marca de ordem de byte), o XMLHTTP poderá.
// Para decodificar qualquer dado UCS-2 (big ou little endian) ou UCS-4. Observe que se o servidor retornar um documento xml, este atributo
// As propriedades não tratam declarações de codificação em documentos XML. Você precisa usar o responseXML para lidar com isso.
alerta(xmlhttp.responseText);
//Atributo: respostaXML
//Formate as informações da resposta em um objeto Xml Document e retorne-o
// Sintaxe: var objDispatch = oXMLHttpRequest.responseXML;
// Observações: Variável, esta propriedade é somente leitura, formate as informações da resposta em um objeto Xml Document e retorne-as. Se os dados de resposta não forem um documento XML válido,
// Esta propriedade em si não retorna XMLDOMParseError e informações de erro podem ser obtidas através do objeto DOMDocument processado.
alerta("Resultado = " + xmlhttp.responseXML.xml);
//Atributo: status
// Retorna o código de status http da solicitação atual
// Sintaxe: lValue = oXMLHttpRequest.status;
// Valor de retorno: código de status http padrão longo, definido da seguinte forma:
//Número:Descrição
// 100:Continuar
// 101:Protocolos de comutação
//200: OK
// 201: Criado
// 202:Aceito
// 203:Informações não autorizadas
// 204:Sem conteúdo
// 205:Redefinir conteúdo
// 206: Conteúdo Parcial
// 300:Múltiplas escolhas
// 301:Movido permanentemente
//302:Encontrado
// 303: Ver outro
// 304: Não modificado
// 305: Usar proxy
// 307: Redirecionamento temporário
// 400: Solicitação incorreta
// 401: Não autorizado
// 402: Pagamento necessário
// 403: Proibido
//404: Não encontrado
// 405: Método não permitido
// 406: Não aceitável
// 407: Autenticação de proxy necessária
// 408:Tempo limite da solicitação
// 409:Conflito
// 410: Desaparecido
// 411:Comprimento necessário
// 412: Falha na pré-condição
// 413: Entidade de solicitação muito grande
// 414:Request-URI muito longo
// 415:Tipo de mídia não suportado
// 416: Intervalo solicitado não adequado
// 417:Expectativa falhou
// 500: Erro interno do servidor
// 501: Não implementado
// 502 Bad Gateway
// 503: Serviço indisponível
// 504: Tempo limite do gateway
// 505:Versão HTTP não suportada
// Nota: inteiro longo, esta propriedade é somente leitura e retorna o código de status http da solicitação atual. Esta propriedade só pode ser obtida após o envio e recebimento dos dados.
alerta(xmlhttp.status);
//Atributo: statusText
// Retorna o status da linha de resposta da solicitação atual
// Sintaxe: strValue = oXMLHttpRequest.statusText;
// Observações: String, esta propriedade é somente leitura. Retorna o status da linha de resposta da solicitação atual no BSTR. Esta propriedade só pode ser obtida após o envio e recebimento dos dados.
alerta(xmlhttp.statusText);
}
}
//-->
</script>
</head>
<corpo>
<form name="frmTest">
<input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
</form>
</body>
</html>