I Have to do a cross-domain request and fetch content from a url using $.ajax function. But the below code only displays the first alert i.e alert(myUrl), After that the execution stops.The second alert is not displayed. I don't know what is wrong with the code i have written. Can somebody tell me what i am doing wrong here?Thanks in advance.

function getContentFromUrl(){
    var myUrl="";
    alert(myUrl);
    $.ajax({
        url: "?" +
             "q=select%20*%20from%20html%20where%20url%3D%22" +
             encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
        dataType: 'json',
        data: data,
        success: function () {
            alert("***********"+data.results[0]);
            if (data.results[0]) {
                var htmlText = data.results[0];
            var jsonObject = parseAndConvertToJsonObj(htmlText);
            } else {
                document.getElementById("displayerrors").innerHTML = "Could not load the page.";
            }
        },
        error: function() {
            document.getElementById("displayerrors").innerHTML = "Could not load the page.";
        }
    });
}  

I Have to do a cross-domain request and fetch content from a url using $.ajax function. But the below code only displays the first alert i.e alert(myUrl), After that the execution stops.The second alert is not displayed. I don't know what is wrong with the code i have written. Can somebody tell me what i am doing wrong here?Thanks in advance.

function getContentFromUrl(){
    var myUrl="http://icant.co.uk";
    alert(myUrl);
    $.ajax({
        url: "http://query.yahooapis./v1/public/yql?" +
             "q=select%20*%20from%20html%20where%20url%3D%22" +
             encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
        dataType: 'json',
        data: data,
        success: function () {
            alert("***********"+data.results[0]);
            if (data.results[0]) {
                var htmlText = data.results[0];
            var jsonObject = parseAndConvertToJsonObj(htmlText);
            } else {
                document.getElementById("displayerrors").innerHTML = "Could not load the page.";
            }
        },
        error: function() {
            document.getElementById("displayerrors").innerHTML = "Could not load the page.";
        }
    });
}  

• javascript
• jquery

Share Improve this question Follow edited Jul 23, 2012 at 2:53 anthony sottile 70.7k1919 gold badges191191 silver badges243243 bronze badges asked Jul 23, 2012 at 2:31 user1536201user1536201 1511 silver badge44 bronze badges 2

• 1 You forgot to indent your code properly... – elclanrs Commented Jul 23, 2012 at 2:34
• possible duplicate of JQuery ajax cross domain – Felix Kling Commented Jul 23, 2012 at 2:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Same Origin Policy:

The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.

You can't use regular JSON for cross-domain requests because of the same-origin policy. Instead, you'll need to use JSONP. In jQuery, you can do so like this:

$.ajax({
    dataType: 'jsonp',
    crossDomain: true
    // other info
});

Note that there are security issues involved with JSONP. Only use JSONP if you trust the host domain.

I assume this is jQuery?

Try the following:

url = "http://query.yahooapis./v1/public/yql?" +"q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(myUrl) + "%22&format=xml'&callback=?";
getContentFromURL(url);

function getContentFromURL(url)
{
    $.get(url, function (data) {
        console.log(data);
    });
}

If it dumps out to the console a response, you can build from there.

The data here is not defined

$.ajax({
            url: "http://query.yahooapis./v1/public/yql?" + "q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
            dataType: 'json',
            data: data,

and you forget to add a param for the callback function

success: function (data) {
    ....
}

The finally code should like this

function getContentFromUrl() {
        var myUrl = "http://icant.co.uk";
        alert(myUrl);
        $.ajax({
            url: "http://query.yahooapis./v1/public/yql?" + "q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
            dataType: 'json',
            data: {},
            success: function (data) {
                alert("***********" + data.results[0]);
                if (data.results[0]) {
                    var htmlText = data.results[0];
                    var jsonObject = parseAndConvertToJsonObj(htmlText);
                } else {
                    document.getElementById("displayerrors").innerHTML = "Could not load the page.";
                }
            },
            error: function () { document.getElementById("displayerrors").innerHTML = "Could not load the page."; }
        });
    }