Presentation is loading. Please wait.

Presentation is loading. Please wait.

WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011.

Similar presentations


Presentation on theme: "WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011."— Presentation transcript:

1 WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011

2 WHAT IS AJAX? A- Asynchronous J- Javascript A- and X- XML

3 WHAT IS AJAX? A- Asynchronous (Sometimes) J- Javascript (Sometimes) A- and X- XML (Sometimes)

4 WHAT IS AJAX? AJAX is whenever two web languages work together to change a website’s content on the fly. Usually this is done asynchronously to improve the UX. In classic AJAX, Javascript acts as a client-side language to initiate a change and XML acts as the server-side language to encode the server’s response into an easily parsed format. However, you could use almost any language on either end here.

5 HOW AJAX WORKS Client Page’s Javascript Server URL HTTP Request Representational Response 5 6 7 8 Client Browser Server URL HTTP Request Website Page Data 1 2 3 4

6 DIFFERENT AJAX VARIATIONS CLIENT-SIDE LANGUAGESERVER-SIDE REPRESENTATION Java Javascript (most common) Flash Native Code XML JSON(P) (now most common) HTML Text

7 WHY USE AJAX? The AJAX paradigm has some key advantages: Allows a UI to appear before all the content is loaded Allows changes to a page without reloading the page Allows the page to change information on the server silently AJAX also has some disadvantages: Accessibility issues Possible security holes

8 AJAX ADVANTAGES – UI PRELOADING Some websites use AJAX as a way of post-loading data. Google Calendar, for example, loads its rendering code at first (100kb). That code then makes a call for the user’s calendar data, which is delivered as several large JSON(P) data files (~135kb per calendar!). Doesn’t increase speed to completion, but does increase the system’s perceived speed.

9 AJAX ADVANTAGES – SEAMLESS EDITS A key advantage of AJAX is its ability to change elements of the client’s view without reloading a new page. This makes the experience quicker and more seamless. Google Maps uses AJAX to load new map tiles without reloading Gmail does this to handle almost every single state change in the app. It leads to really HUGE speed boosts. This is because less data must be sent and received with each action.

10 AJAX ADVANTAGES – SEAMLESS EDITS As you can see, the load times on operations is dramatically cut with AJAX This test was done in Gmail. Here the HTML mode is even optimized more than the AJAX mode, but still so much slower.

11 AJAX ADVANTAGES – SILENT EDITS A final key ability of AJAX is the ability to make calls in the background without interrupting the user experience at all. Google Docs uses this capability for its save-on-the-fly feature. As you type in Google Docs, every few characters are sent up to the server using AJAX and saved as an edit to your document. This is the client making a silent call to the server to change the state of the server in the background. This is what enables features like live collaboration on Docs.

12 AJAX DISADVANTAGES - SECURITY AJAX’s big issue is security. Since traffic passes over HTTP using normal URL calls, it can be intercepted. XML or JSON(P) coming down from a server can be read as it passes over public network points. Even worse, the AJAX paradigm opens up a way for hackers to perform malicious actions on a page.

13 AJAX DISADVANTAGES - SECURITY Since pages are being set up to use AJAX to change the client’s and server’s data, then an attacker can run a snippet of Javascript on your browser that executes those same AJAX methods to perform some nefarious action. This is the basis of a few recent Twitter and Facebook viruses, which were based on having user’s execute a malicious “bookmarklet.” The Javascript snippet therein would then use the host site’s AJAX code to send background requests to the server initializing unauthorized actions.

14 WHAT IS AJAX? It is the internet experience now. You have, certainly, used a website based on AJAX. You have probably written one. It is the modern paradigm for creating a website that can dynamically load and save content from and to a server. It is what enables the advanced behavior of every modern web application.


Download ppt "WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011."

Similar presentations


Ads by Google