Introduction to AJAX MIS 3502 Jeremy Shafer Department of MIS Fox School of Business Temple University

URL, referencing a .php page Recall from last time… PHP Interpreter URL, referencing a .php page Browser JavaScript Engine HTTP Response Database 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) 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 All of these activities are accomplished through the properties and methods of objects. Source: http://www.w3schools.com/js/js_htmldom.asp

So, what’s AJAX? 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 PHP Interpreter URL, referencing a .php page Browser JavaScript Engine HTTP Response Database Less of this

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

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

AJAX uses JavaScript to call resources 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()

XMLHttpRequest allows us to do things like this…

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

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

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

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

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

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

It’s time for an experiment!