JavaScript, Fourth Edition

1
JavaScript, Fourth Edition

• Chapter 12
• Updating Web Pages with AJAX

2
Objectives

• Study AJAX concepts
• Learn about HTTP
• Use AJAX to request and receive server data

JavaScript, Fourth Edition
2
2
3
Introduction to AJAX

• Asynchronous JavaScript and XML (AJAX)
• Refers to a combination of technologies
• Allows Web pages displayed on a client computer
  to quickly interact and exchange data
• With a Web server without reloading the entire
  Web page
• AJAX primarily relies on JavaScript and HTTP
  requests
• To exchange data between a client computer and a
  Web server
• XML is often the format used for exchanging data

4
Introduction to AJAX (continued)

• Other technologies that comprise AJAX
• XHTML, CSS, and the Document Object Model (DOM)
• XMLHttpRequest object
• Uses HTTP to exchange data between a client
  computer and a Web server
• Can be used to request and receive data without
  reloading a Web page

JavaScript, Fourth Edition
4
5
Introduction to AJAX (continued)

• Combining XMLHttpRequest with DHTML
• You can update and modify individual portions of
  your Web page
• With data received from a Web server
• Google Suggest Web site
• www.google.com/webhp?complete1
• One of the first commercial Web sites to
  implement an AJAX application

JavaScript, Fourth Edition
5
6
Introduction to AJAX (continued)
JavaScript, Fourth Edition
6
7
Introduction to AJAX (continued)
JavaScript, Fourth Edition
7
8
Introduction to AJAX (continued)
JavaScript, Fourth Edition
8
9
Introduction to AJAX (continued)

• Example
• Create an AJAX application that retrieves the top
  stories from a selected news agency using RSS
  feeds
• RSS (for RDF Site Summary, Rich Site Summary, or
  Really Simple Syndication)
• XML format that allows Web sites to publish
  content that can be read by other Web sites

JavaScript, Fourth Edition
9
10
Introduction to AJAX (continued)
JavaScript, Fourth Edition
10
11
Understanding AJAXs Limitations

• The data you request must be located on the Web
  server where your JavaScript program is running
• You can use a server-side script as a proxy to
  access data from another domain
• Proxy
• Refers to someone or something that acts or
  performs a request for another thing or person

JavaScript, Fourth Edition
11
12
Accessing Content on a Separate Domain

• Web service, or XML Web service
• Software component that resides on a Web server
• Does not contain any sort of graphical user
  interface or even a command-line interface
• Simply provides services and data in the form of
  methods and properties
• It is up to the client to provide an
  implementation for a program that calls a Web
  service
• Example
• AJAX example that displays streaming stock quote
  information from Yahoo! Finance

JavaScript, Fourth Edition
12
13
Accessing Content on a Separate Domain (continued)
JavaScript, Fourth Edition
13
14
Accessing Content on a Separate Domain (continued)
JavaScript, Fourth Edition
14
15
Running AJAX from a Web Server

