Chapter 11 ASP.NET JavaScript, Third Edition. 2 Objectives Learn about client/server architecture...

48
Chapter 11 ASP.NET JavaScript, Third Edition

Transcript of Chapter 11 ASP.NET JavaScript, Third Edition. 2 Objectives Learn about client/server architecture...

Chapter 11

ASP.NET

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives

• Learn about client/server architecture

• Study server-side scripting

• Create ASP.NET applications

• Learn about object collections

• Study ASP.NET’s core objects

• Create a guest book

JavaScript, Third Edition 3

Introduction

• The Web browser is a client in the client/server environment of the Web

• To develop a full complement of Web development skills you need to:

– Understand the server side of the Web

– Understand the fundamentals of client/server architecture

JavaScript, Third Edition 4

Client/Server Architecture• In traditional client/server architecture, the server:

– Is some sort of database from which a client requests information

– Fulfills a request for information by serving the requested information to the client—hence the term, client/server

• System consisting of a client and a server is known as a two-tier system

JavaScript, Third Edition 5

Client/Server Architecture (Cont.)

• One of the primary roles of the client, or front end, in a two-tier system is:– The presentation of an interface to the user

• User interface:– Gathers information from user– Submits it to a server, or back end– Receives, formats, and presents results returned from

the server• Main responsibility of a server is usually:

– Data storage and management

JavaScript, Third Edition 6

Client/Server Architecture (Cont.)

• The Web is built on a two-tier client/server system, in which:

– A Web browser (the client) requests documents from a Web server

– The Web browser (as the client user interface) is responsible for formatting and presenting the document to the user

JavaScript, Third Edition 7

Client/Server Architecture (Cont.)

JavaScript, Third Edition 8

Client/Server Architecture (Cont.)

• A three-tier, or multitier, client/server system consists of three distinct pieces:

– Client tier

– Processing tier

– Data storage tier

JavaScript, Third Edition 9

Client/Server Architecture (Cont.)

JavaScript, Third Edition 10

Client/Server Architecture (Cont.)

• The client tier, or user interface tier, is still the Web browser

• However, the database portion of the two-tier client/server system is split into:

– A processing tier

– The data storage tier

JavaScript, Third Edition 11

Client/Server Architecture (Cont.)• The processing tier, or middle tier, is sometimes

called the processing bridge

– Handles the interaction between the Web browser client and the data storage tier

– Performs any necessary processing or calculations based on the request from the client tier

– Handles the return of any information to the client tier

• Client-side JavaScript exists at the client tier, while serverside JavaScript exists at the processing tier

JavaScript, Third Edition 12

Client/Server Architecture (Cont.)

• Important to perform as much processing as possible on the client for several reasons:

– Distributing processing among multiple clients creates applications that are more powerful

– Local processing on client computers minimizes transfer times across the Internet and creates faster applications

– Performing processing on client computers lightens the processing load on the server

JavaScript, Third Edition 13

Server-Side Scripting

• Some of the more popular server-side scripting languages used to process form data include:

– Common Gateway Interface (CGI)

– Java Server Pages (JSP)

– Active Server Pages (ASP)

• Server-side scripting languages:

– Exist on the processing tier

– Have the ability to handle communication between the client tier and the data storage tier

JavaScript, Third Edition 14

Server-Side Scripting (Cont.)

• At the processing tier:

– A scripting language usually prepares and processes the data in some way before submitting it to the data storage tier

• Server-side JavaScript can interact closely with client-side JavaScript

– They share the same basic programming features

JavaScript, Third Edition 15

Creating ASP.NET Applications

• ASP.NET scripts:

– Created as text files, same as XHTML documents

– Can contain both client-side JavaScript code and server-side JavaScript code

• Documents for ASP.NET applications have the .aspx file extension

• ASP applications files have an .asp extension

JavaScript, Third Edition 16

Creating ASP.NET Applications (Cont)

• When a client requests an ASP.NET document:

– The Web server executes any server-side scripting code before serving the document to the client

– Once the client Web browser receives the document, it executes the client-side JavaScript

• The first time a client requests an ASP.NET document from a server, the server compiles the document

