1. Introduction to

2. Learning Objectives By the end of this lecture, you should be able to:
Describe the difference between client-side and server-side scripting
Name some commonly encountered web-based tasks that can only be achieved using server-side scripting
Describe the benefits of using AJAX
Contrast the AJAX request-response model with the traditional request-response model
Describe the 3 types of server applications needed to run most commercial or large-scale web sites

3. What Isn’t AJAX?
Admittedly, this is a strange way to introduce a topic. However, there is some confusion about what AJAX is and is not. So let’s start with what it isn’t:
AJAX tands for ‘Asynchronous JavaScript And XML’ – yet this acronym is not altogether appropriate. For example the ‘XML’ part of AJAX is really no longer used very much at all.
AJAX is not a programming or scripting language! It certainly involves and requires scripting, but scripting is only one part of AJAX.
AJAX is not a new ‘gee-whiz’ technology. In fact, it is really a collection of relatively “older”, but well-established and stable technologies.

4. Introduction: Okay, so what is AJAX?
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, must often reload the entire page if a new piece of information is being requested from the server.
Pretty important nowadays . In fact, AJAX is used on many, many sites that you probably use on a daily basis.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook.

5. Client Side v.s. Server Side Scripting – The Client
All of the scripting we have done to date is “client-side” scripting.
Client-side script = script that is executed by the client (e.g. your web browser).
Just to avoid confusion: The page that contains the script is still hosted on a web server. But when that page gets sent to the client computer, it is the client (i.e. the browser) that will execute any scripts on that page.
Most popular client-side scripting language is JavaScript (and the jQuery dialect).
Main advantage to client-side scripting is that it is faster, and distributes the workload.
Example: Imagine a very simple script that does a conversion from pounds to kilograms. On a single client, this is extremely rapid. But imagine if this same script was executed on a server that receives 1000s of requests per minute. The large number of scripts could easily bog down a web server.
Much better to distribute this workload to the clients

6. Client Side v.s. Server Side Scripting – The Server
In some situations, the functionality of the script can not be processed by the client.
E.g. Accessing a database that resides on the server.
A server-side script is a script that is stored on and will be executed by the web server.
Whereas the most popular client-side scripting language is JavaScript, the most popular server-side scripting languages are more varied:
Ruby
PHP
Node.js
Python
Swift
ASP.NET
Many others
Different languages often specialize in different kinds of functionality and/or platforms.
Example – Amazon.com:
Request information about a product
Requires a database lookup
Convert the user's text field input into a database query (client or server side script)
Query the database (must be server side)

7. Scenarios that typically require server-side scripts
One of the most common reasons for using server-side scripting is when you want to give the user the ability to access some specific pieces of information on a resource located on the server (e.g. querying a database) but without giving them the ability to see the entire file/resource.
Accessing any file that resides on the server such as a database, spreadsheet, other HTML files, text documents, etc.
Sending an with information from a form
AJAX requires server-side scripting as we will see.

8. Characteristics of AJAX include:
AJAX and jQuery
Characteristics of AJAX include:
Somewhat involved in terms of code length and complexity
Several steps involved -- even in basic programs
Prone to cross-browser compatibility issues
AJAX is scripted using JavaScript. (In fact, JavaScript is the ‘J’ in AJAX), though the JS code is at times a bit unwieldy.
jQuery greatly simplifies the length, and steps.
jQuery also handles the large majority (though not all) of browser compatibility issues. In fact, one of the reasons that jQuery became so popular was its ability to greatly simplify the use of AJAX.
Other JS/AJAX libraries available besides jQuery:
DOJO
MochiKit (specializes in manipulating JSON data)
YUI (Yahoo Interface Library)

9. What does AJAX do for us? Waiting for pages to load takes time…
Imagine viewing a company’s home page that contains numerous images, menus, buttons, icons, etc.
The designer of the website intends for all of these items to be visible on every page for that company’s website.
You wish to view their ‘Contact Us’ page. You click on the link to that page which has the following information: Rabbits ‘R Us Inc, 222 S. Carrot Drive, Beatrix Potter, PA, Tel:
To load this contact_us.html page, you would have to wait for ALL of the site’s menus, buttons, icons, images, and so on to reload – even though much of this information is redundant
It would be far faster and more efficient to have only requested the key information from the company’s ‘Contact Us’ page without having to redundantly reload all of those web page components (images, links, etc) that are still sitting right there in your browser window.
What if your company receives thousands of page requests a minute (or even per second)?
Makes for happier customers / visitors when requests for information from your web page is visible nearly instantaneously, i.e. without having to wait for the page to reload redundant content.

