JavaScript - Cross Line Navigation

Hi All,

I'm writing this post as there are alot of questions about Cross Domain AJAX request so i'm going to give an overview of the different ways and the best practices

Ok so there are 2 systems for this the key difference is how much control you have.

If you control the Requested site you can use Javascript Safe calling to that server, this is all done via a few Headers so to do this

all you have to do is send some headers from the page your requesting.

The first is tell the browser that the site the AJAX call is coming from is allowed this is done with

"Access-Control-Allow-Origin: "
Now this can be set to a wild card and allow all sites to access the page

"Access-Control-Allow-Origin: *"

Or you can say only a set server can
"Access-Control-Allow-Origin: mydomain.com"

This header allows GET requests but what if you need to post data to the site well you need to tell the browser that POST data is allowed to be sent

Access-Control-Allow-Headers: GET,POST

Now we run into the problem that sending post data the browser will send the header Content-Type but your server has not told the browser its allowed to send that header so
Access-Control-Allow-Methods: Content-Type

Will allow the header to be sent if you wish to send any other custom headers you have to make your server tell the browser its allowed to send them this is done by adding them as a comma delimited list via the "Access-Control-Allow-Headers" header

Now if you dont have control well then your back to using a script that is local to the AJAX script then sending the data via cURL or another connection method to the remote server

Please note i will be uploading examples in php later.

Example Scripts

Remote Server
PHP Code:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: GET,POST");
header("Access-Control-Allow-Methods: Content-Type");
$output = array(
    'response' => 'hello world!',
    '_GET' => $_GET,
    '_POST' => $_POST,
);
echo json_encode($output); 


Client Script -- please note built for Google Chrome
PHP Code:
var getExample = new XMLHttpRequest();
getExample.open("GET", "http://www.test.com/remote.php?test=set", true);
getExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); }
getExample.send(null);

var postExample = new XMLHttpRequest();
postExample.open("POST", "http://www.test.com/remote.php?test=set", true);
postExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); }
postExample.setRequestHeader("Content-Type", "x-www-urlencoded-data");// this is sent to prevent the requested server not saving post data
postExample.send("?set=test"); 


If you are unable to Edit files on the remote server you can use the link provided by Kor
http://www.troywolf.com/articles/

This will give you all the information you require to use php to talk to the remote server (basic proxy in effect)

Hi,

I have searched and searched...

Is there a way of using the Ajax httpRequest cross domain?

thanks

I'm having a problem with http://taxlienagents.com/ and how it is displaying in Google Chrome. When I open the site in Google Chrome, the center Tab Area seems to cover the main text above it. If you take a look at http://img651.imageshack.us/img651/8869/taxliensite.jpg, you should be able to see what I am talking about versus when opening the site in FireFox. I tried playing around with the Z-Index, but that didn't seem to fix it. The other issue that I seem to be having is with rolling over the buttons ("How to," "Coaching," and "Done for You") the highlight only covers about 2/3 of the button, I think this is an issue with FancyBox.

hi,

my working project (needs a proxy): http://www.mypubspace.com/dashtest/order.html

currently working through this tutorial, I have setup a proxy and saved it as proxy.php
http://www.wait-till-i.com/2010/01/1...query-and-yql/


I just need to put this piece of code in my JavaScript but not sure where?!

Code:

var url = $(this).attr('href');
    if(url.match('^http')){
      url = 'proxy.php?url=' + url;
    }

here is my project code
Code:

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var townRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		townRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			townRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				townRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	townRequest.onreadystatechange = function(){
		if(townRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = townRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
	townRequest.send(null);
}

function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
	countyRequest.send(null);
}



function townlistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		
		
	 if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxTownlist');
			var county = document.getElementById('county').value;
			var town = document.getElementById('town').value;
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
	ajaxRequest.send(null); 
}

function countylistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxCountylist');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
	ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

please help?!

JavaScript code is not traversing via Iframe with Cross Domain.

Actually i was assigned with a project, to grab the top page URL, which has many Iframes, which are coming from different domains. The final sub domain has the JavaScript code, which has to grab the top page URL.

Can anyone help me out in this????

So I was reading up on how to load and parse an XML file into an html page and I found through w3 a great tutorial with sample code:

http://www.w3schools.com/xml/xml_dom.asp

It appears to work fine on their website but when I try it from my desktop it doesn't work. So what I have is an html file with contents:
Code:

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

And then the xml file named "note.xml":

Code:

<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

I have no idea what I am missing or not seeing that is causing this not to work but if anyone knows I would appreciate the input. For the record I have tried this in chrome and ie.

Hi guys.

I want to create login form similar like facebook login which web owner can put the script and it will become login for their web and also it will auto register at their web.

I believe it need to use javascript because javascript is cross platform.

Can someone give me a clue for me to start on?

ok, so i am working on a type of Option Box that is heavily formatted with CSS and animated using JS $fx()

The $fx framework works fine on all browsers, and i have only used fairly simple code, and yet my page functions perfectly on Chrome and Safari.
but will not work in Firefox or IE

(Firefox does nothing, and IE has a couple of css issues and doesnt work either...)

http://calumk.com/else/blogpoststuff...ng_Option_Box/

if anyone could help me i would really appreciate it.

(obviously view in Chrome or safari to see how it is meant to respond)

Is there a method for breaking out of frames that's truly cross-browser compatible?

I've seen a ton of examples on how to do this, but I'm not sure which method works the best.

Thanks!

I am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out.
You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx
To start, go to the box for duty amount or freight charges and press enter
The following code is what I used to handle this event.
Code:

function handleKeyPress2(e,control)
{
    var evt = e ? e : window.event;
    var bt = control.id;
    if (bt)
    {
        if (evt.keyCode == 13)
        {
            //bt.click();
            jumptoNext(control, e);
            stopEvent(e);
            return false;
        }
    }
}
function jumptoNext(field, event)
{
    for (i = 0; i < field.form.elements.length; i++)
        if (field.form.elements[i].tabIndex == field.tabIndex + 1)
        {
            field.form.elements[i].focus();
            if (field.form.elements[i].type == "text") field.form.elements[i].select();
            break;
        }
}


function stopEvent(e)
{
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;

    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
}

hi, in my page he http://www.mypubspace.com/dashtest/order.html

I would like this working Cross Domain and output in JSON?

Can anyone please help me?

thanks

code:
Code:

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var townRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		townRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			townRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				townRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	townRequest.onreadystatechange = function(){
		if(townRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = townRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
	townRequest.send(null);
}

function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var county = document.getElementById('county').value;
	var town = document.getElementById('town').value;
	var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
	countyRequest.send(null);
}



function townlistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		
		
	 if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxTownlist');
			var county = document.getElementById('county').value;
			var town = document.getElementById('town').value;
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
	ajaxRequest.send(null); 
}

function countylistFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxCountylist');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	
	ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
	ajaxRequest.send(null); 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>

I read the "http://bodybrowser.googlelabs.com/body.html" page into an Iframe on my page. I now need to print the "viewcontainer" DIV that resides in the iframe. Accessing divs in an iframe is an issue with cross domain sources.

Can anyone help me with a workaround or different idea?

Thanks in advance!!

Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.