Title: Competency 3.2, 2402--Intermediate Web Programming
Course: Intermediate Web Programming (25436)

ITSE 2402 Intermediate Web
JS Module 3.2 Assignment

Discussion

- You will need to upload your pages to test your AJAX code.
- Understanding AJAX
  - Continuously reloading entire web pages is too slow.
  - Asynchronous JavaScript and XML (AJAX) refer to a combination of technologies that allow Web pages to quickly interact and exchange data with a Web server without reloading the entire page.
  - AJAX primarily relies on JavaScript and HTTP requests to exchange data between a client computer and a Web server.
  - The key component to improve interactivity added to XML, XHTML, CSS, and the DOM is the XMLHttpRequest object.
    - XMLHttpRequest object uses HTTP to exchange data between a client computer and a Web server.
    - XMLHttpRequest object can be used to request and receive data without reloading a Web page.
    - You will be creating some PHP pages, and we haven't studied PHP yet. The JavaScript book uses PHP without a full explanation of how PHP works. You will work with that in competency 4, but you will work with the php as given in the JavaScript text in competency 3.2 and project 3.
- RSS feeds
  - RSS (for RDF Site Summary or Rich Site Summary) is an XML format that allows Web sites to publish content that can be read by other Web sites.
  - Typical RSS feeds include news listings, blogs, and digital content such as podcasts.

Practice

- Introduction to AJAX
  - Get the code for TopStories.html.
    - Add the validation image links.
    - Add the coding on pages 684 - 685.
    - Save as topStories1.htm in your module3 folder.
  - Create the PHP script on pages 699 - 700 and save as TopStories.php in your module3 folder. Stop at step 6. (Remember, do not start with your templateHTML5.htm. This page is only php.)
Here is an example of those 2 pages running. Top Stories 1

Radio Button Explanation Table
Pages 684 - 685 | In this form, the value of the radio button is a link to an RSS feed of a news agency. The form will be submitted to TopStories.php. Complete topStories1.htm using the instructions on pages 684 - 685. This page is incomplete. You won't be able to test it until you have created TopStories.php but you should validate for html errors. The page has images. Download those files are get them from your instructor. Unzip and put in an images folder in your module3 folder.

- Understanding AJAX's Limitations
  - The XMLHttpRequest object cannot be used directly to access content on another domain's server.
  - The data requested with the XMLHttpRequest object must be located on the Web server where your JavaScript program is running.
  - Use a server-side script as a proxy to access data from another domain.
  - The server-side proxy returns the data to the client computer as it is requested with the XMLHttpRequest object.
- Accessing content on a Separate Domain
  - A Web Service or XML Web service is a software component that resides on a Web server.
  - Web services provide data in the form of methods and properties. The client provides the implementation for a program that calls a Web service.
  - In the case of AJAX, you might pass the data to a JavaScript program running on a client.
  - Yahoo! Finance also returns a link that allows you to download a CSV (comma-separated values) file. This looks a lot like the string we processed earlier with FormProcessor.html. You will have the address, followed by the ? with the state information following. That is then followed by the name=value pairs.
s for ticker symbols
f for data formats
e for file extensions
By default, the values sl1d1t1c1ohgv are assigned to the data formats name=value pair and represent the ticker symbol (s), last price (l1), date (d1), time (t1), change (c1), open price (o), daily high (h), daily low (g), and volume (v).
  - View the stock quotes coding from your student files.

  - Stock Quote Table
stockCheck.htm
The php code on pages 689 - 690 is used to gather streaming stock quote information from Yahoo! Finance.
Because the returned CSV file from Yahoo! Finance is a text file with each entry separated by commas, you can use a script to parse the file and use the values in your Web pages.
The PHP script executes when it is passed a stock ticker with the XMLHttpRequest object.
After the PHP script retrieves the information for the specified stock, it returns the data to the JavaScript code that called it.

  - XML tree generated by this php using symbol ORCL.

  - XML Example Table
XML generated | This php code builds an XML tree containing the data for the stock ticker symbol that is passed to it.

- Running AJAX from a Web Server
  - During orientation, I asked you to download the XAMP server software. This is to allow you to test your pages locally.
  - You can run your AJAX pages from your local server. Please (if possible) do all of your debugging locally before uploading your pages in order not to bog down our class server. This will require to move all files associated with these pages to C:\xampp\htdocs (assuming xampp is on your C drive.)
- Working with HTTP
  - The process of asking for a Web page from a Web server is known as a request.
  - The reply from a Web server is known as the response.
  - When you enter the http:// address you are making a request by an HTTP client to an HTTP server and receiving a response from an HTTP server to an HTTP client.
  - An internet Protocol, or IP address, is another way to uniquely identify computers or devices connected to the Internet.
- Understanding HTTP Messages
  - Both HTTP requests and HTTP responses are called HTTP messages using the following format:
Start line containing the request method for requests or status line for responses
Header lines (zero or more)
Blank line
Message body (optional)
  - The first line in a request identifies the method (such as "get" or "post").
  - The first line in a response is the status returned.
  - The header lines define information about the request or response and about the contents of the message body.
  - The format for using a header is header value. (Headers are not case sensitive.)
  - The Cache-Control header specifies how a Web browser should cache any server content it receives.
  - If cache is turned on the request comes from cache and not the current page.
- Sending HTTP Requests
  - GET / HTTP/1.1
