JSON - Cross domain request

[trpost]

I am looking to make a small web app that will return the status of a
website from the client browser. I tried this with AJAX and it worked
great locally, but did not work for remote users accessing the page, I
ran into the security problem with making a cross domain request.

I have been reading that with JSON a cross domain request can be
accomplished, but have not been able to find any examples on how to use
it or how to get the return code from retrieving a web page.

I want to make these requests from the client browser, and it will not
work as a proxy request from my web server. Any ideas on how to make
this work? Please provide a working example if available...
Thanks

[Martin Honnen]

tr****@gmail.co m wrote:

I want to make these requests from the client browser, and it will not
work as a proxy request from my web server. Any ideas on how to make
this work?

An image object or an img element object can be used with an onload and
onerror handler e.g.
var img = new Image();
img.onerror = function (evt) {
// handle error case
};
img.onload = function (evt) {
// handle load
};
// now try to load a test image on that server you want to check e.g.
img.src = 'http://example.com/test.gif?time=' + new Date().getTime( );
That requires that you can put an image on the server you want to check.
And you don't get any status code, you have to live with either onerror
or onload being fired.

A different possible approach is to put or generate a script on that
server e.g.
<script type="text/javascript"
src="http://example.com/status.js"></script>
that at least allows you to load a resource from a server being a
different origin than the server the HTML document comes from, e.g. you
could do
var serverStatus = false;
with inline script and then status.js on the server sets
serverStatus = true;

I don't see how JSON would help to work around the same origin policy,
it is just a data exchange format that does not help you to make
requests to servers you can't access due to security restrictions.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[trpost]

Your examples make sense, but not exactly what I am looking for.
Basically I want a test page that will give the status of a webpage
based on the client experience. So I would want to status sites like
http://www.yahoo.com or http://www.google.com for the return code. If
you visit the page you would get a 200 return code, but if I visit the
page I might get a different return code because of proxy issues, or
some other local network issue. I want to be able to compare the user
experience from different locations.

I found this on the Yahoo site, but I could not find any example on how
to implement:

Use JSON and dynamic <script> tags instead of XML and XMLHttpRequest.
You can get around the browser security problem altogether by making
your web services request directly inside a <script> tag. If the Yahoo!
Web Service you're using can output JSON (using the output=json and
callback=functi on parameters), the data you get back from the web
service is evaluated as a JavaScript object when the page is loaded.

How could I use the above to accomplish what I am trying to do?? Thanks!

[Martin Honnen]

tr****@gmail.co m wrote:

Use JSON and dynamic <script> tags instead of XML and XMLHttpRequest.
You can get around the browser security problem altogether by making
your web services request directly inside a <script> tag. If the Yahoo!
Web Service you're using can output JSON (using the output=json and
callback=functi on parameters), the data you get back from the web
service is evaluated as a JavaScript object when the page is loaded.

How could I use the above to accomplish what I am trying to do??

What they suggest there is the use of a script element to load a script
from that server, what I had already suggested, only that they seem to
intend to dynamically create the script element (e.g.
document.create Element('script ')
) and then have the loaded script call a defined callback function in
your page. My example suggestion was a bit simpler, just a global
variable was used for the data exchange, they want you to use a callback
function the script can call and pass in data in the JSON format. That
is of course possible, only it does not help you to get any status from
that server if there is no special script available on the server that
you can load. So what they do is offer web services you or anyone else
can call using a script element while you want to get a status of any
server where there is no script available.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Lasse Reichstein Nielsen]

tr****@gmail.co m writes:

I have been reading that with JSON a cross domain request can be
accomplished,

That sounds like someone misunderstandin g the concept.
JSON is a format for representing data. It does not make any
assumptions about how those data are transferred between computers
(if at all).

What someone might be thinking of is that a <script src="..."> element
can load Javascript from a different source than the containing
document. JSON won't help you there, since loading a JSON expression
as a script element has no measureable effect (unless you can read the
text of the script element after it is loaded, but not all browsers
support that). You can send standard Javascript with side effects,
but then it's not JSON any more.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Randy Webb]

Lasse Reichstein Nielsen said the following on 4/13/2006 11:04 PM:

tr****@gmail.co m writes:

I have been reading that with JSON a cross domain request can be
accomplished,

That sounds like someone misunderstandin g the concept.

<URL: http://borkweb.com/story/look-ma-cross-domain-scripting >

I think a lot of that misunderstandin g comes, in part, from that
website. It implies that JSON is the secret to it when it isn't. The
secret to it is dynamic script tags.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Lasse Reichstein Nielsen]

Randy Webb <Hi************ @aol.com> writes:

<URL: http://borkweb.com/story/look-ma-cross-domain-scripting >

I think a lot of that misunderstandin g comes, in part, from that
website. It implies that JSON is the secret to it when it isn't. The
secret to it is dynamic script tags.

True. It's the Yahoo web-service format that uses JSON, but what it
sends is not pure JSON, but a function call with an argument that is a
JSON expression. It's good use of JSON, but it's not just that. It could
send any Javascript if it wanted, and it would still work as well.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Luke Matuszewski]

tr****@gmail.co m napisal(a):

I want to make these requests from the client browser, and it will not
work as a proxy request from my web server. Any ideas on how to make
this work? Please provide a working example if available...

First i agree with my followers... another way to get status code is to
write java applet and put it as object with width and height equal to 0
px and visibility to hidden (css). Inside java aplet you can write
method to make call to any server you want, and call that method from
JavaScript using LiveConnect. Example:

ScriptableClock .java
-----------------------------
public void setTimeZone(Str ing zone) {
stop();
timeZone = (zone.startsWit h("GMT")) ? true : false;
start();
}
public void setFont(String newFont, String newStyle, String newSize) {
stop();
if (newFont != null && newFont != "")
fontName = newFont;
if (newStyle != null && newStyle != "")
setFontStyle(ne wStyle);
if (newSize != null && newSize != "")
setFontSize(new Size);
displayFont = new Font(fontName, fontStyle, fontSize);
start();
}
public void setColor(String newbgColor, String newfgColor) {
stop();
bgColor = parseColor(newb gColor);
fgColor = parseColor(newf gColor);
start();
}
public String getInfo() {
String result = "Info about ScriptableClock .class\r\n";
result += "Version/Date: 1.0d1/2 May 1996\r\n";
result += "Author: Danny Goodman (da****@dannyg. com)\r\n";
result += "Public Variables:\r\n" ;
result += " (None)\r\n\r\n" ;
result += "Public Methods:\r\n";
result += " setTimeZone(\"G MT\" | \"Locale\")\r\n ";
result += " setFont(\"fontN ame\",\"Plain\" |\"Bold\" |
\"Italic\",
\"fontSize\")\r \n";
result += " setColor(\"bgCo lorName\",
\"fgColorName\" )\r\n";
result += " colors: Black, White, Red, Green, Blue, Yellow\r\n";
return result;
}

ScriptableClock .html
------------------------------
<html>
<head>
<title>Clock with Lots o' Widgets</title>
<script type="text/javascript">

function setTimeZone(pop up) {
var choice = popup.options[popup.selectedI ndex].value;
document.clock2 .setTimeZone(ch oice);
}

function setColor(form) {
var bg = form.background Color.options[
form.background Color.selectedI ndex].value;
var fg = form.foreground Color.options[
form.foreground Color.selectedI ndex].value;
document.clock2 .setColor(bg, fg);
}

function setFont(form) {
var fontName = form.theFont.op tions[form.theFont.se lectedIndex].value;
var fontStyle = form.theStyle.o ptions[
form.theStyle.s electedIndex].value;
var fontSize = form.theSize.op tions[form.theSize.se lectedIndex].value;
document.clock2 .setFont(fontNa me, fontStyle, fontSize);
}

