"Build a Basic PHP Website (2018)" was retired on December 10, 2019. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed AJAX Basics!
You have completed AJAX Basics!
Preview
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