Skip to content Skip to sidebar Skip to footer

Possible To Have A Self-contained Js/html (jquery) File, That Emulates An Ajax Call Locally?

I would like to create an example for posting, which would be a self-contained HTML file, that could emulate an AJAX call locally (that is, if the file is on your local PC file sys

Solution 1:

Well, I was thinking a bit about this, and I guess, the problem is when a call is made to file:///, there is simply nothing that can interpret data - it would be like doing cat somefile.txt on Unix; you just get the raw contents, cat in itself cannot do any processing.

So, when the Ajax call runs, it simply reads the whole file as a text string, which is not interpreted by anything (including the browser), and so the JS switch I have there would basically never run.

A quick workaround would be to use PHP; and have the switching part (which reacts on presence of the query string) in PHP (specifically php-cli as it is called on Ubuntu/Debian, which may have a server feature switch -S, but is otherwise not a full PHP install); then, if your file is in ~/Desktop/tmp.php, one can simply run

php -S localhost:8080

... in the same folder (~/Desktop), and then visit in a browser: http://localhost:8080/tmp.txt. This is how the OP file should be changed, so it works as expected under PHP - we can call it tmp.php now:

<?phpif ($_SERVER["QUERY_STRING"] == "shdat") {
  echo"Sending some message";
  exit;
}

?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.my_btn { background-color:yellow; }
.dispnone { display:none }
  </style>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">

var thishref = window.location.href.slice(0, window.location.href.indexOf('?')+1);
var qstr = window.location.href.slice(window.location.href.indexOf('?')+1);
//~ console.log("qstr", qstr);//~ if (qstr == "shdat") {//~ // interrupt normal page loading://~ window.stop();//~ // replace entire page so far with our "data",//~ // which will effectively "send it back" to "asker"?//~ // (doesn't work)//~ $(document).html("Sending some message");//~ }functionOnGetdata(inbtn) {
  console.log("OnGetdata");
  // http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url

  $.ajax(thishref + "?shdat", {
    success: function(data) {
      console.log("data ", data);
    },
    error: function(xhr, ajaxOptions, thrownError) {
      console.log("error " + thishref + " : " + xhr.status + " / " + thrownError);
    }
  });

}

ondocready = function() {
  $("#getdata").click(function(){
    OnGetdata(this);
  });
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h1>Hello World!</h1>
  <p>Here is the test:</p>

  <button type="button" id="getdata"class="my_btn">GetData!</button>
  <divid="dataholder"></div>

</body>
</html>

Now, when I click the "Get Data!" button, I get the "data Sending some message" in the JavaScript console, which is what I wanted the OP to do...

Post a Comment for "Possible To Have A Self-contained Js/html (jquery) File, That Emulates An Ajax Call Locally?"