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
Required Readings
Required Tutorials
Sample Code
Supplemental Materials
Software
Chapter Questions and Test Reviews
Required Assignments
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.