Introduction to

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 Isnt AJAX?

• Admittedly, this is a strange way to introduce a
  topic. However, there is some confusion about
  what AJAX is and is not. So lets start with what
  it isnt
• 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).
• 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 even 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 1000 requests per minute.
  Many such pages could bog down a web server.
• Much better to distribute this workload to the
  clients

6
Client Side v.s. Server Side Scripting The
Server

• Sometimes the requested information/resource
  simply can not be processed by the client
• A server-side script is a script that is stored
  on and executed by the web server.
• Most popular server-side scripting language today
  is probably PHP
• Others include
• ASP.NET
• ColdFusion
• Ruby
• Python
• Many others
• 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

• Sending an email with information from a form
• Accessing any file that resides on the server
  such as a database, spreadsheet, other HTML
  files, text documents, etc.
• 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.
• AJAX requires server-side scripting as we will
  see.

8
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 you are viewing a companys 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
  companys 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
  333-444-5555
• To load this contact_us.html page, you would have
  to wait for ALL of the sites 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
  companys Contact Us page without having to
  redundantly re-load 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 Googles 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 googles 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
  products 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 users 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 a 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 requests
  only NEW information from the server. The
  original page is simply updated to reflect new
  content. Nothing else in the original page is
  changed.

15
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
Example Amazon Search for Seawing Gorilla Fin
17
How Does it Work? -- Some Key Components

• The XMLHttpRequest Object
• Built into JavaScript is an ugly-sounding
  programming object called the XMLHttpRequest
  object.
• 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, etc.
• 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.

18
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.

19
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.
20
Worlds First Web Server Computer
Note the sticker saying DO NOT POWER DOWN!
21
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!
22
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 Childs recipe for Crème Brulee

23
Web Server Software Communication

• Most web clients speak HTML, CSS, and
  JavaScript
• Because your typical web server does not need to
  display web documents, there is no need to have
  an HTML (or CSS) parsing engine built in.
• 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, ASP.NET, and others.

24
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.

25
A typical server setup The Pieces

• Web Server
• A web server technically speaking, refers only to
  the server software.
• Examples Apache, Microsofts IIS, and Googles
  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 browsers ability
  to speak JavaScript is built into the browser
  software. Most web servers 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, ASP.NET, ColdFusion, etc.

(May, 2010)
26
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'

27
Running AJAX

• AJAX does require access to a web server that is
  running application server software such as PHP.
• The studentweb web server at CDM runs PHP and a
  couple of other application server software
  applications.
• In order to work with your AJAX programs, you
  will have to upload your documents to the server
  (so that the PHP server can execute your code)
  every time you make a change.
• You will quickly find that this is a tedious
  step!
• Easier Option You can install AMP 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.

28
If You Want to Install AMP

• While it can be a little bit time-consuming to
  set up and configure AMP, if you are interested
  in really getting in there and working with AJAX
  and/or learning PHP, then installing AMP is
  probably a great idea.
• Good News There are some installers out there
  that install all three components with only one
  executable.
• One of the current favorites is WampServer
• Windows WAMP at http//www.wampserver.com/en/
• Video installation guide http//uptospeedguides.c
  om/wamp/
• Mac MAMP at http//www.mamp.info/en
• Video installation guide http//uptospeedguides.c
  om/mamp/