JavaScript/Ajax
Ferramentas
Geral
Imprimir/exportar
Noutros projetos
Com o advento do AJAX, este objeto se torna cada vez mais importante. Ele, infelizmente, não é padronizado, e portanto, até que saia uma resolução, devemos sempre fazer checagem para criação deste objeto, a seguir apresento a sua estrutura, e em seguida uma pequena rotina para criação e manipulação do mesmo.
| Nome | Descrição |
|---|---|
| readyState | Representa o estado do objeto, pode ser :
|
| responseXML | Resposta em xml (document) |
| responseText | Resposta em texto |
| status | Valor numero de retorno |
| statusText | Texto de status |
| multipart | Indica que esta recebendo um texto multipart |
| Nome | Descrição |
|---|---|
| abort() | Pára a transferência |
| getAllResponseHeaders() | Retorna nomes dos cabeçalhos |
| getResponseHeader(name) | Retorna valor do cabeçalho |
| open("metodo", "url"[, indicadorDeAssincrono[, nomeUsuario [, senha]]]) | Abre comunicação |
| send(content) | Envia conteúdo |
| setRequestHeader("nome", "valor") | Atribui dados a cabeçalho antes do envio |
| overrideMimeType("mime-type") | sobre escreve o tipo retornado |
| Nome | Descrição |
|---|---|
| onload | Event listener que recebe event como parametro, assim pode-se receber elementos como resposta |
| onerror | Evento chamado caso ocorra um erro na carga |
| onprogress | Evento chamado durante a carga, caso seja um conteudo muito grande para baixar. |
| onreadystatechange | Evento chamado quando o estado da carga muda. |
Salve este codigo como request.js
varRequestObject;functioninitRequest(newRequestFunc,noBody){var_newRequest=newRequestFunc;var_noBody=noBody;var_id=0;returnfunction(){this.newRequest=_newRequest;this.concatTimer=function(url,id){returnurl+(url.indexOf("?")<0?"?"/"&")+"requestTime="+newDate().getTime()+"&requestId="+id;}this.loadText=function(url,method){varreq=_newRequest();req.open(method||"GET",this.concatTimer(url,_id++),false);if(_noBody)req.send();elsereq.send(null);returnreq.responseText;}this.splitLines=function(text){try{returntext.split(/\r?\n|\r/);}catch(e){return[];}}this.loadLines=function(url,method){returnthis.splitLines(this.loadText(url,method||"GET"));}this.loadXML=function(url,method){varreq=_newRequest();req.open(method||"GET",this.concatTimer(url,_id++),false);if(_noBody)req.send();elsereq.send(null);returnreq.responseXML;}this.bind=function(object){varurl=object['url'];if(typeofurl=='undefined')throw"necess?rio URL para fazer bind";varid=_id++;varreq=_newRequest();varmethod=object['method']||"GET";varheaders=object['header'];varbody=object['body'];varuser=object['username'];varpass=object['password'];varonload=object['onload'];varonerror=object['onerror'];varonprocess=object['onprocess'];varonstatechange=object['onstatechange'];req.onreadystatechange=function(){if(onstatechange)onstatechange(req,id);switch(req.readyState){case0/// UNINITIALIZED open() não foi chamado aindabreak;case1/// LOADING send() não foi chamado aindacase2/// LOADED send() foi chamado, disponível getResponseHeader e statuscase3/// INTERACTIVE carregando, responseText tem dados parciaisif(onprocess)onprocess(req,id);break;case4/// COMPLETED, todas as operações foram concluidasif(onprocess)onprocess(req,id);if(req.status==0||req.status==200){if(onload)onload(req,id);}else{if(onerror)onerror(req,id,req.statusText);}break;}}if(user)req.open(method,this.concatTimer(url,id),true,user,password);elsereq.open(method,this.concatTimer(url,id));req.setRequestHeader('requestid',id);for(varheaderinheaders){req.setRequestHeader(header,headers[header]);}try{if(body&&_noBody){req.send();}else{req.send(body);}}catch(e){if(onerror){onerror(req,id,e);}}}}}if(window.ActiveXObject){varobjectNames=["Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(vari=0;i<objectNames.length;i++){try{varrequestName=objectNames[i];newActiveXObject(requestName);RequestObject=initRequest(function(){returnnewActiveXObject(requestName);},true);}catch(e){}}}if(!RequestObject&&window.XMLHttpRequest){try{newXMLHttpRequest();RequestObject=initRequest(function(){returnnewXMLHttpRequest();},false);}catch(e){}}if(!RequestObject){alert("Seu browser não esta preparado para o ajax");}
Inclua na página, o seguinte comando para incluir este arquivo :
<scripttype="text/javascript"src="request.js"></script>
Em seguida, você pode utilizar o código, como por exemplo, carregando um texto de forma síncrona /
varreq=newRequestObject();alert(req.loadText("textoqualer.txt"));
Podemos também carregar numa matriz e processar linha a linha:
varreq=newRequestObject();varmatriz=req.loadLines("textoqualer.txt");for(vari=0;i<matriz.length;i++){alert(i+":"+matriz[i]);}
Também é possível carregar de forma assincrona :
varreq=newRequestObject();req.bind({url:"textoqualquer.txt",onload:function(rq,id){alert(rq.responseText);}});
É possível também verificar se ocorreu algum erro, da seguinte forma :
varreq=newRequestObject();req.bind({url:"textoqualquer.txt",onload:function(rq,id){alert(rq.responseText);},onerror:function(rq,id,msg){alert('erro = '+msg);}});