Use Ajax in HTML; AJAMU

If you want to include content to your blog or website that comes from another source without writing a bunch of JavaScript, this article about AJAMU is for you.

Demo

The name comes from AJAX which stands for Asynchronous JavaScript And XML, the XML part is removed. The suffix MU is for Mark Up. So it becomes Asynchronous JavaScript And Mark Up.

As a funny aside, this name; Ajamu is an African name that means He fights for what he wants.

There are lots of free services that provide information in JSON format.
One example of this is the service provided by http://freegeoip.net. If you go to this URL http://freegeoip.net/json/{IP} where {IP} is replaced with an IP address such as 68.75.224.100, the result will be something like this:

{"ip":"68.75.224.100","country_code":"US","country_name":"United States","region_code":"IL","region_name":"Illinois","city":"Clifton","zip_code":"60927","time_zone":"America/Chicago","latitude":40.933,"longitude":-87.971,"metro_code":602}

I just randomly chose an IP address.

If you leave out the IP address, it will automatically discover your IP address, and use that.

Now you can use the information like the country_code, region_code and city to look up weather forecast information from another service such as https://developer.yahoo.com/weather/.

OK, but I promised that we would do all this without using JavaScript. So I will provide you with JavaScript, that you can use in your website like this:

<!DOCTYPE html>  
<html>  
  <head>
    <script src="http://rawgit.com/4thex/ajamu/v0.2/aja.js"></script>
  </head>
  <body>
    <aja src="http://freegeoip.net/json/">
      <!-- template -->
      <div>You are here: {city} {region_code}, {country_code}</div>
    </aja>
  </body>
</html>  

Simply add this inside the head element of your page:

<script src="http://rawgit.com/4thex/ajamu/v0.2/aja.js"></script>  

Then inside the body of your page, you add aja elements. The src attribute points to the URL of the service where you get the information from.

The arguments in curly brackets {} are replaced with the values from the service response.

This is just one example of how to use the aja element.

The arguments in curly brackets can reach the data inside the JSON response to any level by using the JavaScript dot-notation:

query.results.item.forecast[0].text  

There is no wildcard or JSONPath like support yet, but that will come later. Suggestions are welcome.

Go to the GitHub project to contribute to this new open source project. Simply clone it, make your suggested changes, and send me a pull request. You are also welcome to add an issue for other developers to solve.