AJAX James Kahng

Congrats Jack Guo for Angular entryentry This week’s coding challenge at end of talk

Traditional websites Browser requests website Server renders website completely and sends to browser Conversation ends! Page does not change anymore

AJAX Stands for Asynchronous Javascript and XML Asynchronous: After the page has loaded XML: XML has fallen out of favor and people mostly use JSON now In a nutshell: Page changes without page refresh!

JSON Stands for Javascript Object Notation Data is stored in POJOs Plain Old Javascript Objects If you know Javascript, you know JSON

JSON Quick refresher (demo on Chrome) var example = {}; Javascript objects can have properties you can create and set example.isFirst = true; If(example.isFirst) { //code }; Properties can be of any type including arrays example.dataArray = [‘iwdsa’, ‘james’]; These properties can be nested however much you want.

So much potential! Real-time updates Google Maps (especially on phone) Gmail Google Docs Faster, dynamically rendered websites Facebook Reddit Enhancement Suite

Demo We are going to build a Twitch search for your favorite channels We will use JQuery and Handlebars! Twitch API

AJAX in JQuery $.ajax({ url: url, method: type of request, success: function called after the request is complete });

Potential problems AJAX in browser only allows requests to your current domain If you are on google.com, you can only request to EXACT same domain Work around this by either: Using jsonp datatype client-side (not json) Use URLs that have Access-Control-Allow-Origin header set to * on server side

Why Handlebars? Template processor You set up HTML template and then fill it with your data JQuery is really annoying to use for DOM manipulation DOM manipulation means dynamically changing your HTML Handlebars makes this really simple and pretty NOTE: Angular does this PLUS tons of other functionalities. If you want just the quick HTML changes, Handlebars is good enough

Coding challenge Build a website that has some kind of AJAX functionality APIs are really good for this Send a link of your site to Winner gets congratulations in weekly and… FERRERO ROCHER :O Good luck