MDN tells me that the specification of the XMLHttpRequest open method includes the bstrUrl parameter and that this parameter represents "The requested URL." Vague to say the least.
www.help.dottoro.com tells me that the parameter contains the "String that specifies the URL where the request needs to be sent."
W3Schools has this example:
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
This example triggers the text to be displayed when the button is clicked.
My book tells me it is "The path to the page that will handle the request." Then I see an example in my book of where a .json file is specified in that parameter which contains data that is then displayed in html.
I'm confused. How does js know what the specified file is for?
How is url parameter in open method of XMLHttpRequest used?
It's the URL that the XMLHttpRequest object will ask the browser to send the GET or POST to.
How does js know what the specified file is for?
The person writing the JavaScript writes code that knows what to do with the specified resource.
In your w3schools example, the code knows that it's requesting something that will return HTML it wants to display in the demo element.
If the request were for JSON, the code would handle a successful request by parsing the JSON and doing something with the data.
Related
I know I might just be missing a simple thing that's right under my nose, or may not understand ajax at all... but I have a problem - this simple peace of code isn't working, but it's from w3schools and it's the simplest example of ajax working.
Can someone help me, please?
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Here's the "ajax_info.txt" file:
text changed.
If you're opening the file in the browser with file:// or C:/ protocol you'll get a cross origin request error when trying to load 'ajax_info.txt', the reason for this is to protect your machines private files from being read by browser scripts. To fix this you'll need to use the protocol http:// which you can do if you install a webserver onto your local machine such as WAMP or MAMP.
Additionally a file called ajax_info.txt needs to exist in the same directory as this html file. Otherwise this javascript AJAX call will return an error: /ajax_info.txt 404 (Not Found)
What would be the best way to get the "last modified" attribute from a file NOT on the web server. My purpose is to display the time stamps of specific network files in a web page. All the JavaScript references I have found are for the current file, or from the web server. I have found references for browsing to, drag-and-drop, etc. But I would like to read the file attribute from the original location. Is this even possible??
EDIT:
So now that I have a batch file to create the text file on the web server, how do I get that data into an array so I can display it properly? The data is correct, but it is one long string.
This is my code:
<html>
<head>
<script type="text/javascript">
function getStatus() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("backupStatus").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "file.txt", true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="getStatus()">Get QNAP Backup Status</button>
<ul id="backupStatus">
</ul>
</body>
</html>
This is my output:
#ECHO 4/13/2016 #FREEMAN1 4/13/2016 #FREEMAN02 4/13/2016 #FREEMAN03 4/7/2016 #FREEMAN4 4/7/2016 #FREEMAN5 4/7/2016 #HR10 4/13/2016 #ACCOUNTING20 4/12/2016 #IT01 4/13/2016 #PROD20 4/12/2016 #UPS10 4/13/2016
javascript can't go out and read files on a user's computer. You'd need to read this information on a server and load it in to the page, or via an ajax call.
I am trying the following :
<html>
<script src ="myscript.js" type = "text/javascript">
// in this file i have the foo functions defined...
</script>
<!--- here the page is defined -->
<form action = "some.php" method = "post">
<input type = "submit" name ="exec" value = "EX" style="width:40px" id = "EX" onClick="foo();">
</html>
Now, in myscript.js :
function foo() {
var req;
req = new XMLHttpRequest();
req.open("POST", "mydomain.name/hello.php", false);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// ldt is a successfully defined string,
// i am not showing the complete function, but an alert here
// showes that ldt is successfully defined
req.send(ldt);
alert("sent");
alert(req.status);
if(req.status == 200)
{
var lddata = req.responseText;
alert(lddata);
}
}
Not that in my javascript, I have called hello.php, while the form in the initial htmp goes to a different file : some.php.
The file hello.php just spits "hello world" , and nothing else - at this moment, nothing is doe with the post variables.
Now, I would expect that until req.send() recieves a response, it javascript wont execute any futher, and before some.php is loaded, i will at least be alerted about the state of req.
However, in firefox (all files are being excuted from a local apache server, besides for hello.php, which is in mydomain.name. I have CORS enabled by default.), before I get to know the status of req via an alert, the next page, some.php is loaded.
What is wrong?
PS: there are some questions in the similar topic in SO, but i did not seem to have made any progress with them.
EDIT: as mentioned in the comment : this is the plan
Click on the "EX" button, in the html file at the begining, causes the onClick function foo() to get activated.
foo() does the XmlHttpRequest() to load a response from hello.php somewhere else (mydomain.name)
Then foo() alos sets the value of an hidden input element
Then since EX is a submit button, the form submits everything (including the newly set hidden element) to some.php, which is in the same server.
Edit 2: Also tried with
req.open("POST", "http://mydomain.name/hello.php", false);
as mentioned in a comment, did not work either.
I have found a geocoder website that will give me some data that I need as a variable in my javascript code: http://geocoder.us/service/csv/geocode?zip=95472. the website returns only the content: 38.393314, -122.83666, Sebastopol, CA, 95472. I need pull this information from the website and put it into a string.
abc = "38.393314, -122.83666, Sebastopol, CA, 95472"
How can I accomplish this?
You can use AJAX:
var req = new XMLHttpRequest(); //Create an AJAX object
req.open('GET','http://geocoder.us/service/csv/geocode?zip=95472',true); //Location and method
req.send(); //Send
req.onreadystatechange = function() { //When it's ready
if (this.readyState === 4) { //... which is code 4
console.log(this.responseText); //Then you have the responseText
}
}
This only works when the request is from the same domain, tho (for security purposes). If you want it to work on any domain, you'll have to use a proxy.
You should use Javascript to make an ajax request to that URL and it will return the information you want in a format you specify, usually JSON. Depending on what Javascript libraries you are/aren't using, there's different ways you could do that -- probably the most common would be to use jQuery to make your request. Here's info on that API:
https://api.jquery.com/jQuery.get/
I've been experimenting with Ajast and it's very useful for getting remote URL sources etc. In the below example it bypasses same-domain-policy and gets "Hello World !", but I cannot recreate this when I change it to google.com.
<html>
<head>
<script type="text/javascript" src="http://ajast.org/ajast/ajast.js"></script>
<script id="TestScript" Language="javascript">
function test()
{
var xmlhttp = new AJAST.JsHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4) // 4 = "loaded"
{
if (xmlhttp.status == 200)
document.write(xmlhttp.responseText);
else
alert('ERROR: ' + xmlhttp.status + ' -> ' + xmlhttp.statusText);
}
}
xmlhttp.open("GET", 'http://riffelspot.com/ajast/ajast_full.php', false);
xmlhttp.send();
}
</script>
</head>
<body onload="test();">Please wait...</body>
</html>
</code>
My problem occurs when I change the get url to google.com, can anyone help me? I want JavaScript to fetch the source of a page.
Read the documentation.
AJAST can only be used to send a request to a compatible server-side script.
Basically, it's a non-standard form of JSONP.
I thought that dynamicly loading the script into the DOM would bypass this security feature, like the quote suggests
"The main advantage of AJAST is its ability to make requests to foreign hosts (cross domain) which a standard AJAX request cannot do using a technique known as 'the script tag hack'. "
Where would I be able to find documentation as i dont want to use a JSONP proxy, I would like to request the webpage without signing.