10. AJAX In Action
If you visit Google’s home page and begin typing a query, you will notice that as you type, the text field attempts to predict what you are searching for. Yet no other information on the page is realoded.
Though you are communicating with google’s server with every character you type, much of the underlying page does not change – because it is not being reloaded.
Google Maps: Allows you to zoom in/out, move in any direction and so on, without reloading any non-map areas of the page.
Apple Store: Begin pricing out a new Mac, and you will see that the outer menus and so on do not change. Only the information that needs to change is requested from the server.
Amazon: On most product pages, you will also see a section that says something along the lines of ‘Customers Who Bought this Item Also Bought:’. Scrolling shows a series of additional items appears on the page – yet your original product page does not change.

11. Examples of things that are well-suited to AJAX
Browse database information: Many shopping sites will allow you to find additional/related information about a product – without leaving the product’s page.
E.g. clicking on ‘Reviews’ on Amazon.com
Refresh new content at regular intervals: E.g. Visit the National Hockey League and you will see scores regularly update without the entire page refreshing.
Confirmation messages: Confirm that a form was successfully submitted – without leaving the page.
Voting/Rating: User clicks on stars or a poll-choice – the user’s selection can be submitted to a database on the server without leaving the page.

12. That is what AJAX Does!
Makes pages feel snappier and more responsive.
Enables the user to retrieve new or additional content from your website without waiting to reload the entire page.
Makes for a happier customer, as well as for a happier web server (and happier IT staff, CEO, CFO, etc).

13. How Does it Work? Traditional Model
Shown here is the traditional HTTP request model:
Web page makes a request to the server for some information (e.g. a separate ‘Contact Us’ web page).
Server sends back the desired web page.
Requesting other information (e.g. ‘Our Hours’ page) requires an entire new page to be downloaded from the server.

14. The AJAX Model Here is the AJAX way of doing things:
Web page requests some information (e.g. a ‘Contact Us’ web page) from the server.
Server sends back ONLY the required information
Typically loaded into a specific section (e.g. a ‘div’ section) of the ORIGINAL web page.
Requesting some other information (e.g. ‘Our Hours’ page) will again load ONLY the relevant information.
To Summarize: With AJAX, the client receives requests only a specific piece of information from the server that needs to be updated on the original web page. That original page is simply updated in a specific section to reflect the updated or new content. Nothing else in the original page is changed.

15. User clicks on a button in the ‘News Headlines’ section
Example
User clicks on a button in the ‘News Headlines’ section
Request is sent to the web server for that particular item.
Info returned from the server is loaded into the ‘headlines’ div section of the current document.
Remainder of the document (the header with title and logo at the top, the news headlines box, the footer section at the bottom, etc) is never modified or reloaded.

16. How Does it Work? -- Some Key Components
The XMLHttpRequest Object:
Built into JavaScript is an ugly-sounding programming object called the XMLHttpRequest object (often referred to as the 'XHR').
The XHR is a programming “tool” that allows JS to communicate with a web server and send information back and forth.
We will return to this later.
Other JavaScript:
Open a line of communication with the web server
Request information
Process the information that comes back
Insert new information into the appropriate location of our web page
Web Server:
Receives requests from the client
Processes the requests
Responds appropriately
Example: Client requests information from a database (e.g. ‘Spaulding Basketball’). The server will search the database and will return all matching records to the client.

17. Review: The Web Server
Think of a web server as a glorified filing cabinet hosting lots of resources (HTML pages, drivers, databases, etc, etc), ready to “serve” them up upon request.
Hardware or software?
Probably best thought of as software.
Recall that a web client (i.e. a browser) is simply software that can request pages from a server, parse pages that come back form a server, run JavaScript, display HTML and so on.
A web server is also software, but it is entirely different from web-client software.
Server software specializes in interpreting HTTP request objects that originate from a client, retrieving the requested resource, and sending that resource back to the client.
However, since web server software frequently runs on a dedicated computer whose only job in life is to run the web-server software, we frequently refer to the computer itself as “the web server”. Technically, though, the web server is actually a piece of software.

