Da li neko ima ideju kako je moguce u jednoj funkciji sa XMLHttpRequest() ucitati dve razlicite stranice?
dupli XMLHttpRequest()
Zaključano
Zakačeno
izmenjeno 1 put, poslednji put jablan 16.03.2006. u 14:29
Izmene poruke
- jablan16.03.2006. u 14:29zapis iz teksta poruke
Ne razumem tačno šta hoćeš...
Evo ti jedan primer sad što sam pokušavao. Ne znam da li je ispravno ovako da se radi, proguglaj još malo...
Evo ti jedan primer sad što sam pokušavao. Ne znam da li je ispravno ovako da se radi, proguglaj još malo...
Code:
// retrieve XML document (reusable generic function);
// parameter is URL string (relative or complete) to
// an .xml file whose Content-Type is a valid XML
// type, such as text/xml; XML source must be from
// same domain as HTML file
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req) {
req.onreadystatechange = function() { processReqChange(req) };
req.open("GET", url, true);
req.send(null);
}
}
// handle onreadystatechange event of req object
function processReqChange(req) {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
buildTopicList(req.responseText);
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
// ovo se zove na neki event
function loadDoc(evt) {
try {
loadXMLDoc('http://localhost/tools/div.php');
loadXMLDoc('http://localhost/tools/div.htm');
}
catch(e) {
var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
alert("Unable to get XML data:\n" + msg);
return;
}
}
var divindex = 1;
// popunjavamo neke divove sa dovucenim htmlovima
function buildTopicList(content) {
var div1 = document.getElementById('divContent' + divindex);
div1.innerHTML = content;
divindex++;
}
// retrieve XML document (reusable generic function);
// parameter is URL string (relative or complete) to
// an .xml file whose Content-Type is a valid XML
// type, such as text/xml; XML source must be from
// same domain as HTML file
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req) {
req.onreadystatechange = function() { processReqChange(req) };
req.open("GET", url, true);
req.send(null);
}
}
// handle onreadystatechange event of req object
function processReqChange(req) {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
buildTopicList(req.responseText);
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
// ovo se zove na neki event
function loadDoc(evt) {
try {
loadXMLDoc('http://localhost/tools/div.php');
loadXMLDoc('http://localhost/tools/div.htm');
}
catch(e) {
var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
alert("Unable to get XML data:\n" + msg);
return;
}
}
var divindex = 1;
// popunjavamo neke divove sa dovucenim htmlovima
function buildTopicList(content) {
var div1 = document.getElementById('divContent' + divindex);
div1.innerHTML = content;
divindex++;
}
izmenjeno 1 put, poslednji put dr ZiDoo 16.03.2006. u 16:41
Izmene poruke
- dr ZiDoo16.03.2006. u 16:41zapis iz teksta poruke
Mislim da znam na što misliš. Ja sam ovih dana radio neki CMS pa sam odlulučio malo ajaksa u sve gurnuti da vidim kako radi. Imao sam isti problem sa osvježavanjem dva različita diva, različitim sadržajem. Kako sam ja skonto (a nisam neki JS programer) to se može riješiti tako što se napravi Objektivno orjentisana JS. Evo malo moga coda koji je u duuuuuuuuuuubokoj razvojnoj fazi.
I kod koji izvršava ovo gore:
naravno u html napraviš dva objekta sa IDom "test" i "test2".
Skripta se malo grči u InternetExploreru. Ako neko ima ideju neka reče...
Code:
...
function aPJS()
{
this.request = '';
// Microsoft Internet Explorer 5.0+
if(window.ActiveXObject)
{
this.request = new ActiveXObject("Microsoft.XMLHTTP");
}
// native XMLHttpRequest
if(window.XMLHttpRequest)
{
this.request = new XMLHttpRequest();
}
this.change = function(targetID, sourceUrl)
{
if( !this.request )
{
alert('Plant Java Script error\n ErrorCode: 0x0001\n SystemMsg: Yout browser doesn\'t support XMLHttp connection');
return 0;
}
else
{
var req = this.request;
}
// loading
document.getElementById(targetID).innerHTML = '<div>loading...</div>';
// XMLHttpRequest it's OK
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
data = req.responseText;
document.getElementById(targetID).innerHTML = data;
}
else
{
document.getElementById(targetID).innerHTML = "Plant Java Script error\n ErrorCode: 0x0002\n SystemMsg: " + req.statusText;
}
}
}
req.open("GET", sourceUrl, true);
req.send(null);
}
//------------------------------------------------------------------------------------------
}
...
...
function aPJS()
{
this.request = '';
// Microsoft Internet Explorer 5.0+
if(window.ActiveXObject)
{
this.request = new ActiveXObject("Microsoft.XMLHTTP");
}
// native XMLHttpRequest
if(window.XMLHttpRequest)
{
this.request = new XMLHttpRequest();
}
this.change = function(targetID, sourceUrl)
{
if( !this.request )
{
alert('Plant Java Script error\n ErrorCode: 0x0001\n SystemMsg: Yout browser doesn\'t support XMLHttp connection');
return 0;
}
else
{
var req = this.request;
}
// loading
document.getElementById(targetID).innerHTML = '<div>loading...</div>';
// XMLHttpRequest it's OK
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
data = req.responseText;
document.getElementById(targetID).innerHTML = data;
}
else
{
document.getElementById(targetID).innerHTML = "Plant Java Script error\n ErrorCode: 0x0002\n SystemMsg: " + req.statusText;
}
}
}
req.open("GET", sourceUrl, true);
req.send(null);
}
//------------------------------------------------------------------------------------------
}
...
I kod koji izvršava ovo gore:
Code:
function jebiga()
{
var x = new PJS;
x.change('test', 'srv.php?id=2');
var y = new PJS;
y.change('test2', 'srv.php?id=1');
}
function jebiga()
{
var x = new PJS;
x.change('test', 'srv.php?id=2');
var y = new PJS;
y.change('test2', 'srv.php?id=1');
}
naravno u html napraviš dva objekta sa IDom "test" i "test2".
Skripta se malo grči u InternetExploreru. Ako neko ima ideju neka reče...
Potpis
tu nema kašike....
izmenjeno 1 put, poslednji put Br@nkoR 16.03.2006. u 17:50
Izmene poruke
- Br@nkoR16.03.2006. u 17:50zapis iz teksta poruke
Hmm...
Code:
<html>
<head>
<title>test</title>
<script>
function getRequestObject(){
var req;
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e){
try {
req=new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e2){
req=null;
}
}
if(!req && typeof XMLHttpRequest != 'undefined')
req = new XMLHttpRequest();
return req;
}
function processRequest() {
var req;
req = getRequestObject();
req.open('GET', 'test1.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test1').innerHTML = req.responseText;
}
req.send(null);
req.open('GET', 'test2.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test2').innerHTML = req.responseText;
}
req.send(null);
return true;
}
</script>
</head>
<body>
<a href="#" onClick="processRequest()">call</a>
<div id="test1"></div>
<div id="test2"></div>
</body>
</html>
<html>
<head>
<title>test</title>
<script>
function getRequestObject(){
var req;
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e){
try {
req=new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e2){
req=null;
}
}
if(!req && typeof XMLHttpRequest != 'undefined')
req = new XMLHttpRequest();
return req;
}
function processRequest() {
var req;
req = getRequestObject();
req.open('GET', 'test1.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test1').innerHTML = req.responseText;
}
req.send(null);
req.open('GET', 'test2.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test2').innerHTML = req.responseText;
}
req.send(null);
return true;
}
</script>
</head>
<body>
<a href="#" onClick="processRequest()">call</a>
<div id="test1"></div>
<div id="test2"></div>
</body>
</html>
Potpis
Banned - Not available
izmenjeno 1 put, poslednji put meraklija 16.03.2006. u 21:42
Izmene poruke
- meraklija16.03.2006. u 21:42zapis iz teksta poruke
Upravo to, da osvezim dva DIV-a odjednom.
Primer Br@nkoR je odlican i uneo sam manje modifikacije da se prenose promenljive i da nema onClick i to radi samostalno ovako kako je ovaj kod. Kada iskopiram kod sebe u skript otvara uporno samo drugi req.open
I da dodam: a FF ne otvara nista!
Primer Br@nkoR je odlican i uneo sam manje modifikacije da se prenose promenljive i da nema onClick i to radi samostalno ovako kako je ovaj kod. Kada iskopiram kod sebe u skript otvara uporno samo drugi req.open
Code:
<html>
<head>
<title>test</title>
<script>
function getRequestObject(){
var req;
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e){
try {
req=new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e2){
req=null;
}
}
if(!req && typeof XMLHttpRequest != 'undefined')
req = new XMLHttpRequest();
return req;
}
function openpage(url, containerid, pren) {
var req;
req = getRequestObject();
req.open('GET', url+'1.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById(pren).innerHTML = req.responseText;
}
req.send(null);
req.open('GET', url+'2.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById(containerid).innerHTML = req.responseText;
}
req.send(null);
}
</script>
</head>
<body>
<a href="javascript:openpage('test', 'test1', 'test2');">call</a>
<div id="test1"></div>
<div id="test2"></div>
</body>
</html>
<html>
<head>
<title>test</title>
<script>
function getRequestObject(){
var req;
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e){
try {
req=new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e2){
req=null;
}
}
if(!req && typeof XMLHttpRequest != 'undefined')
req = new XMLHttpRequest();
return req;
}
function openpage(url, containerid, pren) {
var req;
req = getRequestObject();
req.open('GET', url+'1.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById(pren).innerHTML = req.responseText;
}
req.send(null);
req.open('GET', url+'2.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById(containerid).innerHTML = req.responseText;
}
req.send(null);
}
</script>
</head>
<body>
<a href="javascript:openpage('test', 'test1', 'test2');">call</a>
<div id="test1"></div>
<div id="test2"></div>
</body>
</html>
I da dodam: a FF ne otvara nista!
Ajoj, tek sada vidim da sam nešto zaboravio, dok sam testirao kod sve je lepo radilo u IE, FF i Operi ali bilo je dodato nekoliko alerta kako bi testrao kod. Kada sam uklonio alerte nisam proveravao kod, a sada kad proverim radi samo u IE i Operi, ono što sam zaboravio je da kod asinhronog poziva postoji readyState, i kada se vrati odziv on dobija vrednost 4, a pripremanje sledećeg poziva (open(...)) je moguće ukoliko se prvi završio, tačnije vratio odziv.
Dakle između dva poziva je potrebno napraviti pauzu, dok readyState ne bude 4 odnosno dok responseText/responseXML ne bude definisan (dok se odziv ne vrati)
Možeš probati i sledeće, promeni:
Ili ići sinhrono:
Ti prilagodi tvojim potrebama.
Dakle između dva poziva je potrebno napraviti pauzu, dok readyState ne bude 4 odnosno dok responseText/responseXML ne bude definisan (dok se odziv ne vrati)
Možeš probati i sledeće, promeni:
Code:
function processRequest() {
var req;
req = getRequestObject();
req.open('GET', 'test1.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test1').innerHTML = req.responseText;
req.open('GET', 'test2.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test2').innerHTML = req.responseText;
}
req.send(null);
}
req.send(null);
return true;
}
function processRequest() {
var req;
req = getRequestObject();
req.open('GET', 'test1.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test1').innerHTML = req.responseText;
req.open('GET', 'test2.txt', true);
req.onreadystatechange = function() {
if (req.readyState != 4) { return; }
document.getElementById('test2').innerHTML = req.responseText;
}
req.send(null);
}
req.send(null);
return true;
}
Ili ići sinhrono:
Code:
function processRequest() {
var req;
req = getRequestObject();
req.open('GET', 'test1.txt', false);
req.send(null);
document.getElementById('test1').innerHTML = req.responseText;
req.open('GET', 'test2.txt', false);
req.send(null);
document.getElementById('test2').innerHTML = req.responseText;
return true;
}
function processRequest() {
var req;
req = getRequestObject();
req.open('GET', 'test1.txt', false);
req.send(null);
document.getElementById('test1').innerHTML = req.responseText;
req.open('GET', 'test2.txt', false);
req.send(null);
document.getElementById('test2').innerHTML = req.responseText;
return true;
}
Ti prilagodi tvojim potrebama.
Potpis
Banned - Not available
Dosao sam do resenja za moj slucaj, ali me sada cisto interesuje kako drugi primer moze da radi bez readyState, odnosno kada u drugom primeru (sinhrono) ugradim:
jednostavno nema rezultat, ali ga izvrsava i reaguje samo kada nema sta da prikaze, odnosno kada se ispuni zadnji uslov
Code:
...
if(req.readyState < 4 ) ...
...
if(req.readyState < 4 ) ...
jednostavno nema rezultat, ali ga izvrsava i reaguje samo kada nema sta da prikaze, odnosno kada se ispuni zadnji uslov
Code:
...
if(req.readyState == 4)
{
if(req.status == 200)
{
return true;
}
else if(req.status == 404)
{ ... OVDE DAJE PORUKU!
...
if(req.readyState == 4)
{
if(req.status == 200)
{
return true;
}
else if(req.status == 404)
{ ... OVDE DAJE PORUKU!
izmenjeno 2 puta, poslednji put Br@nkoR 20.04.2006. u 18:27
Izmene poruke
- Br@nkoR20.04.2006. u 18:27zapis iz teksta poruke
- Br@nkoR20.03.2006. u 11:39zapis iz teksta poruke
Ajde ovako.
Kod sinhronog zahteva skripta (js) čeka da se odziv(response) sa servera vrati pa onda nastavlja sa izvršenjem skripte. A dok kod asinhronog zahteva skripta ne čeka odziv već nastavlja sa radom, dakle kada pozoveš metod send() šalje se zahtev, skripta neće čekati da se vrati response već će nastaviti dalje da se izvršava, u mom primeru gore, nastaviće sa otvaranjem nove konekcije, i tu je nastao problem i FF nije radio, pa je potrebno da se napravi pauza između izvršenja funkcije dakle čekati da se vrati odziv, odnosno tačnije da se završi prvi zahtev.
E sada, da bi znali kod asinhronog zahteva da se vratio odziv, odnosno dokle je stigao, koristi se readyState, i on vraća vrednosti od 0 do 4, a takođe koristi se i event readystatechange (onreadystatechange) kako bi se skripti reklo šta da radi kada se odziv vrati (tačnije kada se promeni readyState), odnosno definiše se funkcija koja će biti pokrenuta.
Kod sinhronog zahteva ti posle poziva send() u sledećem redu (posle završetka zahteva) dobijaš responseText/responseXML, skripta će sačekati da se vrati odziv, pa ti readyState i onreadystatechange praktično nisu ni potreban.
Nadam se da ti je sada malo jasnije.
Možda je bolje da ukoliko koristiš asinhroni prenos i pritom ti je potrebno slanje više zahteva, za svaki zahtev ponovno kreirati XMLHttpRequest objekat, primeri koje su @jablan i @dr ZiDoo dali.
EDIT:
da bi testirao šta vraća readyState probaj npr. ovo.
Kod sinhronog zahteva skripta (js) čeka da se odziv(response) sa servera vrati pa onda nastavlja sa izvršenjem skripte. A dok kod asinhronog zahteva skripta ne čeka odziv već nastavlja sa radom, dakle kada pozoveš metod send() šalje se zahtev, skripta neće čekati da se vrati response već će nastaviti dalje da se izvršava, u mom primeru gore, nastaviće sa otvaranjem nove konekcije, i tu je nastao problem i FF nije radio, pa je potrebno da se napravi pauza između izvršenja funkcije dakle čekati da se vrati odziv, odnosno tačnije da se završi prvi zahtev.
E sada, da bi znali kod asinhronog zahteva da se vratio odziv, odnosno dokle je stigao, koristi se readyState, i on vraća vrednosti od 0 do 4, a takođe koristi se i event readystatechange (onreadystatechange) kako bi se skripti reklo šta da radi kada se odziv vrati (tačnije kada se promeni readyState), odnosno definiše se funkcija koja će biti pokrenuta.
Kod sinhronog zahteva ti posle poziva send() u sledećem redu (posle završetka zahteva) dobijaš responseText/responseXML, skripta će sačekati da se vrati odziv, pa ti readyState i onreadystatechange praktično nisu ni potreban.
Nadam se da ti je sada malo jasnije.
Možda je bolje da ukoliko koristiš asinhroni prenos i pritom ti je potrebno slanje više zahteva, za svaki zahtev ponovno kreirati XMLHttpRequest objekat, primeri koje su @jablan i @dr ZiDoo dali.
EDIT:
da bi testirao šta vraća readyState probaj npr. ovo.
Code:
req = getRequestObject();
alert(req.readyState);
req.open('GET', 'test1.txt', false);
alert(req.readyState);
req.send(null);
alert(req.readyState);
req = getRequestObject();
alert(req.readyState);
req.open('GET', 'test1.txt', false);
alert(req.readyState);
req.send(null);
alert(req.readyState);
Potpis
Banned - Not available
a zapravo koji je razlog da se koristi jedan isti objekat za različite zahteve, a ne novi objekat za svaki zahtev? do sada sam nailazio samo na ovaj drugi slučaj, pa me zanima koji su tvoji motivi za ovako nešto...