BIT 285: (Web) Application Programming

Lecture 17: Tuesday, March 3, 2015

ASP.NET AJAX, Introduction to Web API & REST API

Instructor: Craig Duckett

2

Assignment 3: REST Framework is due on Tuesday, March 17th

THE 'INTENTION' OF ASSIGNMENT 3—"FEATURE CREEP" (A REAL-WORLD SCENARIO)

I HAVE REWRITTEN THE ASSIGNMENT 3 DIRECTIONS. LET'S HAVE A LOOK... Final Exam is on Tuesday, March 17th

3

What's Up with HTTP?

http://www.w3.org/Protocols/rfc2616/rfc2616

4

What's Up With HTTP?HTTP stands for Hypertext Transfer Protocol. It's a stateless, application-layer protocol for communicating between distributed systems, and is the foundation of the modern web. As a web developer, we all must have a strong understanding of this protocol and how it works, especially since several methodologies have been developed to take advantage of it in new and different ways.

5

HTTP BasicsHTTP allows for communication between a variety of hosts and clients, and supports a mixture of network configurations.

To make this possible, it assumes very little about a particular system, and does not keep state between different message exchanges.

This makes HTTP a stateless protocol. The communication usually takes place over TCP/IP, but any reliable transport can be used. The default port for TCP/IP is 80, but other ports can also be used.

Custom headers can also be created and sent by the client.

6

HTTP BasicsCommunication between a host and a client occurs, via a request/response pair. The client initiates an HTTP request message, which is serviced through a HTTP response message in return. We'll look at this fundamental message-pair a bit later.

The current version of the protocol is HTTP/1.1, which adds a few extra features to the previous 1.0 version. The most important of these, in my opinion, includes persistent connections, chunked transfer-coding and fine-grained caching headers. We'll look at these briefly a bit later.

7

URLsAt the heart of web communications is the request message, which are sent via Uniform Resource Locators (URLs). I'm sure you are already familiar with URLs, but for completeness sake, I'll include it here. URLs have a simple structure that consists of the following components:

The protocol is typically HTTP, but it can also be HTTPS for secure communications. The default port is 80, but one can be set explicitly, as illustrated in the above image. The resource path is the local path to the resource on the server.

8

HTTP VerbsURLs reveal the identity of the particular host with which we want to communicate, but the action that should be performed on the host is specified via HTTP verbs. Of course, there are several actions that a client would like the host to perform. HTTP has formalized on a few that capture the essentials that are universally applicable for all kinds of applications. These request verbs are:

GET: fetch an existing resource. The URL contains all the necessary information the server needs to locate and return the resource.

POST: create a new resource. POST requests usually carry a payload that specifies the data for the new resource.

PUT: update an existing resource. The payload may contain the updated data for the resource.

DELETE: delete an existing resource.

The above four verbs are the most popular, and most tools and frameworks explicitly expose these request verbs. PUT and DELETE are sometimes considered specialized versions of the POST verb, and they may be packaged as POST requests with the payload containing the exact action: create, update or delete.

9

Status CodesWith URLs and verbs, the client can initiate requests to the server. In return, the server responds with status codes and message payloads. The status code is important and tells the client how to interpret the server response. The HTTP spec defines certain number ranges for specific types of responses:

1xx: Informational Messages This class of codes was introduced in HTTP/1.1 and is purely provisional. The server can send a 100-continue message, telling the client to continue sending the remainder of the request, or ignore if it has already sent it.

2xx: Successful This tells the client that the request was successfully processed. The most common code is 200 OK.

3xx: Redirection This requires the client to take additional action. The most common use-case is to jump to a different URL in order to fetch the resource.

4xx: Client Error These codes are used when the server thinks that the client is at fault, either by requesting an invalid resource or making a bad request. The most popular code in this class is 404 Not Found

5xx: Server Error These codes are used when the server thinks that the client is at fault, either by requesting an invalid resource or making a bad request. The most popular code in this class is 404 Not Found

10

Request-Response Message FormatsSo far, we've seen that URLs, verbs and status codes make up the fundamental pieces of an HTTP request/response pair.

11

Request-Response Message FormatsLet's now look at the content of these messages. The HTTP specification states that a request or response message has the following generic structure:

It's mandatory to place a new line between the message headers and body. The message can contain one or more headers, of which are broadly classified into:

• general headers

• request specific headers

• response specific headers

• entity headers

12

Request FormatThe request message has the same generic structure as above, except for the request line which looks like:

A typical request message might look like:

13

Response FormatThe response format is similar to the request message, except for the status line and headers. The status line has the following structure:

