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

2. 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”

3. 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:

4. 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…

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

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

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

8. 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()

9. XMLHttpRequest allows us to do things like this…

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

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

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

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

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

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

16. It’s time for an experiment!