Geek Answers Handbook

JSONP for cross-site bookmarkle management

I want to create a cross-site bookmarklet that receives the highlighted word, passes it to the CodeIgniter method ( domain.com/controller/method ), and returns the definition through the API dictionary. My skeleton works well in one domain, but I want to expand it to use cross-domain JSONP. But I do not understand.

I know that I need to load a script from a remote location and paste it in the current context. And I believe that I need to get the highlighted word on the page, and then call the URL, which looks like domain.com/controller/method/word , to get this script. Then it becomes foggy.

I think I have two questions:

  • Where to include the necessary javascript to handle parsing and passing a word through XMLHTTPRequest? I think this will be an SRC script, which I will introduce in a new context. Is it somehow in my corresponding CodeIgniter method? Or does this new script come from a random location on the same server as the corresponding method, and just call it?

Answer: This is not an addition to XMLHTTPRequest, it is instead, so the step is completely removed. The new script calls the method, passes the necessary information along the lines of the request and receives a response in a JSON array.

  • Do I understand correctly that in the end I will reply the JSON response from the method back as word(json_encode($array)); ?

Answer: Yes, I will pass this as callbackFunctionName(json_encode($array)); .

  • Do I need to set headers as done here ?

Update

I have included answers to two of my three answers above. If someone can explain everything, of course, I will correct their answer correctly, otherwise I will explain my stumbling blocks in the answer. I still have no idea where I am writing the callback function and what I will do with it in JS.

Thanks so much for any help you can provide for this.

+6
json javascript jsonp bookmarklet
source share
1 answer

First, set up your bookmarklet with a link that you can remove from the bookmarks bar:

 <html> <head></head> <body> <a href="javascript:(function(src, cb){var s = document.createElement('script');s.charset = 'UTF-8';document.body.insertBefore(s, document.body.firstChild);s.src = src;if(typeof cb === 'function'){s.onload = cb;s.onreadystatechange = function(){(/loaded|complete/).test(s.readyState)&&cb(s);};}return s;}('http://github.com/pure/pure/raw/master/libs/pure.js', function(e){alert('loaded');}))">load</a> </body> </html>

Replace the url with your script, it will be loaded and launched on the main page.

However, it is now on the hosted page and cannot call your server with XMLHTTPRequest , because the domains do not match.
Here comes the JSONP.

In a loaded script, you can put a function, for example: function srvCallback(json){...}

If you want to call your server, you will enter it as a script, using the same function as in the above bookmarklet:

 function jsonp(src){ var s = document.createElement('script'); old = document.getElementById('srvCall'); old && document.body.removeChild(old); s.charset = 'UTF-8'; s.id = 'srvCall'; document.body.insertBefore(s, document.body.firstChild); s.src = src + '?' + new Date().getTime(); }

Make your request, for example:

 jsonp('http://domain.com/controller/method/word')

The server should respond something like this:

 srvCallback({word:'hello'});

And finally, the srvCallback function srvCallback automatically called, inside the function you get your JSON and show the result to the user.

+7
source share

More articles:


All Articles