AJAX, same-origin Policy and working XML Requests

Posted by Joern on Stack Overflow See other posts from Stack Overflow or by Joern
Published on 2010-12-24T00:48:15Z Indexed on 2010/12/24 0:54 UTC
Read the original article Hit count: 264

Filed under:
|
|
|

Hello guys, so, currently I develop Widgets for Smartphones and am going a bit more advanced into fields of data exchange between client and server applications.

My problem is: For my current project I want my client file to request data from a PHP script with the help of AJAX XmlHttpRequest and the POST method:

function xmlRequestNotes()
{
var parameter = 'p=1234';

xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", url, true);

// Http Header
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", parameter.length);
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
  json = JSON.parse(xmlhttp.responseText); // Doing Stuff with the Response

 }
};

xmlhttp.send(parameter);
}

This works perfectly fine on my local server set up in XAMPP and the local Widget emulator. But if it gets onto the device (also with access to the target network) I receive the 101 Network Error. And as far as I have read, this is due to the "Same-Origin Policy" of XmlHttpRequests?

My problem is to really understand that. Although the idea of this policy is clear to me, I'm a bit confused by the fact that another XmlHttpRequest for a Yahoo Weather XML Feed works fine. Now, could anyone be so helpful to enlighten me? Here is the request that returns a city name from Yahoo's weather feed: function getCityName() { xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "http://weather.yahooapis.com/forecastrss?w=645458&u=c", true);

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        xmlhttp.responseXML;
        var yweather = "http://xml.weather.yahoo.com/ns/rss/1.0";
        alert(xmlhttp.responseXML.getElementsByTagNameNS(yweather, "location")[0].getAttribute("city"));
    }
};

xmlhttp.send(null);

}

Obvious differences are the POST and GET methods for once, but seeing that the Same-Origin Policy takes effect no matter what method, I can't really make much sense of it. Why does the latter request work but not the first?

I would really appreciate some help here. Greetings and a merry Christmas to you guys!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about AJAX