Introduction to AJAX MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/4/2016

Course Overview New tools Weeks Using a web framework Weeks 6 -8 Using a mobile device IDE Weeks 9-10 The class project (It’s a bake off!) Weeks We are (still) here Slide 2 Arrays PDO MVC JavaScript / JSON

Recall from last time… URL, referencing a.php page HTTP Response Database PHP Interpreter Browser JavaScript Engine Slide 3 As a general rule, JavaScript lives here, in the browser, and does not interact with any resource outside the browser. This is called a “round trip”

The DOM (Document Object Model) Slide 4 JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page Source: All of these activities are accomplished through the properties and methods of objects.

So, what’s AJAX? 5 AJAX is short for Asynchronous JavaScript and XML It is the combination of these technologies, not a separate technology in itself It’s kind of sneaky…

AJAX uses JavaScript to call web services 6 URL, referencing a.php page HTTP Response Database PHP Interpreter Browser JavaScript Engine Less of this

AJAX uses JavaScript to call resources 7 Database PHP Interpreter Browser JavaScript Engine HTTP Requests More of this

AJAX uses JavaScript to call resources 8 Browser JavaScript Engine Let’s take a closer look at JavaScript and the DOM

AJAX uses JavaScript to call resources 9 XMLHttpRequest() The term "AJAX" was publicly stated on 18 February 2005 by Jesse James Garrett in an article titled "AJAX: A New Approach to Web Applications", based on techniques used on Google pages. This object acts like a browser, inside the browser.

XMLHttpRequest allows us to do things like this… Slide 10

XMLHttpRequest allows us to do things like this… Slide 11 Look at the parameter. Is there something to do?

XMLHttpRequest allows us to do things like this… Slide 12 Ah! There *is* something to do

XMLHttpRequest allows us to do things like this… Slide 13 “listen” for the readystate property to change. When it does, execute this function.

XMLHttpRequest allows us to do things like this… Slide 14 This is an “anonymous function”, a function defined inside of a function. (Pretty crazy, huh?)

XMLHttpRequest allows us to do things like this… Slide 15 Get ready to open a page. Use the GET method. Specify the page. Asynchronous = true.

XMLHttpRequest allows us to do things like this… Slide 16 Go get the page.

Slide 17 It’s time for an experiment!