Get content from another page by javascript or jquery

Navigation
7

I need to get content from another page inside the site using Javascript, I tried to use ajax, however it gives this error "Cross-origin request blocked: Same Origin Policy prevents reading of the remote resource in < (Reason: CORS 'Access-Control-Allow-Origin' header is not present). "

I need to get the value of some divs and put in variables, I need to do this using JavaScript.

How to do this?

Used code: 

function showUser(str) {
if (str == "") {
    document.getElementById("cabecalho").innerHTML = "";
    return;
} else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("cabecalho").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","https://www.google.com.br");
    xmlhttp.send();
    }
}

showUser("str");
    
asked by anonymous 12.06.2015 / 19:57

5 answers

4

The security ajax does not cross-domain, but it has a Brazilian way of doing this I will leave the example running here in the OS to falicitar: 

$(document).ready(function(){
	$("button").click(function(){
		site = $("#site").val();
		$.ajax({
			url: site,
			type: 'GET',
			success: function(res) {
				var headline = $(res.responseText).text();
				$("#conteudo").html(headline);
			}
		});
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><head><!--ScriptsJavascript--><scripttype="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script><title>jQueryeAjaxCrossDomain</title></head><body><inputtype="text" id="site" value="http://" />
<button id="acessar">Clique para obter o conteúdo deste site</button>
<div id="conteudo" style="background:#EEF0A6"></div>
</body>
</html>

Edit - Explanation note:

  • A James Padolsey .js file ( link ) was used. the idea of joining the YQL (yahoo web service) service to work with jQuery. But the question most people are asking is whether using this web-service is safe. So taking a closer look at whether it is feasible to use a third party service or whether it is safe or not. so ...

You can download the project and build your own web service, or make a fork of the original project and make your customizations if you do not want to take that risk;)

  

github link

    
15.06.2015 / 16:34
4

You can use the load () function. Example usage: 

$( "#resultado" ).load( "ajax/teste.html #container" );

That is, the element of ID resultado will receive the content that is in the element of ID container of page teste.html .

    
12.06.2015 / 20:00
3

To make a cross-domain request, as you are doing in the example, you must set the Access-Control-Allow-Origin header on the required page.

As you are using the Google website as an example, it will not be possible, but if the page is yours, you can even set this heading yourself.

One way to use the page would also be to use iframe , but I do not think it's what you want.

UPDATE

Example to set the header in PHP 

// permite que qualquer site acesse (destinada a apis públicas)
header("Access-Control-Allow-Origin: *");

// permite que um site específico acesse (destinada a apis privadas)
header("Access-Control-Allow-Origin: https://seu.site.com.br");
    
15.06.2015 / 15:43
1

Or in apache httpd.conf // allows any site to access (intended for public apis) Header set Access-Control-Allow-Origin "*"

// allows a specific site to access (intended for private api) Header set Access-Control-Allow-Origin " link "

    
17.12.2015 / 18:03
0

I solved this problem using an iframe to access the external url, so it is not necessary to make any changes to the target application. 

<iframe src="http://seuServico.do"></iframe>
    
22.04.2016 / 22:08
NFC-e integration API (electronic consumer invoice) with PHP Do not open keyboard automatically when you enter screen with EditText