JSONP可以在jQuery中运行，但不能在mootools中运行

Question

I'm trying to convert my code to Mootools (I like the coding paradigm better).

I am doing cross-domain AJAX where I own both domains (closed network). I am just requesting simple JSON from my server. I get these errors in Mootools (jQuery works):

Resource interpreted as Script but transferred with MIME type text/plain. Uncaught SyntaxError: Unexpected token :

var url = http://localhost:3000/

Server:

var http = require('http'),
    json = {"hi" : false};

http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(JSON.stringify(json));
}).listen(3000, function() {
    console.log("Server on " + 3000);
});

jQuery:

$.ajax({
    url: url,
    type: "GET",
    dataType: 'json',
    success: function (data) {
    }
});

Mootools:

var myRequest = new Request.JSONP({
    url: url,
    onComplete: function (data) {
        alert(JSON.stringify(data));
    }
});
myRequest.send();

I've tried adding these headers to no avail.:

'Accept': 'application/json',
'Content-Type': 'application/json'

This seems to be a client-side thing and not a server-side thing since it works in jQuery.

Answer 1

What does URL look like? jQuery figures out it's a JSONP request by adding ?callback= or ?foo= to the url. Request.JSONP instead uses an option callbackKey .

There's no method option for JSONP (in any library), since it's just injecting a script tag.

var myRequest = new Request.JSONP({
  url: url,
  callbackKey: 'callback'
  onComplete: function(data){}
}).send();

I have a feeling, however, you aren't using JSONP, but rather XHR with JSON. If that's the case, use Request.JSON , not Request.JSONP .

---

Edit

Since it sounds, from the comments on this answer, that you're not using JSONP, just do this:

new Request.JSON({
  url: url,
  method: 'get',
  onSuccess: function (data){
    console.log(data)
  }
}).send()

---

Edit 2

To change the request headers just add them as an option:

new Request.JSON({
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
  },
  url: url,
  method: 'get',
  onSuccess: function (data){
    console.log(data)
  }
}).send()

Answer 2

You had a syntax error in your code.

var myRequest = new Request.JSONP({
    url: url,
    method: 'get',
    onComplete: function(data){}
});
myRequest.send();

Also, the response should be wrapped with callback function, example: http://jsfiddle.net/zalun/yVbYQ/

Answer 3

Your ajax call should be like this

          $.ajax({
                type: "GET",
                url: "http://localhost:17370/SampleService.asmx/HelloWorld",
                data: "{}",
                crossDomain: true,
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
               async:false,
                success:function(data,status){
                    alert(data);

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Error Occured!" + " | " +
                    XMLHttpRequest + " | " + textStatus + " | " +
                    errorThrown);
                }
            });

Your server side method should not return simple string it should return response in jsonp format for that you need to follow this blog:

http://msrtechnical.blogspot.in/