Click here to Skip to main content
Click here to Skip to main content
Go to top

Making Cross Domain jQuery AJAX Calls

, 3 May 2010
Rate this:
Please Sign up or sign in to vote.
Making Cross Domain jQuery AJAX Calls

Today's web browsers do not allow web pages to make cross-domain Ajax calls. By this, I mean that if you are at www.ajax.com and try to make an Ajax call (a call using the XmlHttpRequest object), the browser would not allow this to happen. Why? For security purposes that I cannot currently name.

However, at some point you get to a project where you're interfacing this third-party site that needs to talk to your main site, or some other similar situation where the only way you're going to get the data you need from point a to point b is with some JavaScript magic. Here is how to accomplish it.

How to get/post data using jQuery/JavaScript (JSONP)

The short answer: its not Ajax at all, its JSONP. Yes, JSONP is not Ajax. I just learned this today. Like I said earlier, browsers do not allow XHR/Ajax cross-browser requests. JSONP avoids this by making a request for a script file-- no Ajax at all. Let me explain:

  1. Instead of accessing the XHR object, the browser first creates a new script tag to inject into the HTML DOM
  2. The script tag's URL is set to the URL you're looking to get/post(using HTTP GET) data to
  3. The script tag is injected into the page, causing...
  4. The request is sent to the server, even if it's cross-domain
  5. The server returns the data in the form of a JavaScript function call
  6. The browser receives the data and executes the function call

jQuery Code

//use a get to post a querystring value via HTTP GET to an asp.net webhandler
$.getJSON("http://www.example.com/get-post.ashx?
	var1=var1value&callback=?",function(data){
     //really no need to do anything here, we're just posting data
     //but this will output success
     alert(data.return);
});

ASP.NET Generic Handler/webhandler Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace jsonp_test
{
    /// <span class="code-SummaryComment"><summary>
</span>    /// Summary description for $codebehindclassname$
    /// <span class="code-SummaryComment"></summary>
</span>    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class get_post : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string callback = "";
            try
            {
                if (!string.IsNullOrEmpty(context.Request["callback"]))
                {
                    if (!string.IsNullOrEmpty(context.Request["var1"]))
                        SaveData(context.Request["var1"]);
                    callback = context.Request["callback"];

                    context.Response.Write(callback + "({ \"return\": \"Success\" })");
                }
            }
            catch (Exception exc)
            {
                //hopefully this error doesn't contain any quotes... you know?
                context.Response.Write(callback + 
			"({ \"return\": \"" + exc.Message + "\" })");
            }
        }

        private void SaveData(string value)
        {
            //do something with the var1 posted to us
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

So what we effectively have here is the setup for ASP.NET cross domain Ajax calls using jQuery.

How to do Cross-domain Calls to Others' Servers: YQL

What if you need to do a get, but don't have the ability to make the page it's posting to return a JSONP response? Using YQL is a great way to achieve this.

YQL is a way to query the internet like it is a database. For example, one could easily run:

select * from html where url="http://www.microsoft.com"

and receive a JSONP return containing all of the site's HTML. You could also do the following:

select * from html where url="http://www.mircorosft.com?var1=var1value"

and HTTP GET values to the server. YQL does not allow this to happen on any area of any site that is blocked by the robots.txt file. Here's the full example code:

//feel free to add querystring vars to this
var myurl="http://www.example.com/get-post.ashx?var1=var1value&callback=?";
//make the call to YQL 
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(myurl)+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            //this data.results[0] is the return object you work with, 
            //if you actually want to do something with the returned json
            alert(data.results[0]);
          } else {
            var errormsg = '
Error: could not load the page.
';
            //output to firebug's console
            //use alert() for other browsers/setups
            conole.log(errormsg);
          }
        }
      );

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

micahs
Chief Technology Officer
United States United States
Pittsburgh-based developer.
Follow on   Twitter

Comments and Discussions

 
QuestionHow to POST data ??? PinmemberThandermax11-May-10 7:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 3 May 2010
Article Copyright 2010 by micahs
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid