Get external content using javascript

Question

I would like make a website which will go to an external web page and get a content that is between some div.

External content url: http://www.fazenda.org.br/palavra_vida/

Content code that I want to extract:

<div class="bloco">
  <h2>Palavra do Dia</h2>
  <span>
  <p><span class="negrito">Todo aquele que é da verdade escuta a minha voz</span>&nbsp;Jo 18, 33b-37</p><p>Jesus Cristo, Rei do Universo </p>      </span> </div>

How can I get the content that is between

<p> <span class="negrito"> Todo aquele que é da verdade escuta a minha voz</span>&nbsp;Jo 18, 33b-37</p><p>Jesus Cristo, Rei do Universo </p>      </span>

Thank you all!

Answer 1

In this case it would not be possible since you would need to perform an AJAX request and since the destination it is considered a security risk and would be blocked by the web browser with an error message similar to this one:

XMLHttpRequest cannot load http://www.fazenda.org.br/palavra_vida/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yourdomain.com' is therefore not allowed access.

You would need to do it via whatever server-side language you are using.

Just to show an example of how could you do it if the destination page belonged to the same domain:

$.ajax({
     url: "/palavra_vida/",
     dataType: 'text',
     success: function(data) {
          var phrase = $(data).find("div.bloco > span > p > span.negrito").text();
          console.log(phrase);
     }
});