14

Tools to View HTTP TrafficThere are a number of tools available to monitor HTTP communication. Here, we list some of the more popular tools.

Undoubtedly, the Chrome Devtools is a favorite among web developers:

15

Tools to View HTTP TrafficThere are also web debugging proxies, like Fiddler for Windows and Charles for Apple OSX.

16

Using HTTP in Web Frameworks & LibrariesjQuery AjaxBecause jQuery is primarily a client-side library, its Ajax API provides the opposite of a server-side framework. In other words, it allows you to read response messages and modify request messages. jQuery exposes a simple API via jQuery.ajax()

17

Just For Fun…IP Addresses Explainedhttp://netforbeginners.about.com/od/navigatingthenet/f/IP-Addresses-Explained.htm

How Does the Internet Workhttp://www.tldp.org/HOWTO/Unix-and-Internet-Fundamentals-HOWTO/internet.html

18

AJAX

19

AJAX• AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and

more interactive web applications with the help of XML, HTML, CSS, and Java Script.• Ajax uses HTML for content, CSS for presentation, along with the Document Object Model and JavaScript for

dynamic content display.• Conventional web applications transmit information to and from the sever using synchronous requests. It

means you fill out a form, hit submit, and get directed to a new page with new information from the server.• With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update

the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

• XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

• AJAX is a web browser technology independent of web server software.• A user can continue to use the application while the client program requests information from the server in the

background.• Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.• Data-driven as opposed to page-driven.

20

AJAX Links of Interest• AJAX Tutorial (W3Schools)

• What is AJAX? (TutorialsPoint)

• How AJAX Works

• AJAX Learning Guide (TechTarget)

• AJAX Explained with Code Examples (YouTube)

21

ASP.NET AJAX

22

ASP.NET AJAXASP.NET AJAX, previously called "Atlas", is a Microsoft implementation of an AJAX based framework, created for ASP.NET (although it can be used on other platforms as well).

AJAX stands for Asynchronous JavaScript and XML, which, very simply put, is a way of transferring data between the server and client without sending the entire page, and thereby creating a complete postback. AJAX allows for what is called "partial page rendering" which allows for a richer experience for the user, since loading dynamic content can be done in the background, without refreshing and redrawing the entire page. If you have ever used Gmail or Outlook Web Access, you have used an Ajax enabled web application.

While it's perfectly possible to use Ajax without Microsoft ASP.NET AJAX, a lot of things are way easier, since Microsoft has wrapped some of the most tedious parts of Ajax into their implementation. For instance, the three most popular browsers (Chrome, Firefox, Internet Explorer) require different ways of using Ajax, and have different JavaScript implementations. ASP.NET AJAX simplifies this a lot and allows you to write the same code to target these three main browsers.

23

ASP.NET AJAX

DEMO: ajaxdemo1.zip

24

ASP.NET AJAXIn the markup part, we use two new things, when compared to regular ASP.NET: The ScriptManager control and the UpdatePanel control.

The ScriptManager makes sure that the required ASP.NET AJAX files are included and that AJAX support is added, and has to be included on every page where you wish to use AJAX functionality.

After the manager, we have one of the most used controls when working with AJAX, the UpdatePanel. This control allows you to wrap markup which you would like to allow to be partially updated, that is, updated without causing a real postback to the server.

Besides those two controls, everything else is standard controls, with no modifications that would indicate alternate behavior.

25

ASP.NET AJAXTry running the example, and click the button.

The label will be updated with our usual Hello world text, and the current time. Try repeatedly clicking the button, and you will see the label get the current timestamp each time.

Notice the wonderful absence of a blinking window and a running status bar - everything is done without updating anything but the label!

If you wish to see how this page would work without AJAX, try setting the "enablepartialrendering" of the ScriptManager to false like this:

This will disallow the use of partial rendering on the page, and show you how it would work without AJAX (the page would postback and reload with every click of the button).

26

ASP.NET AJAXThe UpdatePanel control is probably the most important control in the ASP.NET AJAX package. It will apply AJAX functionality to controls contained within it, allowing partial rendering of the area.

We already used it in the ajaxdemo1 example, and now we will go into more depth with other aspects of the control.

The <asp:UpdatePanel> tag has two child tags: the ContentTemplate and the Triggers tags.

The ContentTemplate tag is required, since it holds the content of the panel. The content can be anything that you would normally put on your page, from literal text to web controls.

The Triggers tag allows you to define certain triggers which will make the panel update it's content.

The next example will show the use of both these child tags.

27

ASP.NET AJAX

DEMO: ajaxdemo2.zip

28

ASP.NET AJAXSo, what's this example all about?

Try running it, and click the two buttons. You will notice that then first button updates only the first datestamp, while the second button updates both. Why?

We have set the Panels to update conditionally, which means that their content is only updated if something insides them causes a postback, or if one of the defined triggers are fired.

As you can see, the first UpdatePanel carries a trigger which references the second button. This will ensure that the first panel is updated even when a control on a different UpdatePanel is used.

The AsyncPostBackTrigger tag is pretty simple—it only takes two attributes, the controlid, a reference to the control which can trigger it, and the eventname, which tells which eventtype can cause the trigger to fire. If you wish for the content of a UpdatePanel to be updated no matter what, you may change the updatemode property to Always.

In general, you should only have UpdatePanels around areas where you wish to do partial updates. Don't wrap your entire page within an UpdatePanel, and don't be afraid to use several panels, since this will give you more control of which areas update and when they do it.

29

ASP.NET AJAXA big problem with AJAX enabled pages in general, is that, by design, each action doesn't represent a state in your browser, which means that you can't use the Back and Forward buttons to shift between states, and because the URL doesn't change, a specific state can't be bookmarked or linked to by the user.

This effectively limits the situations in where you can use AJAX in general and the UpdatePanel control specifically.

Fortunately, Microsoft has solved this problem with the History feature. It can be enabled on the ScriptManager control, and basically works by adding information to the URL after the # character, which is normally used for navigating between various parts of the same page.

Let's try creating a sample page which will first show you the problem, and then another page where we fix it afterwards.

30

ASP.NET AJAX

Demo: ajaxdemo3.zip

31

ASP.NET AJAXTry running the page and see for yourself.

When you select a new color from the dropdown list, the change is reflected in the label control below it, and because of the UpdatePanel around it, no real postback is performed and the label is updated without the page reloading.

This is all very good, but as you can see, no matter how many times you change the color, the URL does not change and no state is tracked, resulting in dead Back and Forward buttons.

32

ASP.NET AJAXLet's change that, by making the following changes: The ScriptManager should have the EnableHistory property set to True and we need to subscribe to the OnNavigate event, like this:

In the Code Behind, we add a single line to our dropdown list event, and then we define our Navigate event for the ScriptManager, like this:

Demo: ajaxdemo4.zip

33

ASP.NET AJAXTry running the page now.

Each time you change the color, you will see the URL change, but still without a real postback/page reload, and you can now use your Back/Forward buttons in the brower.

You will also see that the URL in the address bar actually be copied to a new browser window, and when the page is loaded, the color is now the same as when you copied the URL. It works!

One thing that might bother you, is the fact that the URL looks very cryptic, like this:

Default.aspx#&&/wEXAQUNU2VsZWN0ZWRDb2xvcgUFR3JlZW6BwCysI0shYsZauxImdaPIIPEYSA==

That's because the values are encoded for security reasons. However, in a lot of cases, the values you store are really not that important and you might want a more naturally looking URL instead of the more secure one.

34

ASP.NET AJAXThis can be accomplished by using the EnableSecureHistoryState property on the ScriptManager, like this:

Now when you use the page, the URL will look like this instead:

Default.aspx#&&SelectedColor=Red

Much simpler, but obviously it also allows the user to enter values that you may not have expected, which you should consider and prepare for when using this feature.

Demo: ajaxdemo5.zip

35

ASP.NET AJAXOne of the problems with Ajax, is the fact that since it's asynchronous and in the background, the browser will not show you any status.

With fast servers and fast methods, this is not a big problem, but whenever you have a method which takes up a bit of time, the user is very likely to get impatient.

Fortunately, ASP.NET AJAX solves this problem for us as well, with a nice control called UpdateProgress. It will use your own template to show that an asynchronous method is working.

Have a look at the following example, which will show the control in action. It will be explained afterwards.

36

ASP.NET AJAX

Demo: ajaxdemo6.zip

37

ASP.NET AJAXThis simple example will just show you how easy it is to use the UpdateProgress control. Once the button is clicked, the script sleeps for 5 seconds (don't use code like that in your real projects - it's for demonstrational purposes only!), and the "Loading..." text is displayed on your page. You can use anything in the ProgressTemplate, including ordinary markup and other controls. A common use is an animated GIF, positioned strategically on the page using CSS positioning.

You can even have multiple UpdateProgress controls on the page, and by using the AssociatedUpdatePanelID property, you can make sure that the UpdateProgress is only shown when a certain UpdatePanel is updated.

