Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Web browsers prevent certain types of AJAX requests, such as requests to other websites. Learn the rules of a web browser's "same-origin" policy and ways to work around these limitations.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now you know that AJAX can make requests
of a web server and get responses back.
0:00
But there are limitations
to how you can use AJAX.
0:05
AJAX is normally limited by a web
browser's same origin policy,
0:08
which controls how a JavaScript can
access content from a web server.
0:12
In general, you can use AJAX to
communicate from one page to another on
0:17
the same web server, but
not to access other web servers.
0:21
In other words,
0:25
a web page on your site can't use AJAX
to communicate with someone else's bank.
0:25
And a web page on another
site can't use JavaScript to
0:30
access content on your website.
0:33
For example, say you have AJAX code on
a page located at www.myserver.com.
0:36
You can use AJAX to talk to
a PHP file on that server.
0:43
You can also talk to files on
the same server within subfolders.
0:47
However, you'll run into
problems in the following cases.
0:51
Requesting data from another website,
if it's not the same server,
0:55
then it's not from the same origin and
it's forbidden.
0:59
Switching protocols, if you try
to make an AJAX request to HTTPS
1:03
myserver.com, the browser won't allow it.
1:08
Switching from HTTP to
HTTPS isn't allowed.
1:12
Switching port numbers,
1:17
a browser can't let you request data
from another port, like port 8888.
1:19
Switching from the default port
of 80 to port 8888 is a no-no.
1:24
Switching hosts,
an AJAX request from a page located at
1:30
www.myserver.com can't
talk to db.mysurvey.com.
1:35
Even though the two share the same domain,
myserver.com,
1:40
they're different hosts, www and db.
1:44
This limitation shouldn't cause you any
trouble when you simply want to make your
1:48
web pages feel more responsive and
load new information from your own site.
1:51
But if you want to embed a Google map,
your tweets,
1:56
or photos from Flickr, all of those assets
are in different domains than your own.
1:59
Fortunately, there are a few ways to
circumvent the same origin policy.
2:05
First, you can create a web proxy.
2:10
Web servers aren't limited
by the same origin policy.
2:13
So a web server can request data
from servers at other domains.
2:16
Because of this, you can set up a script
in PHP or using Ruby on Rails on your
2:20
server, which asks for
information from another web server.
2:25
Then you can use AJAX to talk
to the script on your site,
2:29
which talks to the other site, and
returns the data to your page.
2:32
This makes sure the AJAX part
stays within the same website, and
2:36
obeys the same origin policy.
2:40
Two, another common technique uses
something called JSONP, which stands for
2:43
JSON with Padding.
2:47
It's not traditional AJAX,
2:49
it actually relies on the ability to
link to JavaScript files across domains.
2:51
Browsers actually do allow many
types of cross domain links.
2:56
For example,
you can link to photos on other websites.
3:00
You can link to CSS files
on other websites, and
3:04
you can load JavaScript
files from other sites.
3:06
In fact, linking to JavaScript files
across domains is a common technique
3:09
when working with popular
JavaScript libraries like jQuery.
3:13
In fact, this is how CDNs, or
Content Delivery Networks, work.
3:17
A CDN hosts files that
other sites can use.
3:22
Google, for example,
3:26
hosts many different JavaScript libraries
like the popular jQuery library.
3:27
You can link to Google's CDN to download
jQuery instead of putting the jQuery
3:33
JavaScript file on your own server,
which would waste disk space and
3:37
your server's processing power.
3:40
JSONP relies on this feature.
3:43
Instead of actually using AJAX
to contact another web server,
3:45
you load a JavaScript
file from the other site.
3:49
This is perfectly okay with a web browser.
3:52
That JavaScript file contains
the information you're after.
3:55
Finally, there's a new method for
making AJAX requests across domains.
3:59
It's called CORS or
Cross-Origin Resource Sharing.
4:04
It's a W3C recommendation, and is already
implemented in most current browsers.
4:08
It does require some setup
on the server's part, but
4:14
allows a server to accept
requests from other domains.
4:17
It even allows for more complex types
of authentication that require the web
4:20
browser to supply credentials before the
web server will provide any information.
4:25
There's one last AJAX limitation
you need to keep in mind.
4:30
AJAX doesn't work unless you're viewing
your page through a web server.
4:33
For example, if you build a web page
on your computer that uses AJAX and
4:37
then open that page right up in your
web browser, the AJAX won't work.
4:40
You'll end up getting an error each
time you make an AJAX request.
4:44
However, if you're using
Treehouse Workspaces to build your pages,
4:48
any AJAX request you make from
one page in the workspace
4:52
to another page in
the workspace will work.
4:55
Likewise, if you set up a local
development environment using something
4:59
like MAMP for Mac or WAMP for Windows,
you'll be okay as long as you view
5:03
your AJAX enabled pages
through that web server.
5:07
Now that you know the basics of how AJAX
works, it's time to dig deeper into AJAX,
5:10
and write more code.
5:15
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up