Click here to Skip to main content
12,449,413 members (60,789 online)
Click here to Skip to main content
Add your own
alternative version

Stats

66.3K views
28 bookmarked
Posted

Making Cross Domain jQuery AJAX Calls

, 3 May 2010 CPOL
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>

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.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionHow to POST data ??? Pin
Thandermax11-May-10 7:59
memberThandermax11-May-10 7:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 3 May 2010
Article Copyright 2010 by micahs
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid