CODEWITHSUNDEEP
javascriptload
Mr.5hady
Mr.5hady

Reputation: 57

load content of a page using only javavascript noe jquery

i working on a simple script that load users last posts in there blog and website !

the page is works well without any problem ! this is an example : http://parsclub.net/tools/widget/load-rss.php?u=reza-shady&l=5&w=200&c=4DC7FF

i want to load that link blow in external page !

for that i used this script and put it on a file 

<?php
    $user   = trim($_GET["u"]);
    $limit  = trim($_GET["l"]);
    $width  = trim($_GET["w"]);
    $color  = trim($_GET["c"]);
    header("Content-Type: text/javascript; charset=utf-8");
?>
document.write('<div id="parsclub_widget"><img src="http://parsclub.net/themes/parsclub/imgs/loading_posts.gif" style="margin:20px;display:inline-block;"/></div>');

function ajaxRequest() {
    var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
    if (window.ActiveXObject) {
        for (var i = 0; i < activexmodes.length; i++) {
            try {
                return new ActiveXObject(activexmodes[i])
            } catch (e) {

            }
        }
    } else if (window.XMLHttpRequest) return new XMLHttpRequest()
    else return false;
}

function load_widget() {
    var mygetrequest = new ajaxRequest()
    if (mygetrequest.overrideMimeType) mygetrequest.overrideMimeType('text/html')
    mygetrequest.onreadystatechange = function () {
        if (mygetrequest.readyState == 4) {
            if (mygetrequest.status == 200 || window.location.href.indexOf("http") == -1) {
                var data = mygetrequest.responseText;
                document.getElementById("parsclub_widget").innerHTML = data;
            } else {
                alert("خطایی در هنگام دریافت اطلاعات رخ داده است");
            }
        }
    }

    mygetrequest.open("GET", "http://parsclub.net/tools/widget/load-rss.php?u=<?= $user ?>&l=<?= $limit ?>&w=<?= $width ?>&c=<?= $color ?>", true);
    mygetrequest.send(null);
    return false;
}

load_widget();

but it don't work when i put it on a external page you can see the result here ! http://up.pc-t.ir/New%20Text%20Document.html

i know i cant simply load it with jquery load() function but i want it pure JavaScript can anyone help me with this ?

so sorry for my bad English

EDIT

@merlin-denker 10x for your help i found solution for my problem by adding this headers to the load-rss.php file

header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type');

Upvotes: 0

Views: 57

Answers (1)

Merlin Denker
Merlin Denker

Reputation: 1418

As Barmar already stated in a comment, the AJAX Request is failing because of the same origin policy.

The solution to this is to add a PHP-Script to your Website that simply reads the content of the other URL and echoes it.

<?php echo file_get_contents(YOUR_URL_HERE); ?>

Then let your Javascript call the script that is located on the same webserver and it will work.

Read more here: http://www.php.net/manual/function.file-get-contents.php

Upvotes: 1

Related Questions