For example I want to fetch https://www.w3schools.com/xml/simple.xml
to my website http://example.com.
This is the code
var xhr = new XMLHttpRequest();
xhr.open("GET", 'https://www.w3schools.com/xml/simple.xml', true);
xhr.onload = function () {
if (xhr.readyState === 4 && this.status === 200) {
console.log(this);
}
}
xhr.send();
I'm getting an empty response and a warning saying
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.w3schools.com/xml/simple.xml with MIME type text/xml. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Then I had been studying these CORB rules. Some developers are saying that it is not possible to get data from another origin.
But is it really the case?
In the project I'm working on, it is a public xml feed, and since the owner are updating the feed quite often - and I would like to have my website in sync with the feed - I assume it is not possible? Do I really have to create a xml file, and copy-paste the xml data and upload it to my server each time?
Or is there a way to fetch this data directly from the url somehow?
You could create a PHP script like this:
<?php
header("Content-type: text/xml");
echo file_get_contents('https://www.w3schools.com/xml/simple.xml');
?>
Call this simple.php and then amend your Javascript to call simple.php instead:
var xhr = new XMLHttpRequest();
xhr.open("GET", 'simple.php', true);
xhr.onload = function () {
if (xhr.readyState === 4 && this.status === 200) {
console.log(this);
}
}
xhr.send();
Related
Today I researched about HTTP-methods and the differences between GET and HEAD in detail.
In theory I know, that HEAD only returns the HTTP header, not the HTTP body. Its useful to get information about ressources without downloading them completly.
I made a little Script using XHR to check out a HEAD-reques and tested it in Firefox 50.0.2.
http://codepen.io/anon/pen/oYqGMQ
var req = new XMLHttpRequest();
req.addEventListener("readystatechange", function () {
if (req.readyState === 4 && req.status === 200) {
alert("got response \n" + req.responseText);
}
}, false);
req.open("HEAD", location.href, true); // this is a HEAD-request, why I get a responseText?
req.send();
Why the HEAD-Request receives the complete data in the reponseText-property? I thought HEAD-Request will not receive any data of the body.
I can't see any difference between HEAD and GET.
Am I missing a point? I am using Firefox.
I'm trying to make a call to the Yelp API from JavaScript, but getting an error. Below is my code. I believe I will have to use Oauth, but I don't know where should I put it in the header.
function doAjax(){
var xhr = new XMLHttpRequest();
var url = "http://api.yelp.com/v2/searchterm=cream+puffs&location=chicago";
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var some = JSON.parse(xhr.responseText);
}
}
xhr.open('GET', url, true);
xhr.send();
}
The problem is that you are trying to access a resource that is on a different domain from your application. In this case your application resides on http://fiddle.jshell.net and the resource is at http://api.yelp.com.
CORS is one way to get around this, see here:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
I am working on a web crawler that can integrate with our partner portals and submit post requests to make bid changes.
The trouble is that the crawler runs in an environment which cannot execute jQuery, only native Javascript.
I have determined that the following AJAX code successfully sends the post request:
$.ajax({
type: "POST",
url: "http://acp.example.com/campaigns/122828",
data: "data-string"
});
Is there a way to translate the above statement into native javascript so that the crawler can execute it?
UPDATE
When executing hex494D49's native Javascript below, I am receiving a "NetworkError: 404 Not Found - http://acp.fyber.com/campaigns/122828" message.
However, when I execute the original AJAX code in firebug, it successfully sends the POST request.
Any idea why the same url would return a 404 error using native Javascript as opposed to AJAX?
Thanks
Sending AJAX request using POST method
var xhr = new XMLHttpRequest();
var url = "url";
var data = "email=hey#mail.com&password=101010";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// do something with response
console.log(xhr.responseText);
}
};
xhr.send(data);
Sending AJAX request using GET method
xhr = new XMLHttpRequest();
var url = "url?email=hey#mail.com&password=101010";
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// do something with response
console.log(xhr.responseText);
}
}
xhr.send();
To avoid unexpected requests to the server, it's a good practice to use encodeURIComponent() method on any user-entered parameters that will be passed as part of a URI.
I'm trying to work with the Livestream API to see if a certain channel is live but keep getting this error:
XMLHttpRequest cannot load http://channel.api.livestream.com/1.0/livestatus?channel=huskystarcraft. Origin http://www.webdevstl.com is not allowed by Access-Control-Allow-Origin.
Do I need to run it through PHP or am I doing something wrong in my ajax call? It's pretty straight forward code:
function getActive(){
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var json = JSON.parse(xmlhttp.responseText);
console.log(json);
}
}
xmlhttp.open("GET", "http://channel.api.livestream.com/1.0/livestatus?channel=huskystarcraft", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
getActive();
You're running into restrictions imposed by the Same Origin Policy. In short, AJAX calls to a different domain are prohibited and will fail - unless explicitly permitted by the remote host.
You need to either use JSONP (mostly applicable to data returned by APIs) or proxy the request through your own server/domain.
CORS would also be an option, but that assumes you having access to the remote server's config.
There is a lot of same questions but i cannot find the answer so i am reposing the same question.I am receiving an json request using java script
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return null;
}
request.open("GET", url, true);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
}
} else
alert(request.status);
}
I am receiving an status code zero while i receive the request the javascript runs on apache server and json request will be received from tomcat server everything is local . can any one tell me how to over come it.
Note: i cannot use any framework.
I suspect that you are violating the same origin policy restriction that is built in browsers. This restriction prevents you from sending cross domain AJAX requests. So for example if the page containing the AJAX call is hosted on http://localhost/example.htm and you are trying to send an AJAX request to http://localhost:8080/somescript you won't be able to do so because the domains do not match (different ports).
The best way to ensure that your AJAX requests work is by only using relative urls:
request.open("GET", "/somescript", true);