Ajax and CodePen

Jump to Docs Navigation

CodePen is very Ajax friendly. We don’t do anything special to alter or prohibit Ajax. In fact, we try and make it easier in several ways. Let’s take a look.

What are you trying to Ajax?

The most common things are:

A chunk of HTML
A chunk of JSON

These might be requested from:

Another Pen or a resource on CodePen itself
Your website
A third-party API

It’s just good to have in mind what you are expecting to get and from where.

Proper Cross-Origin Request Headers

Every single Ajax request on CodePen is going to be a cross-origin request. That is because the previews are essentially run on the domain s.codepen.io which you do not have access to. Thus any website (yours, third-party, or CodePen itself) needs to specifically allow Ajax requests.

There are lots of ways to do this. The website enable-cors.org can help. On a typical Apache server setup, the .htaccess file can be used to set this header, with:

Header set Access-Control-Allow-Origin "*"

If you try to do an Ajax request against a URL that doesn’t allow it, you’ll be greeted with an error in the console:

XMLHttpRequest cannot load https://css-tricks.com/. Origin https://s.codepen.io is not allowed by Access-Control-Allow-Origin.

Ajaxing From CodePen Itself

CodePen’s Pens-as-Resources feature is particularly useful for Ajax. You can keep, for example, some HTML or JSON in another Pen, and then Ajax that content into another Pen.

All Pens expose their raw code through a file extension. For instance, this Pen:

https://codepen.io/chriscoyier/pen/difoC

Has it’s HTML available at:

https://codepen.io/chriscoyier/pen/difoC.html

And that HTML has the cross-origin header specified correctly so that it can be Ajax’d for.

If you’re a PRO user and use our Asset Hosting feature, the URL’s to those assets also have the correct cross-origin header set and can be Ajax’d against.

Vanilla JavaScript Example

Without doing much to deal with cross-browser support, here’s how a basic Ajax request is made:

var xhrObject = new XMLHttpRequest();

xhrObject.onreadystatechange = function() {
  if (xhrObject.readyState === 4) {
    if (xhrObject.status === 200 || xhrObject.status === 304) {
      
      // Success! Do stuff with data.
      console.log(xhrObject.responseText); 
      
    }
  }
};

xhrObject.open(
  "GET", 
  "https://codepen.io/chriscoyier/pen/difoC.html", 
  true
);
xhrObject.send();

Demo Pen

You would have to go back to IE 6 for XMLHttpRequest not to work, so you’re pretty safe there. If you do a lot of it, you just might want to get a bit more abstracted and better with error handling.

jQuery Example

Instead of HTML, let’s use JSON this time. Say we create some JSON data as a Pen. We can access that JSON through a URL like this:

https://codepen.io/chriscoyier/pen/EAIJj.js

Then we can use jQuery’s special helper just for JSON, $.getJSON. You just provide the URL and a callback function to run once the data is successfully gotten:

$.getJSON(
  "https://codepen.io/chriscoyier/pen/EAIJj.js",
  function(data) {

    // Success! Do stuff with data.
    console.log(data);

  }
);

That’s just one example. Any of jQuery’s Ajax functions will work, like $.get, $.post, or the complete $.ajax.