The DynamicLayout property is nice to know as well. It tells whether or not the page should reserve space for your progress control. If it's set to true, which is the default, the space is dynamic, hence it's not reserved, but taken when the control is shown. If you wish to reserve the space, set this property to false. To see the difference, add the property to our example and change it back and forth.

If some of your postbacks are fast, the UpdateProgress will only be shown for a very short amount of time, resulting in a blinking behavior, which may confuse your users. For that reason, you may specify a minimum amount of time to occur before showing the progress control. This can be done with the DisplayAfter attribute. Specify a number of milliseconds to elapse before showing the progress control, e.g. 2000 if you wish to wait for 2 seconds.

38

ASP.NET AJAXTimer controls allow you to do postbacks at certain intervals. If used together with UpdatePanels, which is the most common approach, it allows for timed partial updates of your page, but it can be used for posting back the entire page as well. Here is a small example of using the Timer control. It simply updates a timestamp every 5 seconds.

Demo: ajaxdemo7.zip

39

ASP.NET AJAXThis is all very simple.

We have a normal UpdatePanel, which carries a Trigger reference to our new Timer control.

This means that the panel is updated when the Timer "ticks", that is, fires the Tick event. The Timer control uses the interval attribute to define the number of milliseconds to occur before firing the Tick event. As you can see from our Code Behind code listing, we just update the DateStampLabel each time the Timer fires.

Of course, this could be done more efficiently with a simple piece of JavaScript, which updates the time on the client side instead of involving the server.

The example is only used to demonstrate the potential of the Timer control.

40

Suggested ASP.NET AJAX Links of Interest

• Microsoft AJAX (Microsoft)

• ASP.NET AJAX (Microsoft)

• ASP.NET AJAX Tutorial

41

REST

Recommended: http://web.archive.org/web/20130116005443/http://tomayko.com/writings/rest-to-my-wife

Recommended: http://www.quora.com/What-is-REST-in-laymans-terms (8 Answers)

42

REST• REST stands for Representational State Transfer. It relies on a stateless, client-server, cacheable

communications protocol -- and in virtually all cases, the HTTP protocol is used.

• REST is an architecture style for designing networked applications. The idea is that, rather than using complex mechanisms such as CORBA, RPC or SOAP to connect between machines, simple HTTP is used to make calls between machines.

• RESTful applications use HTTP requests to post data (create and/or update), read data (e.g., make queries), and delete data. Thus, REST uses HTTP for all four CRUD (Create / Read / Update / Delete) operations.

• REST is a lightweight alternative to mechanisms like RPC (Remote Procedure Calls) and Web Services (SOAP, WSDL, et al.).

• Despite being simple, REST is fully-featured; there's basically nothing you can do in Web Services that can't be done with a RESTful architecture.

• REST is not a "standard". There will never be a W3C recommendation for REST, for example. And while there are REST programming frameworks, working with REST is so simple that you can often "roll your own" with standard library features in languages like Perl, Java, or C#.

43

FYI: REST API and Web API

Recommended: http://video.ch9.ms/ch9/bec0/7d653c5c-1313-4f4e-a8ed-37ce4fe6bec0/WC103_high.mp4

Note: If you wanted to rework Assignment 3 as a Web Form Web Application, you could take advantage of the ASP.NET WEB API. It is possible to convert your Web Form Web Site to a Web Form Web Application, although it is a pretty involved process, which involves creating a new empty Web Application projecting and copying your files to it from the Web Site.

https://msdn.microsoft.com/en-us/library/vstudio/aa983476%28v=vs.100%29.aspx

YouTube How To Video: https://www.youtube.com/watch?v=oXptokM0v7w

http://www.programajama.com/courses/bit285/expert/book/0101.pdf

http://www.programajama.com/courses/bit285/expert/videos/0101.mp4

Converting Website to Web Application:

Converting Website to Web Application:

44

Suggested REST Links of Interest

• Learn REST: A RESTful Tutorial

• Learn REST: A Tutorial

• Intro to REST (Google)

• Learn REST: A RESTful Tutorial (Video)

• REST API in Five Minutes

• A Beginner’s Guide to HTTP and REST

• Build RESTful APIs with ASP.NET

• Learn About ASP.NET Web API (Microsoft)

• RESTful Web Services: The Basics (IBM)

• Tutorial: Building an ASP.NET Web API RESTful Service

45

Lecture 17: In-Class ExerciseFrom the menu bar, select Lectures and go to the Lectures 17 bar and select Lecture 17 ICE to begin working on today's in-class exercises.