function getAppletInfo(f orm) {
form.details.va lue = document.clock2 .getInfo();
}

function showSource() {
var newWindow = window.open("Sc riptableClock.j ava","",
"width=450,heig ht=300,resizabl e,scrollbars");
}

</script>
</head>
<body>
<applet code="Scriptabl eClock.class" name="clock2"
width="500"
height="45">
<param name="bgColor" value="Black" />
<param name="fgColor" value="Red" />
</applet>
<form name="widgets2" >
Select Time Zone: <select name="zone"
onchange="setTi meZone(this)">
<option selected="selec ted" value="Locale"> Local Time</option>
<option value="GMT">Gre enwich Mean Time</option>
</select>
<p>Select Background Color: <select name="backgroun dColor"
onchange="setCo lor(this.form)" >
<option value="White">W hite</option>
<option selected="selec ted" value="Black">B lack</option>
<option value="Red">Red </option>
<option value="Green">G reen</option>
<option value="Blue">Bl ue</option>
<option value="Yellow"> Yellow</option>
</select> Select Color Text Color: <select name="foregroun dColor"
onchange="setCo lor(this.form)" >
<option value="White">W hite</option>
<option value="Black">B lack</option>
<option selected="selec ted" value="Red">Red </option>
<option value="Green">G reen</option>
<option value="Blue">Bl ue</option>
<option value="Yellow"> Yellow</option>
</select></p>
<p>Select Font: <select name="theFont"
onchange="setFo nt(this.form)">
<option selected="selec ted" value="TimesRom an">Times
Roman</option>
<option value="Helvetic a">Helvetica </option>
<option value="Courier" >Courier</option>
<option value="Arial">A rial</option>
</select><br />
Select Font Style: <select name="theStyle"
onchange="setFo nt(this.form)">
<option selected="selec ted" value="Plain">P lain</option>
<option value="Bold">Bo ld</option>
<option value="Italic"> Italic</option>
</select><br />
Select Font Size: <select name="theSize"
onchange="setFo nt(this.form)">
<option value="12">12</option>
<option value="18">18</option>
<option selected="selec ted" value="24">24</option>
<option value="30">30</option>
</select></p>
<hr />
<input type="button" name="getInfo" value="Applet Info"
onclick="getApp letInfo(this.fo rm)" />
<p><textarea name="details" rows="11" cols="70">
</textarea></p>
</form>
<hr />
</body>
</html>

Here above it is only example, the classes you really need to use is
Socket Java class and emulate HTTP GET or POST or use simple Jakarta
HttpClient (see google).

Hope it helps.

BR
Luke M.

[trpost]

Thanks, the above example makes sense, the only question I have though
is about writting methods within the applet to get the site return
code. If I use 'simple Jakarta HttpClient' within the applet, then when
a call is made to a website for the status, would this call be from the
server, or client browser? I apoligize ahead of time as I am quite a
bit rusty with applets and have had no experience with Jakarta
HttpClient. All I want to accomplish is to gather the return codes from
several sites from the client browser experience. Thanks for your help!

[Randy Webb]

Lasse Reichstein Nielsen said the following on 4/14/2006 6:54 AM:

Randy Webb <Hi************ @aol.com> writes:

<URL: http://borkweb.com/story/look-ma-cross-domain-scripting >

I think a lot of that misunderstandin g comes, in part, from that
website. It implies that JSON is the secret to it when it isn't. The
secret to it is dynamic script tags.

True. It's the Yahoo web-service format that uses JSON, but what it
sends is not pure JSON, but a function call with an argument that is a
JSON expression. It's good use of JSON, but it's not just that. It could
send any Javascript if it wanted, and it would still work as well.

Yes sir, Yes sir :)

Maybe we need something in the notes that covers just the non-JSON part
of it that can be referred to.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/