jquery $ajax not working as expected

Question

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

possible duplicate of [JQuery ajax cross domain](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) — Felix Kling, Jul 23 '12 at 02:43

score 6 · Answer 1 · answered Jul 23 '12 at 02:34

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.

answered Jul 23 '12 at 02:34

Ram

143,282
16
168
197

Yes but according to this tutorial we can use getJSON function. http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax and i tried to convert getJSON to $.ajax so the function ended like this. – user1536201 Jul 23 '12 at 02:47
I tried to convert in into $ajax because it has more flexibilty than getJSON – user1536201 Jul 23 '12 at 02:49
1

@user1536201 - I hate to solicit my answer on another perfectly good answer, but if you want to use JSONP with the `$.ajax` method, you should just add the two parameters that are in my answer. jQuery takes care of nearly everything else, so it's not actually that difficult. If you're having trouble, please specify what, exactly, is going wrong. – jeff Jul 23 '12 at 03:02

score 1 · Answer 2 · answered Jul 23 '12 at 02:36

1

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.

answered Jul 23 '12 at 02:36

jeff

8,300
2
31
43

1

Yes, that is the best method of approach. – Oliver Spryn Jul 23 '12 at 02:36
There is a `callback=?` in his url, jQuery will take this as a jsonp request automatically. – Charlie Jul 23 '12 at 02:45
But he specifically states `dataType: 'json'`. Doesn't that override the jQuery automatic type detection? – jeff Jul 23 '12 at 02:47
I'm not sure if that's correct. Anyways, it's best to be specifically state what data type to use. – jeff Jul 23 '12 at 02:56

score 1 · Answer 3 · answered Jul 23 '12 at 02:37

1

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.

answered Jul 23 '12 at 02:37

Andrew White

600
1
9
29

He has a jQuery tag and is using jQuery code, so yes, that would be a logical assumption. =p – jeff Jul 23 '12 at 02:41

Charlie · Accepted Answer · 2012-07-23T02:47:19.040

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

I have test it, just paste my code and it works, make sure function `parseAndConvertToJsonObj` is defined in your code. — Charlie, Jul 23 '12 at 02:57
But now i have another problem. First time i call this it gives data.results[0] is undefined. But second time it get the html. — user1536201, Jul 23 '12 at 03:01
Yes it is defined and also the alert("***********" + data.results[0]); is before calling the function parseAndConvertToJsonObj() so the error is before that is my assumption. — user1536201, Jul 23 '12 at 03:07

jquery $ajax not working as expected

4 Answers4