13

I have the following function in a .js file in index.html

function getValues(){

 $.ajax({
   type: 'POST',
   url: "http://localhost/getData/getdata.php",
   success: function(data){
     var dataValues;
     var apnd;

     dataValues = String(data.NSE);
     apnd = "a";
     updateValues(dataValues, apnd);

     dataValues = String(data.BSE);
     apnd = "b";
     updateValues(dataValues, apnd);
    },
   dataType: "json"
 });

}

this works fine when I run it in a webserver like wamp. But I want to run index.html locally i.e without a webserver, The user just double clicks index.html and it should run but it doesn't. data is always null. What could be the problem? Sorry I am a super JQuery Noob.

the code in getdata.php file is

<?

echo json_encode(array("NSE"=>rand(5000, 20000),"BSE"=>rand(5000, 20000))); 

?>
Steven
  • 177
  • 1
  • 2
  • 5
  • 1
    Please clear up one thing, are you still posting (making the AJAX call) to a web server even though you are running the web page without a web server? – Bob Fincheimer Aug 03 '10 at 14:55
  • 1
    I suggest that you use `php -S localhost:80 ` to start a simple webserver. – ahuigo Jun 21 '14 at 18:17

7 Answers7

18

When you run your index.html from a file the AJAX works. But the problem occurs because you are viewing the file at address "file://....../index.html" and you are making a AJAX request to "http://localhost/..../something.php" which IS NOT ALLOWED because of cross site scripting. All AJAX requests must go to the same domain/server.

This is a assuming that you are viewing the file by double clicking it and still making the AJAX request to the web server.

Bob Fincheimer
  • 17,978
  • 1
  • 29
  • 54
  • Also, it wouldn't work even if the URL was relative, otherwise, a website running on a CD would have access to the entire file system. – Ruan Mendes Aug 15 '16 at 15:54
8

AJAX needs a webserver to communicate with for it to be able to retrieve any data; otherwise its just talking to a wall. Running the script without a webserver is like trying to make a call with no cell-service. :D

Gordon Gustafson
  • 40,133
  • 25
  • 115
  • 157
6

The web server is exactly what is handling all of the details for you.

You cannot POST without a web server to post to. HTTP = web protocol, so you cannot have a HTTP URL without a web server to target.

The web server is also the process that takes your request for a PHP page and runs the PHP interpreter, managing the inputs and outputs.

Why do you want to run it locally?

Fosco
  • 38,138
  • 7
  • 87
  • 101
  • 2
    I think he is running the web page locally, (via C:\...\index.html) but he is still making the request to the web server (with php). I think it is a cross site scripting issue (see my answer), not a parsing issue. – Bob Fincheimer Aug 03 '10 at 14:58
5

Ajax does not work over the file:// protocol as mentioned by others. Perhaps you want something like http://www.appcelerator.com/ to create desktop apps with html/js/css

BGerrissen
  • 21,250
  • 3
  • 39
  • 40
3

You can't do that, you should open your html file also from web server address eg http://localhost/yoursite/file.html or even remote server url. You need to go through the server/server url.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
2

I'm tickled pink with myself because reading the answers people posted about how you can't do AJAX "locally" without a Web server led me to the solution as to how you can do it. With JavaScript, the XMLHttpRequest() object's methods are mostly produced by the browser and you need to leave out the one produced by the Web server (xmlhttp.status == 200). The following works:

<script>
window.onload = function() {

    var input = document.getElementById("input");

    input.onclick = function() {
        var xmlhttp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                document.getElementById("response").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "response.html", true);
        xmlhttp.send();
    }
}
</script>
</head>

<body>
<h3>AJAX Request/Response</h3>
<p></p>
<input id="input" type="button" value="Call AJAX" />
<p></p>
<div id="response"></div>
Andrew Koper
  • 6,481
  • 6
  • 42
  • 50
  • 3
    This is no longer true in the latest versions of Chrome (error: "Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.") and Firefox (error: "Access to restricted URI denied"). – adelphus Jan 28 '15 at 12:35
2

Read the SOP. Accessing data from a domain other than the current one is blocked for security reasons.

tcooc
  • 20,629
  • 3
  • 39
  • 57