• You must open your AJAX files from a Web server
• With the HTTP protocol (http//)
• Apache HTTP Server
• Most popular Web server software used on the
  Internet
• Second most popular Web server
• Microsoft Internet Information Services (IIS)
• Example
• Open the stock quotes Web page from your Web
  server

JavaScript, Fourth Edition
15
16
Overview of Creating an AJAX Script

• Steps to create an AJAX script
• Instantiate an XMLHttpRequest object for the Web
  browser where the script will run
• Use the XMLHttpRequest object to send a request
  to the server
• Read and process the data returned from the
  server

JavaScript, Fourth Edition
16
17
Working with HTTP

• Request
• Process of asking for a Web page from a Web
  server
• Response
• Web servers reply
• Every Web page is identified by a unique address
  called the Uniform Resource Locator, or URL
• HTTP client
• Refers to the application, usually a Web browser,
  which makes the request

JavaScript, Fourth Edition
17
18
Working with HTTP (continued)

• HTTP server
• Another name for a Web server
• Refers to a computer that receives HTTP requests
  and returns responses to HTTP clients
• Host
• Refers to a computer system that is being
  accessed by a remote computer
• HTTP is a component of Transmission Control
  Protocol/Internet Protocol (TCP/IP)
• W3C and Internet Engineering Task Force jointly
  develop HTTP

JavaScript, Fourth Edition
18
19
Understanding HTTP Messages

• HTTP messages
• HTTP client requests and server responses
• HTTP client opens a connection to the server and
  submits a request message
• Web server then returns a response message that
  is appropriate to the type of request
• Headers
• Define information about the request or response
  message and about the contents of the message body

JavaScript, Fourth Edition
19
20
Understanding HTTP Messages (continued)

• Cache-Control header
• Specifies how a Web browser should cache any
  server content it receives
• Caching
• Refers to the temporary storage of data for
  faster access
• Web browser will attempt to locate any necessary
  data in its cache
• Before making a request from a Web server
• It goes against the reason for using AJAX

JavaScript, Fourth Edition
20
21
Understanding HTTP Messages (continued)

• A blank line always follows the last header line
• Optionally, a message body can follow the blank
  line in the messages
• Most common types of HTTP requests
• GET and POST
• Other HTTP request
• HEAD, DELETE, OPTIONS, PUT, and TRACE

JavaScript, Fourth Edition
21
22
Sending HTTP Requests

• GET method
• Used for standard Web page requests
• Can have a query string or form data appended to
  the URL
• POST request
• Similar to a GET request except that any
  submitted data is included in the message body
• Immediately following the blank line after the
  last header

JavaScript, Fourth Edition
22
23
Sending HTTP Requests (continued)
JavaScript, Fourth Edition
23
24
Sending HTTP Requests (continued)
JavaScript, Fourth Edition
24
25
Receiving HTTP Responses

• HTTP response messages
• Take the same format as request messages
• Return the protocol and version of the HTTP
  server
• Along with a status code and descriptive text
• Status codes format
• 1xx (informational)Request received
• 2xx (success)Request successful
• 3xx (redirection)Request cannot be completed
  without further action
• 4xx (client error)Request cannot be fulfilled
  due to a client error

26
Receiving HTTP Responses (continued)

• Status codes format (continued)
• 5xx (server error) Request cannot be fulfilled
  due to a server error

JavaScript, Fourth Edition
26
27
Receiving HTTP Responses (continued)

• Zero or more response headers follow the status
  line
• Response returned from a server can be much more
  involved
• Than the original request that generated it

JavaScript, Fourth Edition
27
28
Receiving HTTP Responses (continued)

• Example
• Create a PHP script that returns the RSS feeds
  for the selected news agency in the top stories
  program

JavaScript, Fourth Edition
28
29
Receiving HTTP Responses (continued)
JavaScript, Fourth Edition
29
30
Requesting Server Data

• XMLHttpRequest object
• Key to turning your JavaScript script into AJAX
  programs
• Allows you to use JavaScript and HTTP to exchange
  data between a Web browser and a Web server

JavaScript, Fourth Edition
30
31
Requesting Server Data (continued)
JavaScript, Fourth Edition
31
32
Requesting Server Data (continued)
JavaScript, Fourth Edition
32
33
Instantiating an XMLHttpRequest Object

• For Mozilla-based browsers and Internet Explorer
  7
• Use the XMLHttpRequest constructor
• For older versions of Internet Explorer
• You must instantiate the XMLHttpRequest object as
  an ActiveX object
• ActiveX
• Technology that allows programming objects to be
  easily reused
• With any programming language that supports
  Microsofts Component Object Model

JavaScript, Fourth Edition
33
34
Instantiating an XMLHttpRequest Object (continued)

• Component Object Model (COM)
• Architecture for cross-platform development of
  client/server applications
• Most JavaScript programmers use a series of
  nested try...catch statements
• To instantiate an XMLHttpRequest object according
  to the Web browser that runs the script
• Opening and closing HTTP connections takes up a
  lot of computer memory and processing time
• HTTP/1.1 automatically keeps the client-server
  connection open unless it is specifically closed

JavaScript, Fourth Edition
34
35
Instantiating an XMLHttpRequest Object (continued)

• You can make your AJAX programs faster by reusing
  an instantiated XMLHttpRequest object
• Example
• Add code to the top stories Web page that
  instantiates an XMLHttpRequest object

JavaScript, Fourth Edition
35
36
Opening and Sending a Request

• Use the open() method with the instantiated
  XMLHttpRequest object
• To specify the request method (such as GET or
  POST) and URL
• open() method accepts three optional arguments
• User name, password, and the async argument
• abort() method
• Used to cancel any existing HTTP requests before
  beginning a new one

JavaScript, Fourth Edition
36
37
Opening and Sending a Request (continued)

• send() method
• Submit the request to the server
• Accepts a single argument containing the message
  body
• Example
• Add a function that instantiates, opens, and
  submits an XMLHttpRequest object

JavaScript, Fourth Edition
37
38
Receiving Server Data

• responseXML property
• Contains the HTTP response as an XML document
• responseText property
• Contains the HTTP response as a text string
• In the XML DOM, each XML element is referred to
  as a node
• childNodes array
• Returns an array of child nodes for an element
• nodeValue property
• Sets and returns the value of a node

JavaScript, Fourth Edition
38
39
Receiving Synchronous Responses

• Synchronous request
• Stops the processing of the JavaScript code until
  a response is returned from the server
• Check the value of the XMLHttpRequest objects
  status property
• Ensure that the response was received
  successfully
• Example
• Modify the top stories Web page so it sends and
  receives synchronous requests and responses using
  RSS feeds

JavaScript, Fourth Edition
39
40
Receiving Synchronous Responses (continued)
JavaScript, Fourth Edition
40
41
Receiving Synchronous Responses (continued)
JavaScript, Fourth Edition
41
42
Receiving Synchronous Responses (continued)

• Synchronous responses are easier to handle
• Drawback
• Script will not continue processing until the
  response is received
• You should use asynchronous requests with the
  send() method

JavaScript, Fourth Edition
42
43
Receiving Asynchronous Responses

• Asynchronous request
• Allows JavaScript to continue processing while it
  waits for a server response
• Create an asynchronous request
• Pass a value of true as the third argument of the
  open() method
• Or omit the argument altogether
• Receive a response
• Use the XMLHttpRequest objects readyState
  property and onreadystatechange event

JavaScript, Fourth Edition
43
44
Receiving Asynchronous Responses (continued)

• Value assigned to the readyState property is
  updated automatically
• According to the current statement of the HTTP
  request
• If property is assigned a value of 4
• The response is finished loading
• Example
• Modify the top stories Web page so it sends and
  receives asynchronous requests and responses

JavaScript, Fourth Edition
44
45
Summary

• Asynchronous JavaScript and XML or AJAX
• The XMLHttpRequest object uses HTTP to exchange
  data between a client computer and a Web server
• RSS (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
• You cannot use the XMLHttpRequest object to
  directly access content on another domains server

46
Summary (continued)

• You must open AJAX files from a Web server with
  the HTTP protocol (http//)
• Hypertext Transfer Protocol (HTTP)
• HTTP client requests and server responses are
  both known as HTTP messages
• Use the methods and properties of an instantiated
  XMLHttpRequest object with JavaScript to build
  and send request messages
• First step for using AJAX to exchange data
  between an HTTP client and a Web server is to
  instantiate an XMLHttpRequest object

47
Summary (continued)

• To improve performance, you should call the
  abort() method of the XMLHttpRequest object
• Use the send() method with the instantiated
  XMLHttpRequest object to submit the request to
  the server
• A synchronous request stops the processing of the
  JavaScript code until a response is returned
• Asynchronous request allows JavaScript to
  continue processing while it waits for a server
  response

JavaScript, Fourth Edition
47