Your SlideShare is downloading. ×
Chapter 12 .ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chapter 12 .ppt

1,777
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,777
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 JavaScript, Fourth Edition
  • 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
    JavaScript, Fourth Edition
  • 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
  • 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?complete=1
      • One of the first commercial Web sites to implement an AJAX application
    JavaScript, Fourth Edition
  • 6. Introduction to AJAX (continued) JavaScript, Fourth Edition
  • 7. Introduction to AJAX (continued) JavaScript, Fourth Edition
  • 8. Introduction to AJAX (continued) JavaScript, Fourth Edition
  • 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
  • 10. Introduction to AJAX (continued) JavaScript, Fourth Edition
  • 11. Understanding AJAX’s 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
  • 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
  • 13. Accessing Content on a Separate Domain (continued) JavaScript, Fourth Edition
  • 14. Accessing Content on a Separate Domain (continued) JavaScript, Fourth Edition
  • 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
  • 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
  • 17. Working with HTTP
    • Request
      • Process of asking for a Web page from a Web server
    • Response
      • Web server’s 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 23. Sending HTTP Requests (continued) JavaScript, Fourth Edition
  • 24. Sending HTTP Requests (continued) JavaScript, Fourth Edition
  • 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
      • 1 xx: (informational)—Request received
      • 2 xx : (success)—Request successful
      • 3 xx : (redirection)—Request cannot be completed without further action
      • 4 xx : (client error)—Request cannot be fulfilled due to a client error
    JavaScript, Fourth Edition
  • 26. Receiving HTTP Responses (continued)
    • Status codes format (continued)
      • 5 xx : (server error)— Request cannot be fulfilled due to a server error
    JavaScript, Fourth Edition
  • 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
  • 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
  • 29. Receiving HTTP Responses (continued) JavaScript, Fourth Edition
  • 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
  • 31. Requesting Server Data (continued) JavaScript, Fourth Edition
  • 32. Requesting Server Data (continued) JavaScript, Fourth Edition
  • 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 Microsoft’s Component Object Model
    JavaScript, Fourth Edition
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 object’s 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
  • 40. Receiving Synchronous Responses (continued) JavaScript, Fourth Edition
  • 41. Receiving Synchronous Responses (continued) JavaScript, Fourth Edition
  • 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
  • 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 object’s readyState property and onreadystatechange event
    JavaScript, Fourth Edition
  • 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
  • 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 domain’s server
    JavaScript, Fourth Edition
  • 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
    JavaScript, Fourth Edition
  • 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