jquery $ajax not working as expected

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.com/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.";
        }
    });
}  

Answers


The data here is not defined

$.ajax({
            url: "http://query.yahooapis.com/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.com/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."; }
        });
    }  

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.com/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.


Need Your Help

windows 8 phone app vs windows 8 tab app

windows windows-8 windows-phone-8

I am new to windows 8 app development I just want to know that it is possible to make one app package which will run both on windows tab and windows 8 phone [For example in case of iOS same ipa can...

Force AUCTeX to parse the whole document

emacs elisp auctex

I'm using AUCTeX 11.87 along with emacs 24.3 for writing my LaTeX documents. This is working nicely with one exception: The parsing.