Week 9 | April 4, 2016

Data & AJAX

Method Presentations

  • As each student presents their method to the class. You can follow along as necessary for your own practice.
  • Once you've presented, make sure your final presentation page is prepared to add to the method-presentations repo.
  • Follow the git pull lab to complete a request to add your method assignment to the repo.

Git Lab: Pull Requests

Create a pull request for your final method presentation file to be submitted to the final repo.

Lesson Prep

  • Open: Class Website (Week 10) and iTerm
  • Open your website in sublime
  • Create a new directory called ajax-practice and file in that folder called index.html
  • Paste the code below in your index: 
    <!DOCTYPE html>
<html>
<head>
  <title>AJAX Exercise</title>
</head>
<body>
  <h1 id="headline">My Work</h1>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    //your code here
  </script>
</body>
</html>

What is AJAX?

AJAX...

...stands for Asynchronous Javascript And XML

Why do we use it?

The process allows you to exchange data with a server without having the user refresh the page

It sounds fancy, but AJAX is simply a reference to a combination of technologies that allow multiple things to happen at once

Data Types

The way in which your data is formatted. Your data can be any content you want to organize and display. The most common types in modern web development are XML and JSON.

XML

  • Stands for eXtensible Markup Language
  • Data formatted in a way that it can be shared across an array of development tools
  • Like HTML, it is tag-based, and easy to use

Example

  <work>
    <project>
      <title>Out, And Serving</title>
      <type>photo essay</type>
      <url>http://www.nytimes.com/interactive/2014/03/09/opinion/sunday/exposures-military.html</url>
      <pubDate>March 9, 2014</pubDate>
    </project>
  </work>

  • The tagnames are created by you, but make sure they're consistent. If you open with work then you have to close with work
  • Nest your tags like you do HTML tags for better organization
  • XML also takes attributes to provide more information and they are formatted the same way: <person gender="female">

Exercise

  • Open a new file, and write your own XML to hold data about your favorite books. Create at least three listings.
  • Create a directory called xml in your website.
  • Save your file as books.xml in that directory.

JSON

  • Stands for JavaScript Object Notation
  • Like XML, formatted for use across tools and environments
  • Works best with Javascript, which is why it has become a preferred data structure

JSON Example

{
  "title":"Out, And Serving",
  "type":"photo essay",
  "url":"http://www.nytimes.com/interactive/
2014/03/09/opinion/sunday/exposures-military.html",
  "pubDate":"March 9, 2014"
}

  • JSON uses the same syntax as JavaScript.
  • You can use both objects {} and arrays [] in your JSON.
  • Remember commas in between objects and properties.

Exercise

  • Open a new file, and write your own JSON to hold data about your favorite books. Create at least three listings.
  • Save your file as books.js to your js directory.

Grabbing Data

Methods

There are multiple jQuery methods you can use to grab data from a server, including:

  • $.ajax
  • $.get
  • $.getJSON
  • $.load
    •

Example: Grabbing JSON

$.ajax({
   dataType: "json",
   url: url,
   data: data,
});

Convenience Methods

There are multiple shorthand methods that are wrappers around the ajax method. Generally, you want to use ajax because it offers more configuration options.

JSON Convenience Method

$.getJSON("http://dataurl.com/json.js",
function(data){ });

Exercise

  • Use the ajax method to pull in the example JSON and log your data.
  • Make sure to commit your work:
    • git add -p
    • git commit -m 'your commit message'
    • git push origin ajax

Cross-Domain Issues

For security reasons, modern browsers don't allow you to grab data from a server that is located on a different domain.

Exception: APIs

When you are you using an API you generate a security key that you define in your code, that gives you permission to access data.

Exception: JSONP

  • JSON with Padding
  • Wraps your data in a callback so the browser knows how to parse the data.

Assignment

Reading

Read Chapter 9 in Javascript&JQuery

Extra: SitePoint Tutorial

Lesson

Do Codecademy's jQuery & AJAX Lesson, parts 1-7. Make sure to upload a screenshot of the last lesson to Slack.