JavaScript, Third Edition 17

Creating ASP.NET Applications (Cont)

• Compiling:

– Processing and assembly of programming code into executable format

• You do not need to compile a server-side script yourself:

– ASP.NET automatically recognizes any changes to an ASP.NET application

– Recompiles the application the next time a client requests it

JavaScript, Third Edition 18

Code Declaration Blocks

• Code declaration blocks:

– You define ASP.NET global variables and functions within it

– You create it with <script> elements, the same as client-side JavaScript

– You use three attributes in it: • runat=”server”

• Language

• src

JavaScript, Third Edition 19

Code Declaration Blocks (Cont)

• The runat=”server” attribute is required in order to identify the script section as an ASP.NET script

• The language attribute identifies the scripting language used within the code declaration block

• You can use three scripting languages with ASP.NET:

– VB (Visual Basic)

– JScript (JavaScript)

– C#

JavaScript, Third Edition 20

Code Declaration Blocks (Cont)

• The src attribute:

– Same attribute used in client-side JavaScript to identify a source document containing scripting code

• Difference between using the <script> element for ASP.NET instead of client-side JavaScript:

– All code, with the exception of global variables, must be contained within a function

JavaScript, Third Edition 21

Code Render Blocks

• ASP.NET also uses the script delimiters <% and %> to designate server-side JavaScript code

• A delimiter:

– Character or a sequence of characters used to mark the beginning and end of a code segment

• You include within the script delimiters any commands that are valid for the scripting language you are using

JavaScript, Third Edition 22

Code Render Blocks (Cont.)

• To declare the language attribute in a code render block:

– You must use an ASP processing directive

• ASP processing directive:

– Provides a Web server with information on how to process the scripts in an ASP document

– Created using the <%@ ...%> delimiters

JavaScript, Third Edition 23

Code Render Blocks (Cont.)• You can only declare one processing directive on a

page

– Usually declared at the top of a document or above the first code render block

• The output directive:

– Sends the result of an expression to a user’s Web browser (the client)

– Its syntax is <%= expression %>

JavaScript, Third Edition 24

Mixing XHTML and ASP.NET

• ASP.NET code within code declaration blocks and code render blocks:

– Execute on a Web server before the page is sent to a user

• If users were to view the source document after they received the ASP document:

– They would not see any <script> elements, <%...%> script delimiters, or ASP.NET code

– Client shows only the results returned by the code

JavaScript, Third Edition 25

Object Collections

• Collections:

– Data structures similar to arrays that store variables in ASP.NET core objects

• The syntax for assigning a variable to a collection is

– Object.collection(“variable”) = value;

• You refer to the variable in ASP.NET code by using the syntax object.collection(“variable”);

JavaScript, Third Edition 26

Object Collections (Cont)

• If a variable name you assign to a collection is unique throughout all collections of an object:

– Then you can eliminate the collection name when referencing the object in code

• It is safer to include the collection name:

– In order to eliminate any uncertainty as to what collection contains a specific variable

JavaScript, Third Edition 27

Object Collections (Cont)

• Each variable in a collection is numbered

– Similar to the way element numbers are assigned to arrays

• You can refer to collection variables by using numbers instead of variable names

• The number assigned to a variable in a collection can change if you remove items from the collection

JavaScript, Third Edition 28

Object Collections (Cont)

• A number does not always represent the same variable in a collection

• You can remove items from a collection using the Remove() and RemoveAll() methods of the Contents collection

JavaScript, Third Edition 29

Object Collections (Cont)

• Both the Application object and Session object contain Contents collections

• ASP.NET collections support a count property:

– Returns the number of variables in a collection

JavaScript, Third Edition 30

ASP.NET Core Objects

• ASP.NET does not recognize a Web browser’s Document and Window objects, as clientside JavaScript does

• ASP.NET recognizes five built-in objects:

– Request

– Response

– Session

– Application

– Server objects

JavaScript, Third Edition 31

ASP.NET Core Objects (Cont)

• The Request, Response, Session, Application, and Server objects are built into ASP.NET

• Each have different lifetimes and availability

