How to send and retrieve cross-domain ajax data in userscript

Question

I use this code to store and retrieve ajax data via http://openkeyval.org/

 $.ajax({    /*   send data    */
        url: "http://api.openkeyval.org/store/",
        data: "test-key-data=" + JSON.stringify([123,456]),
        dataType: "jsonp",
        success: function(data){
            console.log(data);
        }
 }); 

$.ajax({     /*   retrieve data     */
        url: "http://api.openkeyval.org/test-key-data",
        dataType: "jsonp",
        success: function(data){
            console.log(data);
        }
 });

everything work fine in Chrome javascript console but in userscript I get error like this

Uncaught ReferenceError: jQuery110208458673823624849_1375932537303 is not defined

I try to use GM_xmlhttpRequest to retrieve data like this

GM_xmlhttpRequest({
    method: "GET",
    url: "http://api.openkeyval.org/test-key-data",
    onload: function(response) {
        console.log(response.responseText);
    }
});

but it seem like openkeyval doesn't accept data via POST/GET method and log result was like when you access it directly from url of browser like this

{"error":"not_found","documentation_url":"http://openkeyval.org/"}

I include jQuery and it work fine with this code
// @require http://code.jquery.com/jquery-latest.min.js

I try to use Greasemonkey/jQuery XHR bridge with out change other code by like this
// @require http://courses.ischool.berkeley.edu/i290-4/f09/resources/gm_jq_xhr.js

and try use openkeyval official javascript library with code like this
// @require http://cdn.openkeyval.org/statics/openkeyval.packed.js
and retrieve data with code like this

var ourCallback = function(value, key) {
  console('The value of ' + key ' + is ' + value);
};
window.remoteStorage.getItem('test-key-data', ourCallback);

still got error ERROR: Unexpected string

Please help, I mess with it more than 10 hours.
Thank you so much.

The reference is to the callback function generated by jquery. Sounds to me the way you invoke your userscript unloads the jquery functions before the callback is executed. Perhaps you use a link and forgot the preventDefault? — mplungjan, Aug 08 '13 at 04:17
sorry I don't know about preventDefault and don't understand much about response data and jsonp could you please shed me some light. — hsgu, Aug 08 '13 at 04:23

score 3 · Accepted Answer · answered Aug 09 '13 at 01:55

It look like $.ajax always trigger error event function
but GM_xmlhttpRequest can retrieve mistype data,
so I try looking for dataType: "jsonp" in GM_xmlhttpRequest and I got that jsonp header content-type is "application/javascript" OR "application/json" and the first one work well.

my new code for retrieve data look like this

GM_xmlhttpRequest({
    method: "GET",
    url: "http://api.openkeyval.org/test-key-data?nocache=" + new Date(),
    headers: {  
         "Content-Type": "application/javascript"
    },
    onload: function(response) {
        console.log(response.responseText);
    }
});

and retrieve data using $.ajax even it always trigger error event function but it still send data.
I try both content-type on GM_xmlhttpRequest and still not work.

my code to store data look like this

$.ajax({    /*   send data    */
        url: "http://api.openkeyval.org/store/",
        data: "test-key-data=" + JSON.stringify(myVarObject),
        dataType: "jsonp"
 });

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

Add this into $.ajax({...})

crossDomain: true;

It is because by default cross domain ability is disabled. See http://api.jquery.com/jQuery.ajax/

EDIT:

Sometimes there will be a issue with different charset between local script and remote script. Try using:

scriptCharset: "utf-8";

Also look at JQuery AJAX is not sending UTF-8 to my server, only in IE

edited May 23 '17 at 10:32

Community

1
1

answered Aug 08 '13 at 04:19

FatDog47

462
4
15

thank for suggest but nothing change with `crossDomain: true` or without it got the same error `Uncaught ReferenceError: jQuery11020802358973538503_1375936210604 is not defined ` – hsgu Aug 08 '13 at 04:31

score 0 · Answer 3 · answered Aug 08 '13 at 04:46

0

Elaborating my comment

The reference is to the callback function generated by jquery. It Sounds to me the way you invoke your userscript unloads the jquery functions before the callback is executed. Perhaps you use a link and forgot the preventDefault?

If you ajax and have

 $("#linkid").on("click"

or

 $("#formid").on("submit"

it is MANDATORY to continue like this:

           ,function(e) {
    e.preventDefault();

Otherwise the link is followed or the form is submitted which may not have any visible effect, but the asynchronous scripts have been (partially) unloaded unless the form and link has a target other than the current window

answered Aug 08 '13 at 04:46

mplungjan

169,008
28
173
236

Thank for suggest, to make think clear I call ajax with out bind to element when document body complete load and the error occur so it doesn't trigger success function I try to put `event/data.preventDefault();` in there anyway) but it has no effect and I try `setTimeout` and test create element with jQuery and it still alive so I think it does't unload and I still don't know how to retrieve those data. Thank again. – hsgu Aug 08 '13 at 05:08
The is no need to use preventDefault if the event does not result in a page load. Can you add your bind to your question? – mplungjan Aug 08 '13 at 05:33

How to send and retrieve cross-domain ajax data in userscript

3 Answers3

EDIT: