O XMLHTTPREQUEST facilita o envio de uma solicitação HTTP. Você só precisa simplesmente criar uma instância do objeto de solicitação, abrir um URL e enviar a solicitação. Após a conclusão da transmissão, o status HTTP resultante e o conteúdo de resposta retornada também podem ser obtidos no objeto Solicitação.
As solicitações geradas pelo XMLHTtPrequest podem ser obtidas de duas maneiras, modo assíncrono ou modo síncrono. O tipo de solicitação é determinado pelo valor do assíncrono, o terceiro parâmetro do método open () deste objeto xmlHttPrequest. Se o valor desse parâmetro for falso, a solicitação xmlHttPrequest será executada no modo síncrono, caso contrário, o processo será concluído no modo assíncrono.
Dois modos de comunicação: solicitações síncronas e assíncronas:
Sincronize solicitações
As solicitações de sincronização no encadeamento principal bloqueiam a página e, devido à baixa experiência do usuário, as solicitações de sincronização no encadeamento principal de alguns navegadores mais recentes foram depreciados. Em casos raros, o XmlHttPrequests usando o modo síncrono será mais adequado do que o uso de modo assíncrono.
1. Ao usar o XMLHTTPREQUEST em trabalhador, as solicitações síncronas são mais adequadas que as solicitações assíncronas.
Código na página inicial:
<script type = "text/javascript"> var omyworker = new Worker ("mytask.js"); omyworker.onmessage = function (oevent) {alert ("trabalhador disse:" + oevent.data); }; omyworker.postMessage ("hello"); </sCript> myfile.txt (o arquivo que sincroniza o objeto XmlHttPrequest solicitado): Hello World !!Inclui Código do Trabalhador: Mytask.js
self.onMessage = function (oEvent) {if (oevent.data === "hello") {var oreq = new xmlhttPrequest (); oreq.open ("get", "myfile.txt", false); // solicitação síncrona oreq.send (null); self.postMessage (Oreq.ResponsEtext); }};Nota: Como o trabalhador é usado, a solicitação é realmente assíncrona.
Métodos semelhantes podem ser usados para permitir que os scripts interajam com o servidor em segundo plano e pré -carreguem determinados conteúdo. Confira o uso de trabalhadores da web para mais detalhes
2. A situação em que os pedidos síncronos devem ser usados
Em casos raros, apenas solicitações síncronas do modo XMLHTTPRequest podem ser usadas. Por exemplo, na janela.onunload e window.OnBeforeUnload Funções de manuseio de eventos. Usando o XMLHTTPREQUEST assíncrono na função de manipulador de eventos de descarga da página, causará o problema: quando a resposta for retornada, a página não existe mais e todas as variáveis e funções de retorno de chamada foram destruídas. O resultado só pode causar um erro, "a função não está definida". A solução é usar a solicitação no modo de sincronização aqui, para que a página não seja fechada até que a solicitação seja concluída.
window.onBeforeUnLoad = function () {var oreq = new XmlHttPrequest (); oreq.open ("get", "logout.php? nick =" + escape (myname), false); // solicitação síncrona oreq.send (null); if (Oreq.RESPONETEXT.TRIM ()! == "EXITED"); {// "EXITED" O retorno de retorno de retorno "Sair falhou, você deseja executar manualmente a saída?"; }};Solicitação assíncrona
Se você usar o modo assíncrono, quando os dados forem completamente solicitados, uma função de retorno de chamada especificada será executada. Ao executar a solicitação, o navegador normalmente pode executar outras transações.
3. Exemplo: Crie um método padrão para ler arquivos externos
Em alguns requisitos, vários arquivos externos devem ser lidos. Esta é uma função padrão. Esta função usa o objeto xmlHttPrequest para solicitações assíncronas. Ele também permite especificar uma função de retorno de chamada diferente após a conclusão de cada leitura de arquivo.
função loadfile (surl, timeout, fcallback / *, passa no parâmetro 1, passa no parâmetro 2, etc. * /) {var apassargs = array.prototype.slice.call (argumentos, 3), oreq = new xmlHttPrequest (); oreq.ontimeout = function () {console.log ("Timeout da solicitação."); } oreq.onreadystatechange = function () {if (oreq.readyState === 4) {if (oreq.status === 200) {fcallback.apply (oreq, apassargs); } else {console.log ("error", oreq.statustustext); }}}; Oreq.open ("Get", Surl, True); oreq.timeout = timeout; Oreq.send (nulo);}Uso da função Loadfile:
função showMessage (smsg) {alert (smsg + this.ResponseText);} loadfile ("message.txt", 200, showMessage, "nova mensagem! // n");A linha 1 define uma função. Depois que o arquivo for lido, a função FCallback será chamada com todos os parâmetros após o terceiro parâmetro como seus próprios parâmetros.
A linha 3 usa uma configuração de tempo limite para evitar que seu código execute a execução de longo prazo dos dados de retorno da solicitação de leitura. Ao atribuir um valor à propriedade Timeout do objeto XmlHttPrequest para a propriedade Timeout
O sexto comportamento OnreadyStateChange Event Handle Especifica a função de retorno de chamada. Cada vez que a função é executada, verifica se a solicitação termina (o status da solicitação é 4). Nesse caso, determina se a solicitação é bem -sucedida (o status HTTP é 200). Nesse caso, produz o código -fonte da página. Se ocorrer um erro, produzirá a mensagem de erro.
A linha 15 especifica que o terceiro parâmetro é verdadeiro, indicando que a solicitação deve ser executada no modo assíncrono.
4. Exemplo: use solicitações assíncronas, nenhum fechamento é usado.
função switchxhrstate () {switch (this.readyState) {case 0: console.log ("o método open () ainda não foi chamado."); quebra; caso 1: console.log ("O método send () ainda não foi chamado."); Break; Caso 2: Console.log ("O método send () foi chamado, o cabeçalho da resposta e o status de resposta foram retornados."); Break; caso 3: console.log ("Download, parte da entidade de resposta foi obtido."); Break; caso 4: console.log ("Solicitação concluída!"); this.callback.apply (this, this.arguments); }}; function loadfile (surl, fcallback / *, passa no parâmetro 1, passa no parâmetro 2, etc. * /) {var oreq = new XmlHttPrequest (); oreq.callback = fcallback; oreq.arguments = array.prototype.slice.call (argumentos, 2); Oreq.onReadyStateChange = switchxhrstate; Oreq.open ("Get", Surl, True); Oreq.send (nulo);}Use Bind:
função switchxhrstate (fcallback, aarguments) {switch (this.readyState) {case 0: console.log ("o método open () não foi chamado."); quebra; caso 1: console.log ("O método send () não foi chamado."); Break; Caso 2: Console.log ("O método send () foi chamado, o cabeçalho da resposta e o status de resposta foram retornados."); Break; caso 3: console.log ("A entidade de resposta parcial foi obtida durante o download."); Break; caso 4: console.log ("Solicitação concluída!"); fcallback.apply (this, aarguds); }}; function loadfile (surl, fcallback / *, passa no parâmetro 1, passa no parâmetro 2, etc. * /) {var oreq = new XmlHttPrequest (); oreq.onreadyStateChange = switchxhrstate.bind (oreq, fcallback, array.prototype.slice.call (argumentos, 2)); Oreq.open ("Get", Surl, True); Oreq.send (nulo);}O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.