CS2513: Client-Side Programming
Weekly Course Content - Week 16
Chapter 11: Introduction to AJAX

Click Topic to Open | Open All | Close All
Objectives

Chapter 11: Updating Web Pages with AJAX

  • Describe the steps involved in using Ajax to update data
  • Create an HTTP request and interpret an HTTP response
  • Request and receive server data using the XMLHttp Request object
  • Process data received from a web service and add it to the DOM
  • Update app data using JSON-P
Assignments and Due Dates
Assignments and Due Dates: View
Required Readings

JavaScript //Sixth Edition by Sasha Vodnik and Don Gosselin
Chapter 11: Updating Web Pages with AJAX

Text Errata Sheet:
http://www.cengagebrain.com/cgi-wadsworth/course_products_wp.pl?fid=M20b&product_isbn_issn=9781305078444&token= B8BD74F3B70F74FC7BA0B7DD68EDE7AED76C796FBF71150DA83380176DE6392AE2B09CF0F7F4D1461D0A2FDA3FDCDCDC

Required Class Coding Standards
http://www.occc.edu/aphilipp/htm_csp/CS2513_CodingStandards.htm

Required Tutorials

Video: Lynda.com:

JavaScript and AJAX by Ray Villalobos
      1. Getting Started: What is AJAX? (~2:36 minutes)

It might be helpful to review these tutorials - more specifically the one on Parsing: https://www.youtube.com/watch?v=agSSGVgq1hg&index=3&list=PLfdtiltiRHWHKQOby9HEyYtB_Y9g7z6yL

What is JSON? by Codesource
It might be helpful to review these tutorials that were presented in the strings and arrays chapter..
https://www.youtube.com/playlist?list=PLfdtiltiRHWHKQOby9HEyYtB_Y9g7z6yL

- more specifically the one on Parsing: https://www.youtube.com/watch?v=agSSGVgq1hg&index=3&list=PLfdtiltiRHWHKQOby9HEyYtB_Y9g7z6yL

    • What is JSON
      • Introduction (4:22 min)
      • Linting (1:38 min) Note: A site for linting" can be found at http://www.jslint.com/
      • Parsing (3:53 min) Note: This video might be more relevant in conjunction with the AJAX chapter.
      • Stringify (2:35 min)

    " Lint is the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language.

Sample Code

Completed sample code from Chapter 11  JS6eTextCode_Chapter11
Since the files require additional procedures to be viewed, see instructions below

This is going to be a bit more involved to view than most class examples. It cannot be viewed locally unless you are familiar with setting up a server and have access to localhost. (Setting up a server is not a component of this course, but some of you may have experience.) The server must include PHP.

Apollo1 has been configured to include PHP.

Supplemental Materials
  1. PowerPoint from Text: CS2513GosselinJS_CH11 - View (ppt) | Print (pdf
Software

Same software as previously indicated.

Inquiring minds that wish to install a web server can download WAMP http://www.wampserver.com/en/ (Apache, MySQL and PHP on Windows), MAMP https://www.mamp.info/en/ (Apache, MySQL and PHP on Mac), or LAMP (Sorry, I do not know Linux so you will be on your own if you decide to use that option)

Chapter Questions and Test Reviews

Chapter Review Questions
Source for quiz and test questions. It is highly recommended that students know the answers.

Chapter 12: Review Questions (.rtf file)
Test 5: Review Sheet

Required Assignments

CSP12 - AJAX: Specifications
     (Complete, upload to Apollo1, then submit URL in the LMS)
Weekly Quiz: Chapter 11 (Located in the LMS)

Professor's Class Notes and Comments


AJAX is cool! There is no doubt about it. Books have been written on the topic. This week's work is meant to give you an overview so that you might continue to explore it on your own at a later date.

P. 742, Introduction to AJAX

Take a few minutes to view the Required Video: What is AJAX?

P. 750 #1, Building a Web Development Environment

Apollo1 has been configured with PHP and the other required items. Since it is towards the end of the semester and there is already a good deal of content in this chapter, students do not need to install a web server on their computers. Upload the AJAX folder to Apollo1 and then view using the URL of http://apollo1.occc.edu/user#####/AJAX/solar.htm (where user##### is replaced by your login). They cannot be viewed locally without a web server. Those of you who will be taking CS2623: Server-Side Programming will be required to install a webserver on a local computer.

CAVEAT: For the rest of the chapter, files must be uploaded to Apollo1 and then be viewed through your Apollo1 URL. They can no longer be viewed locally.

P. 756 #1, Building a Web Development Environment

Again, this web page cannot be viewed locally, the files must be uploaded to Apollo1 and the viewing URL will be http://apollo1.occc.edu/user#####/AJAX/solar.htm where user##### is replaced by your login.

PP. 776-777 Parsing JSON

If you have not already done so, the Parsing JSON video listed under Required Tutorials above should be viewed in conjuction with this section of the text.

Completed Chapter Example:

Solar.htm has some additional requirements to be viewed. A working copy can be accessed at http://apollo1.occc.edu/user8858/ajax/solar.htm

If you download the sample completed code from the link under Required Sample Code above, some modifications need to be made.

    1. It cannot be viewed locally because there is server side scripting (PHP). Apollo1 has the required configuration.
    2. Extract the file, and access the folder entitled AJAX.
    3. You will need to obtain an API key. Instructions are on p. 164-#2
    4. The API key will need to be entered in solar.php (p.764-#6 -- about line 3 in the sample completed code) and scriptJSONP.js (p. 788-#5 -- about line 52 in the sample completed code)
    5. The AJAX folder will then be uploaded to apollo1. The URL to access the web pages should be http://apollo1.occc.edu/user#####/AJAX/solar.htm where user##### is replaced by your apollo1 login.