18. Web Server - Hardware Single PC for a low-traffic site.
Numerous servers at a web-hosting service.
HARDWARE: Four Sun Fire X4200 web servers mounted together to serve a higher-traffic site.

19. World’s First Web Server Computer
Note the sticker saying DO NOT POWER DOWN!

20. Web Server Software
As you can see, web server software is an entirely different animal than web client software.
This is because even though they are both examples of “software”, they have entirely different jobs to do!

21. Not every request from a server is for an HTML document.
“Resources”
Not every request from a server is for an HTML document.
Web servers can hold any digital item and ‘serve’ these items to clients upon request.
Examples:
an updated driver for your new printer
the latest episode of Big Bang Theory from the iTunes store
a database request to search for a book on amazon.com
a Youtube video
a request from weather.com for the latest forecast in your area
a static 15-year-old ‘HTML’ document that someone wrote giving Julia Child’s recipe for Crème Brulee

22. Web Server Software: Communication
Recall that most web clients have the ability to interpret (‘speak’) HTML, CSS, and JavaScript
However, web server software does not display web documents. It's job is mainy to process incoming requests for resources, and to send those resources to the client.
Therefore, servers do not need to have an HTML or CSS parsing engine built in. However, a server does need to be able to speak certain scripting languages. In that case, they must have the appropriate software installed that enables them to ‘speak’ the desired languages.
Which scripting languages does a server need to ‘speak’?
The web server typically has specialized requirements such as the ability to
query a database
serve up a files
check log-in credentials
etc
Therefore, we typically use languages that specialize in these kinds of features
Common languages for server-side scripts include PHP, Ruby, Node.js, Python, and others.

23. What about databases?
We have repeatedly referred to databases in this lecture.
Databases are the backbone behind much of the information on the web. For example, every time you search for something on Amazon or any other shopping portal, you are asking the server to query a database (via a server-side script) .
Even resources such as a driver for your new printer, are typically stored and located by the server using a database somewhere.
Similarly, information relating to that driver (e.g. installation instructions) is probably linked to the driver using a database.
Therefore, the computer that is running the web server software, will nearly always be running (or at least have access to) a database application as well.

24. Review of a typical server setup
Web Server:
A web server technically speaking, refers only to the server software.
Examples: Apache, Microsoft’s IIS, and Google’s GWS
Sometimes refers to the computer on which the web server software is running. (e.g. “We need to reboot the server”).
Database Server:
Nearly every commercial web site often includes a database application.
Common database server applications include MySQL and Microsoft SQL Server.
Application Server:
The computer hosting the web server must also be running some software that can understand the any scripting languages that are intended for use.
If you think about it, your web browser’s ability to “speak” JavaScript is built into the browser software. Most web server’s do not come pre-packaged with the ability to speak all of the many different server-side scripting languages that are commonly spoken.
Administrators must install an ‘application server’ that can “speak” the desired language
Examples: PHP, Ruby, etc.
(May, 2010)

25. Combinations Example – Commercial Setup:
Web Server: Microsoft IIS
Database Server: SQL Server
Application server: Microsoft's ASP.NET
Example – Freeware/Open Source Setup
Web Server: Apache web server
Database Server: My SQL
Application server: PHP
This is a particularly popular combination and is called 'AMP'

26. Running AJAX
In order to run AJAX, your web server must be running some application server software (e.g. PHP, Ruby, etc).
The ‘studentweb’ web server at CDM runs PHP and a couple of other application server software applications.
Because your server-side scripts execute on the server, in order to work with your AJAX programs, you will have to upload your script to the server every single time you make a change to your code.
As you are writing and debugging your code, you will quickly find this to be very tedious!
Easier Option: You can install a web server setup on your own computer as a "development server"
When everything is ready to go, you can upload to the web server.
For this course, we will only be dipping our toe into running AJAX, so you probably do NOT need to bother setting up a development server such as AMP.

27. Installing a web server setup on your computer
While it can be a little bit time-consuming to set up and configure a setup, if you are interested in really getting in there and working with AJAX or any server-side scripting, then setting this up is probably a great idea.
Good News: There are some installers out there that install all three components of 'AMP' (Apache, MySQL, PHP) with only one executable.
Windows: ‘WAMP’ at
Video installation guide:
Mac: ‘MAMP’ at
Video installation guide:
There is a Linux version as well 'LAMP'