Using jQuery/Jsonp to send cross-domain request and parse result?

Question

I'm trying to get and parse data from a remote cross-domain site with jQuery.To avoid Same-Origin-Policy and Cross-Domin issue, I use jsonp.

<html>  
<head>  
<title>Ajax Sample</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
</style>
<script>
$(document).ready(function(){
    //Obviously the service wont give a JSON format response
    var url='http://stackoverflow.com/search?q=Cross+domain';
    $.ajax({
     url:url,
     dataType: 'jsonp',
     success:function(data){
         console.log(data);
     },
     error:function(){
         alert("Error");
     },
    });
});
</script>
<body>
</body>  
</html>

But what I got is error:

Resource interpreted as Script but transferred with MIME type text/html: "http://stackoverflow.com/search?q=Cross+domain&callback=jQuery1708665772899985313_1374154944485&_=1374154944492"

and

Uncaught SyntaxError: Unexpected token <

So how to make it in a right way?

The comment at the beginning of your code explains the problem doesn't it? That is, _"Obviously the service wont give a JSON format response"_ - you can't just tell jQuery to use jsonp and expect the service at the other end to magically cater for it. — nnnnnn, Jul 18 '13 at 13:51
Responce should contains jsonp content, not html, or anything else. — YD1m, Jul 18 '13 at 13:52
The stackoverflow url is just an example, and the point is : I can't know which kind of data the service returns. Most website dont have a open API or return json datas. I just wanna find a common way. — Sam Su, Jul 18 '13 at 13:53
try [http://api.stackoverflow.com/1.0/usage](http://api.stackoverflow.com/1.0/usage) — Spokey, Jul 18 '13 at 13:54
@SamSu you can't access arbitrary cross-origin data using JSONP _unless that data is JSONP_! — Alnitak, Jul 18 '13 at 13:57

score -2 · Answer 1 · answered Jul 18 '13 at 13:52

-2

The first warning is normal if the remote end does not set the correct Content-Type header for its JSONP output. It's just a warning, it causes no harm.

If the second error is from trying to access the stackoverflow website then that error is simply because you're trying to throw HTML code at the JS interpreter.

Note that a JSONP request must receive JSON in the form of a valid JS script. It won't work with any other type of input.

For security reasons you cannot access other types of resource from other origins unless those resources send the appropriate Access-Control-Allow-Origin HTTP headers.

answered Jul 18 '13 at 13:52

Alnitak

334,560
70
407
495

Tks Alnitak.As you metioned in ur answer and comment, what I'm trying to do is impossible? Cuz the site requested don't return jsonp? – Sam Su Jul 18 '13 at 14:01
In my case, the server returns html,so what should I do to parse it? – Sam Su Jul 18 '13 at 14:03
@SamSu it's impossible, _unless_ the remote site sets the appropriate HTTP headers. It also depends on what you're actually wanting to do with those resources. For example, if you just want to retrieve them but throw away the results, you could set the URL as the `src` property of an image tag. – Alnitak Jul 18 '13 at 14:03
Yes,just retrieving the results and showing data in a google-chrome-extension demo.So I cant make the server side to cater me. I just have html and javascript in client side. – Sam Su Jul 18 '13 at 14:09
ah, if this is a chrome extension then perhaps you need this - http://stackoverflow.com/questions/6051537/how-to-disable-same-origin-policy-in-chrome-extension – Alnitak Jul 18 '13 at 14:16

Using jQuery/Jsonp to send cross-domain request and parse result?

1 Answers1