Problem with XMLHttpRequest with AJAX

b/Web publicado por u/Ephraim Becker November 16, 2015, 01:51:55 AM

Problem with XMLHttpRequest with AJAX

I'm having a problem with this code. I've been debugging it for hours already. Why isn't the XML parsing and displaying?

Code:

Code Select

//Get the latest technology news from the internet

//Fetch the RSS feed
var request = new XMLHttpRequest();
var xmlDoc;

request.open("GET", "http://www.winbeta.org/feed", true);
request.send();

if(request.readyState == 4)
{
xmlDoc = request.responseXML;
}

personOneTalk.innerHTML = xmlDoc;

Inicia sesión o crea una cuenta para dejar un comentario

u/Adriweb November 16, 2015, 01:57:08 AM

The first thing to do is to look at the JS console and see what's wrong. What have you been doing "for hours" ??!

For me, I had two things :
1) "Mixed Content: The page at 'https://codewalr.us[...]' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.winbeta.org/feed'. This request has been blocked; the content must be served over HTTPS."
That was solved by actually requesting the feed from HTTPS. You don't want to use HTTP anyway.

2) XMLHttpRequest cannot load https://www.winbeta.org/feed. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://codewalr.us' is therefore not allowed access.
Standard CSRF protection, I'll let you read up on that (example of a solution: making the XHR through a local PHP (or whatever) proxy fetching the remote content for you).

u/Ephraim Becker November 16, 2015, 01:59:42 AM

I have an extension in Google Chrome that takes care of the "Access-Control-Allow-Origin" header problem

u/Ephraim Becker November 16, 2015, 02:36:35 PM

I have this code:

Code Select

//Get the latest technology news from the internet

//Fetch the RSS feed
var request = new XMLHttpRequest();
var xmlDoc;

if(typeof request.overrideMimeType != "undefined")
{
request.overrideMimeType("text/xml");
}

request.open("GET", "http://www.winbeta.org/feed", true);
request.send();

request.onreadystatechange = function()
{

if(request.readyState == 4 && request.status == 200)
{
var xmlDoc = request.responseXML;

personOneTalk.innerHTML = "Sure! Have you heard of " + xmlDoc;
}

else
{

}

};

and I get the result:
Sure! Have you heard of [object XMLDocument]

How do I parse this?

Update: problem solved!!!!

Last Edit: November 16, 2015, 04:25:02 PM by Ephraim Becker

u/Dream of Omnimaga November 16, 2015, 06:25:18 PM

How did you solve the problem?

u/novenary November 16, 2015, 07:32:13 PM

Quote from: Ephraim Becker on November 16, 2015, 01:59:42 AM
I have an extension in Google Chrome that takes care of the "Access-Control-Allow-Origin" header problem

This is fine for development purposes, but don't expect your users to have the extension installed for it to work.

u/Dream of Omnimaga November 16, 2015, 07:56:51 PM

Yeah, that's my main concern here. When developing or using softwares, you have to use the "I need to adapt to other people" philosphy, not "Other people needs to adapt to me". So you need to ensure that your softwares requires as few dependencies as possible because many people will not force themselves to install a new obscure extension just to use your software, let alone switching browsers.

u/Ephraim Becker November 18, 2015, 12:30:06 AM

Is there a way to get around the access-control-allow-origin using only JavaScript?

u/novenary November 19, 2015, 04:41:52 PM

No, it's a security feature used to make sure requests can't be made across different sites.

u/Ephraim Becker November 20, 2015, 02:05:12 PM

Should I go with JSONP? GitHub Pages doesn't support server-side programming languages so I have no choice but to do this in JavaScript.

Edit: I'm very confused about CORS. If CORS allows you to request other sites, then why can't I. I'm only able to do this in IE 11 locally.

Last Edit: November 20, 2015, 08:32:58 PM by Ephraim Becker

u/Travis November 20, 2015, 10:37:59 PM

Quote from: Ephraim Becker on November 20, 2015, 02:05:12 PMI'm very confused about CORS. If CORS allows you to request other sites, then why can't I. I'm only able to do this in IE 11 locally.

The way I understand it, the site you're trying to request content from has to set up their web server to send a header that tells the browser it's okay to receive requests from your site. Unless you own the remote site you're requesting from, that's probably not going to happen.

What in particular was wrong with some of the solutions people suggested in other threads? I may have overlooked something, but it seems like I keep reading about you running into various problems, solving them, but without saying anything at all about how you solved them, whether the suggestions people gave you are helpful, or exactly what you're trying to do right now. Without that information, we are all completely in the dark.

Last Edit: November 20, 2015, 10:40:17 PM by Travis

u/Dream of Omnimaga November 20, 2015, 11:35:02 PM

I think he goes all-out trying to do things exactly the way he wants, so as a result, he seeks for ways to circumvent limitations to his solution instead of finding alternate solutions. However, he has to realize that life doesn't work that way and accept to do things differently sometimes, else he won't get very far when coding.

u/Ephraim Becker November 22, 2015, 01:52:16 AM

I just read up on CORS again and it said that access-control-allow-origin has to be enabled on the server that i'm accessing it from. Since i'm not in control of the server i'm trying to access, I need to find RSS feeds with CORS enabled. Does anyone know of any?

u/allynfolksjr November 22, 2015, 02:29:07 AM

What's your overall objective here?

u/Ephraim Becker November 22, 2015, 02:31:40 AM

Trying to get my Virtual Friend(http://ephraimb.github.io/Virtual-Friend) to fetch an RSS feed from the internet and have a conversation based on that. The problem is I dont see any RSS feeds supporting CORS.

Edit: MSN has CORS enabled but it returns an error:

XML5608: Semicolon expected.
Line: 11, Column 130

Last Edit: November 22, 2015, 08:20:55 PM by Ephraim Becker