requests a web page with the get method, the root directory, and 1.1 as the HTTP version.
- Receiving HTTP Responses
  - HTTP response messages take the same format as request messages, except for the contents of the start line (status line) and the headers.
  - Code beginning with 1 indicates that a request was received.
  - Code beginning with 2 indicates that a request was successful.
- HTTP messages
  - Creating TopStories.php

TopStories code
Pages 699 - 700
The TopStories.php script returns the RSS feeds for the selected news agency in the top stories program.
The response returned from the PHP script will include the Content-Type, Content-Length, and Cache-Control headers.

Create TopStories.php using the instructions on pages 699 - 700.

You should now be able to "test" your topStories1.htm and TopStories.php pages. Clicking Get Headlines should get the same result as the example.

Explanation of the PHP code
$NewsSource=$_GET["agency"]; | This statement retrieves the value of the agency field that was passed in the GET request from your topStories1.htm page and assigns it to a variable named $NewsSource.
Â | The header functions define a header that will be returned with a response.
header("Content-Type: text/xml"); | Creates the Content-Type header and assigns it a value of "text/xml".
header("Content-Length: " . strlen(file_get_contents($NewsSource))); | Creates the Content-Type header and assigns it the length of the RSS feed by using the File_get_contents() method to retrieve the file and the strlen() function to obtain the file length. Notice the use of the dot operator in the instruction.
header("Cache-Control: no-cache"); | Creates the Cache-Control header and assigns it a value of "no-cache".
readfile($NewsSource); | Uses the readfile() function to return the contents of the RSS feed as a response.

- Try...catch statements (Exception Handling)
  - All of our past validation has been to anticipate what could have been entered and tested for what we anticipated. Sometimes we do not anticipate every possibility. To code for that, exception handling can be written using try...catch statements
  - When an error occurs, rather than have the page not render, you can use the combination of try, throw, and catch statements. See W3Schools try...catch
  - The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.
  - You can use the try...catch without using the throw. The throw is used to control program control and to generate more specific error messages.
- Instantiating an XMLHttpRequest Object
  - Open your topStories1.htm page that you created earlier.

Global Variable Explanation
Page 707
Create topStories2.htm using the instructions on page 707.

The text creates a global variable newsRequest. However, the try...catch statements are written using the global variable httpRequest. Additionally, later in the exercise, the author switches back to newRequest. So, if you wish, just create 2 variables. It is hard to test things that are error checking if the site you are going to check doesn't have errors.
    - var newsRequest = false;
    - var httpRequest = false;

PHP statement Explanation
var httpRequest = false; | Here httpRequest is a global variable to allow reuse so that a new object does not have to be recreated each time a server request is sent.
nested try...catch statements | Used to instantiate an XMLHttpRequest object in order to determine which browser is being used.
httpRequest = new XMLHttpRequest(); | To exchange data between an HTTP client and a Web server is to instantiate an XMLHttpRequest object. Use this constructor for Firefox and IE7. This is not yet standardized by the W3C.
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); | Use this constructor for IE6.
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); | Use this constructor for IE5.5
window.alert("Your browser does not support AJAX!"); return false; | Error message for browsers that do not recognize the constructors previously tried.

- Opening and Sending a Request
  - Open your topStories2.htm page that you created earlier.

Page 710
Page 710
Create topStories3.htm using the instructions on page 710.
The newsUpdate() function instantiates, opens, and submits an XMLHttpRequest object.
See Step 2 for full explanation of the code.

The textbook does not show a third argument in the request. The 3rd argument is used to show whether the request is asynchronous or synchronous. The author has you change to synchronous on page 716. So, it really doesn't matter if you put the third argument as true (like I did) this time.

The text uses the global variable newsRequest. If you created both variables as a precaution in topStories2.htm, then you should not get a message for an unrecognized variable.

- Receiving Server Data
  - Open your topStories3.htm page that you created earlier.

Pages 716 - 718
Pages 716 - 718 | Create topStories4.htm using the instructions on pages 716 - 718. This modification allows you to send and receive synchronous request and responses using RSS feeds. Once uploaded your page should resemble the examples in Figure 12-9 and Figure 12-10. This may cause problems in IE6.

- Receiving Asynchronous Responses
  - Open your topStories4.htm page that you created earlier.

Pages 721 - 722
Pages 721 - 722
Create topStories5.htm using the instructions on pages 721 - 722.
This modification allows you to send and receive asynchronous request and responses using RSS feeds.

What is the difference between asynchronous (AJAX) and synchronous request? AJAX is an asynchronous technology where other requests are synchronous. Example Step 2 on page 721:

if (newsRequest.readyState == 4 && newsRequest.status == 200)

value 4 - means the load is complete
value 200 - means success

The traditional event registration model on page 722 is

newsRequest.onreadystatechanged=fillNewsInfo;

This is registering the function to the event handler the entire function (not just a call, the function is now associated with the event).

- Refreshing Server Data Automatically
  - Open your topStories5.htm that you created earlier.
  - Create topStories6.htm using the instruction on page 725.
  - This modification automatically refreshes data that is obtained from an HTTP server.

Update your index page:

- Add links on your index page to the pages in your assignment folder that are to be graded:
  - topStories6.htm
  - TopStories.php

Uploading:

- Upload your revised index.htm page to the public_html folder.
- Upload your module3 folder with the files:
  - topStories6.htm
  - TopStories.php
  - all images used in your pages

Testing uploaded pages

- Once uploaded, go to your site.
- Validate your index page and all pages in this assignment (your css page will validate through the html pages that refer to your css page)
- Make any corrections for any page that does not validate or display correctly.
- Email your instructor for grading.