Presentation on theme: "Introduction to. Learning Objectives By the end of this lecture, you should be able to: – Describe the difference between client-side and server-side."— Presentation transcript:
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
Introduction: Okay, so what is 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. A method of grouping certain widely-used technologies together to accomplish a particular task. Gives the ability to make a request and receive information or other resource from a server, and to work with that information without ever leaving the current web page. Pretty important nowadays – in fact, present on many, many sites that you probably use on a daily basis.
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)
Scenarios that typically require server-side scripts Sending an 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.
What does AJAX do for us? Waiting for pages to load takes time… Imagine you are 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 had to wait for ALL of the site’s menus, buttons, icons, images, and so on to reaload – 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? What if your company receives thousands of page requests a minute (or even per second)? Happier customers and visitors if requests for information from your web page is visible nearly instantaneously, i.e. without having to wait for the page to RE-load redundant content.
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.
Some simple things 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.
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).
How Does it Work? Traditional Model Shown here is the traditional HTTP request model: 1.Web page makes a request to the server for some information (e.g. a separate ‘Contact Us’ web page). 2.Server sends back the desired web page. 3.Requesting other information (e.g. ‘Our Hours’ page) requires a new page to be downloaded from the server.
The AJAX Model Here is the AJAX way of doing things: 1.Web page requests some information (e.g. a ‘Contact Us’ web page) from the server. 2.Server sends back ONLY the required information – Typically loaded into a specific section (e.g. a ‘div’ section) of the ORIGINAL web page. 3.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.
Example 1.User clicks on a button in the ‘News Headlines’ section 2.Request is sent to the web server for that particular item. 3.Info feturned 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.
Amazon Search for ‘Seawing Gorilla Fin’
Web Server - Hardware HARDWARE: Four Sun Fire X4200 web servers mounted together to serve a higher- traffic site. Single PC for a low-traffic site. Numerous servers at a web-hosting service.
World’s First Web Server Computer Note the sticker that says: “DO NOT POWER DOWN!”
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!
“Resources” Not evey request from a server is for an HTML document. Web servers can hold any digital item and ‘serve’ 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 request from weather.com for the latest forecast in your area – a plain old ‘HTML’ document that someone wrote giving Julia Child’s recipe for Crème Brulee
What about databases? We have repeatedly referred to databases in this lecture. Ddatabases are the backbone behind much of what the web. E.g. Every time you search for something on Amazon or any other shopping portal, you are asking the server (through your server-side script) to query a database. Even resources such as a driver for your new printer, are 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.
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
Running AJAX AJAX does require access to a web server that is running an application server. The ‘studentweb’ web server at CDM runs PHP and a couple of other application server software apps. In order to work with your AJAX programs, you will have to upload your documents every time you make a change! (You will quickly find that this is a tedious step.) 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 AMP.
Installing AMP It can be somewhat time-consuming to set up and configure AMP. If you are interested in really getting in there and learning PHP, then installing AMP is probably a great idea. 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 – Video installation guide: Mac: ‘MAMP’ at – Video installation guide: