how to make jsonp calls dynamically

Posted on 2014-08-21
Last Modified: 2014-08-22
Hi there,

I need to be able to have one of my web server pages get data (on user request) from another server of the same origin policy is the problem I am working around here.  

I have used the following javascript approach to make a single cross domain call to the other server.  I use a callback parameter as shown in numerous examples out there.  And I use the approach of creating a script element and insert the script into the page shown here:

A sample page on

	function processJSON (inData) {

	  // Do something with the JSON response
	// Create a new script element
	var script_element = document.createElement('script');
	// Set its source to my target server
	script_element.src = '';
	// Put the script element in the page head

Open in new window

For me, this is a simple way to get back some html sub-components from another server of mine.

So, my question is this:  How do I do this multiple times?   This technique will continue to append script elements into the page head in order to get them to fire and that seems rather unhealthy, yes?  To continue to plug more and more of them into the head?

I have a few pages in my system where staff may make 10 or twenty such calls and I am looking for some assistance as to the best way to do this with this jsonp approach.  Essentially have this associated with a button or link that when clicked will accomplish a cross-domain task like this over and over again upon request.

Many thanks, in advance, for any assistance in this regard.

Question by:srbarker8
    LVL 35

    Expert Comment

    Are you able to use a library such as jQuery to do your JSONP requests?

    Author Comment

    Hi ... yes, I can ...

    If there is an easier approach using jquery, I would appreciate some help with that approach.

    Thx Scott
    LVL 81

    Expert Comment

    you can use this :
    check the examples and what it do
    LVL 42

    Accepted Solution

    jQuery will be the easiest:

    include it in your <head> like this: <script src=""></script>

    then it's as simple as this
    $(function() {
    		tagSource:function( request, response ) {
    				url: "",
    				dataType: "jsonp",
    				data: {
    					q: request.term
    				success: function( data ) {
    					response( data );
    		triggerKeys:['enter', 'comma', 'tab'],
    		allowNewTags: false

    Open in new window

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now