Ajax: uma maneira de solicitar dados sem atualizar a página inteira;
O núcleo técnico do Ajax é o objeto xmlHttPrequest;
Processo de solicitação AJAX: Crie objeto XMLHTTPRequest, conecte -se ao servidor, envie solicitações e receba dados de resposta;
/*** Obtenha objeto Ajax*/function getAjaxhttp () {var xmlHttp; tente {// Chrome, Firefox, Opera 8.0+, Safari xmlHttp = new XmlHttPrequest (); } catch (e) {// Internet Explorer try {// ie5, 6 xmlhttp = new ActiveXObject ("msxml2.xmlHttp"); } catch (e) {try {// ie7 ou acima xmlHttp = new ActiveXObject ("Microsoft.xmlHttp"); } catch (e) {alert ("Seu navegador não suporta Ajax!"); retornar falso; } } } return xmlHttp;}/** * Send ajax request* url--url * methodtype(post/get) * con (true(asynchronous)|false(synchronous)) * parameter(parameter) * functionName(callback method name, no quotes are required, it is called only when it succeeds) * (Note: This method has two parameters, one is xmlhttp, and o outro é o objeto a ser processado) * OBJ precisa ir ao objeto a ser processado no método de retorno de chamada */função ajaxRequest (url, methodtype, con, parâmetro, functionName, obj) {var xmlhttp = getAjaxhttp (); xmlhttp.onReadyStateChange = function () {// ReadyState Valor Descrição // 0, Inicialização, o objeto XHR foi criado, o Open ainda não foi executado // 1, o método aberto, o Método / / RELECTIVE / PELOCIDADE: REALTIMENTO OUSTENCIMENTO / PELHERENTE OUSTENSENHETIR: O que não foi recebido, que não foi recebido, o que não foi recebido, que não foi recebido, que não foi recebido, que não foi recebido, que não foi recebido, que não foi recebido, que não foi recebido, que não foi recebido, que não foi recebido, que não foi enviado, mas a solicitação é que a solicitação é recebida. ou URL Encontrado // 500: O servidor gera um erro interno se (xmlhttp.readyState == 4 && xhr.status == 200) {// A resposta http foi totalmente recebida antes de ligar para a funçãoName (xmlHttp, obj); }}; xmlhttp.open (MethodType, URL, CON); xmlHttp.send (parâmetro);} // Esta é a função do parâmetro cremexml () {var xml = "<suser> <suserId> asdfasdfasdf <// userid> </user>"; // "//" não é capital v, mas a escape é a caça esquerda e o retorno direto xl; json = {id: 0, nome de usuário: "boa pessoa"}; retornar json;} função c () {alert ("");}//teste
AjaxRequest ("http://www.baidu.com", "post", true, createxml (), c, document);Vejamos outro exemplo
ajax ({url: "./testxhr.aspx", // Tipo de endereço de solicitação: "post", // Dados do método de solicitação: {name: "super", idade: 20}, // solicitar parâmetro datatype: "json", sucessor: function (resposta, xml) {// código executado após a colocação}, falha: função: função (status) (saturi (saturi) (resposta, xml) {// código executado após a falha}, falha: função (status) (staath) (saturi) {/////// // // código executado após a falha}, falha: função: função (status) (stangation (resposta, xml) {// código executado após a colocação}, falha: função: função (status) (staath)…/; função ajax (opções) {options = opções || {}; options.type = (options.type || "get"). touppercase (); options.datatype = options.datatype || "JSON"; var params = formatparams (options.data); // create - não -IE6 - Etapa 1 if (window.xmlhttprequest) {var xhr = new xmlhttPrequest (); } else {// ie6 e abaixo dos navegadores var xhr = new ActiveXObject ('Microsoft.xmlHttp'); } // receba - Etapa 3 xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.ProSeText, xhr.Responsexml); } else {options.fail && options.fail (status); }}} // conectar e enviar - Etapa 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (nulo); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Defina o tipo de conteúdo ao enviar o formulário XHR.SetRequestHeader ("Content-Type", "Application/X-Www-Form-Form-Urlencoded"); xhr.send (params); }} // Format Parâmetro função formatParams (dados) {var arr = []; for (var nome em dados) {arr.push (codeuricomponent (nome) + "=" + codeuricomponent (dados [nome])); } arr.push (("v =" + math.random ()). substituir (".", ")); retorna arr.join (" & ");}Vamos dar uma olhada no princípio
1. Crie
1.1. O IE7 e as versões acima suportam objetos XHR nativos, para que você possa usá -los diretamente: var oajax = novo xmlHttPrequest ();
1.2. No IE6 e suas versões anteriores, o objeto XHR é implementado por meio de um objeto ActiveX na biblioteca MSXML. Alguns livros refinaram três versões diferentes de tais objetos em IE, como MSXML2.xmlHttp, msxml2.xmlhttp.3.0 e msxml2.xmlHttp.6.0; Eu sinto que é muito problemático, para que eu possa usar diretamente a seguinte instrução para criá -la: var oajax = new ActiveXObject ('Microsoft.xmlHttp');
2. Conecte e envie
2.1. Três parâmetros do método da função: Open (): Solicitação Open, e se deve solicitar de forma assíncrona (existem muito poucas solicitações síncronas e ainda não foram usadas);
2.2. O método de solicitação GET é enviar dados ao servidor por meio de parâmetros de URL, enquanto a postagem envia dados ao servidor como um parâmetro de envio;
2.3. Em uma solicitação de postagem, antes de enviar dados, o tipo de conteúdo do formulário enviado deve ser definido;
2.4. Os parâmetros enviados ao servidor devem ser codificados pelo método codeuricomponent (). De fato, na forma da lista de parâmetros "key = value", a chave e o valor precisam ser codificadas porque elas conterão caracteres especiais. Toda vez que você solicitar, uma sequência de "v = xx" será escrita na lista de parâmetros. Isso é para rejeitar o cache e cada vez que você o solicita diretamente ao servidor.
Encodeuri (): usado para codificar todo o URI e não codificará caracteres especiais que pertencem ao URI, como pontos, barras para a frente, pontos de interrogação e sinais de libra; sua função decodificadora correspondente decoduri ();
codeuricomponent (): é usado para codificar uma parte do URI e codificar quaisquer caracteres não padrão que encontrar; sua função decodificadora correspondente decodEuricomponent ();
3. Receba
3.1. Após receber a resposta, os dados de resposta serão preenchidos automaticamente com o objeto XHR. Os atributos relevantes são os seguintes
RespoteText: o conteúdo do corpo retornado pela resposta, do tipo de string;
Responsexml: se o tipo de conteúdo da resposta for "text/xml" ou "aplicativo/xml", os dados XML correspondentes serão armazenados nesta propriedade, que é o tipo de documento correspondente a XML;
Status: o código de status HTTP da resposta;
Statustext: Descrição do status HTTP;
3.2. A propriedade ReadyState do objeto XHR representa o estágio ativo atual do processo de solicitação/resposta. O valor desta propriedade é o seguinte
0-Uninitialized, o método open () ainda não foi chamado;
O método 1-start, open () é chamado, o método send () não é chamado;
2-seas, o método send () foi chamado e nenhuma resposta foi recebida;
3 receita, parte dos dados de resposta foi recebida;
4-completo, todos os dados de resposta foram recebidos;
Desde que o valor das mudanças prontas, o evento ReadyStateChange será chamado (de fato, para suavidade lógica, você poderá colocar o ReadyStatEChange após o envio, porque o servidor é solicitado durante o envio e a comunicação de rede será realizada, que geralmente é o que é bom.
3.3. No evento ReadyStateChange, primeiro determine se a resposta é recebida e, em seguida, determine se o servidor lida com sucesso na solicitação. xhr.status é o código de status. O código de status começa com 2 e tudo é bem -sucedido. 304 significa sair do cache. O código acima adiciona um número aleatório sempre que a solicitação for solicitada; portanto, o valor do cache não precisa ser julgado.
4. Os pedidos de Ajax não podem ser domínios!