• You use each of the objects to

– Access specific types of information in the processing tier

– For storing state information on the server

JavaScript, Third Edition 32

Request Object

• The Request object:

– Represents current URL request from a client

– ASP.NET creates:

• New Request object each time a client requests a URL

• Request object when client-side JavaScript uses the document.location or history.go() methods

JavaScript, Third Edition 33

Request Object (Cont)

– The Request object has the shortest lifetime of all ASP.NET built-in objects

– Exists only until the current request is fulfilled

– Contains several collections that contain information about the client request

JavaScript, Third Edition 34

Request Object (Cont)

JavaScript, Third Edition 35

Response Object

• The Response object:

– Sends output and information back to the client

– Includes several methods, as well as properties, useful in constructing a response to return to the client

– Contains Cookies collection used for setting cookies on client system

• Only collection contained in the Response object

JavaScript, Third Edition 36

Session Object

• Because the Request object is destroyed once the URL is delivered to the client:

– The same Request object cannot be used with different pages in an application

• To preserve client information across multiple pages in an ASP.NET application:

– The Session object must be used

JavaScript, Third Edition 37

Session Object (Cont)

• The Session object:

– Temporarily stores specific client information

• Makes that information available to all the pages in an ASP.NET application

– Instantiated the first time a client accesses a URL in a given application

– Use the Contents collection of the Session object to store information about the user in an application

JavaScript, Third Edition 38

Session Object (Cont)

JavaScript, Third Edition 39

Application Object

• An Application object:

– Used for storing global application information that can be shared by all clients accessing the application

– Each application has its own Application object

– ASP.NET application automatically starts the first time a client requests one of the application pages

– ASP.NET applications run until the server is shut down

JavaScript, Third Edition 40

Server Object

• The Server object:

– Provides an ASP.NET application with access to properties and methods accessible by all applications on the server

– Does not contain any collections

– Custom variables can be added to it

– Used mainly for managing the way an ASP.NET application behaves on the server

– Includes a single property, ScriptTimeout

JavaScript, Third Edition 41

Server Object (Cont)

• The ScriptTimeout property determines how long an ASP.NET application can run before the server stops it

• By default, a server allows an ASP.NET application to run for 90 seconds

• To increase an application running time:

– Use the syntax Server.ScriptTimeout = seconds

JavaScript, Third Edition 42

Server Object (Cont)

JavaScript, Third Edition 43

Chapter Summary

• Two-tier system:

– Consists of a client and server

• Three-tier, or multitier, client/server system:

– Consists of three distinct pieces: the client tier, the processing tier, and the data storage tier

• Web application:

– Program that executes on a server but that clients access through a Web page loaded in a browser

JavaScript, Third Edition 44

Chapter Summary (cont.)

• ASP.NET:

– Server-side scripting language created by Microsoft

• Compiling:

– The processing and assembly of programming code into an executable format

• ASP.NET application:

– Collection of related ASP.NET documents that exist in the same root directory

JavaScript, Third Edition 45

Chapter Summary (cont.)

• Code declaration blocks:

– You define ASP.NET global variables and functions within it

– You create with <script> elements, the same as client-side JavaScript

• Delimiter:

– Character or a sequence of characters used to mark the beginning and end of a code segment

JavaScript, Third Edition 46

Chapter Summary (cont.)

• A code render block:

– Executes ASP.NET code within a Web page document

• ASP.NET processing directive:

– Provides a Web server with information on how to process the scripts in an ASP.NET document

• The output directive:

– Sends the result of an expression to a user’s Web browser (the client)

JavaScript, Third Edition 47

Chapter Summary (cont.)

• Collections:

– Data structures similar to arrays that store variables in ASP.NET core objects

• Request object:

– Represents current URL request from a client

• Response object:

– Sends output and information back to the client

JavaScript, Third Edition 48

Chapter Summary (cont.)

• Session object:– Temporarily stores specific client information and

makes that information available to all the pages in an ASP.NET application

• Application object:– Used for storing global application information that

can be shared by all clients accessing the application• Server object:

– Provides an ASP.NET application with access to properties and methods accessible by all applications on the server