Your SlideShare is downloading. ×
0
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX
Objectives <ul><li>Study AJAX concepts </li></ul><ul><li>Learn about HTTP </li></ul><ul><li>Use AJAX to request and receiv...
Introduction to AJAX <ul><li>Asynchronous JavaScript and XML (AJAX) </li></ul><ul><ul><li>Refers to a combination of techn...
Introduction to AJAX (continued) <ul><li>Other technologies that comprise AJAX </li></ul><ul><ul><li>XHTML, CSS, and the D...
Introduction to AJAX (continued) <ul><li>Combining  XMLHttpRequest  with DHTML </li></ul><ul><ul><li>You can update and mo...
Introduction to AJAX (continued) JavaScript, Fourth Edition
Introduction to AJAX (continued) JavaScript, Fourth Edition
Introduction to AJAX (continued) JavaScript, Fourth Edition
Introduction to AJAX (continued) <ul><li>Example </li></ul><ul><ul><li>Create an AJAX application that retrieves the top s...
Introduction to AJAX (continued) JavaScript, Fourth Edition
Understanding AJAX’s Limitations <ul><li>The data you request must be located on the Web server where your JavaScript prog...
Accessing Content on a Separate Domain <ul><li>Web service , or  XML Web service </li></ul><ul><ul><li>Software component ...
Accessing Content on a Separate Domain (continued) JavaScript, Fourth Edition
Accessing Content on a Separate Domain (continued) JavaScript, Fourth Edition
Running AJAX from a Web Server <ul><li>You must open your AJAX files from a Web server  </li></ul><ul><ul><li>With the HTT...
Overview of Creating an AJAX Script <ul><li>Steps to create an AJAX script </li></ul><ul><ul><li>Instantiate an  XMLHttpRe...
Working with HTTP <ul><li>Request </li></ul><ul><ul><li>Process of asking for a Web page from a Web server </li></ul></ul>...
Working with HTTP (continued) <ul><li>HTTP server </li></ul><ul><ul><li>Another name for a Web server </li></ul></ul><ul><...
Understanding HTTP Messages <ul><li>HTTP messages </li></ul><ul><ul><li>HTTP client requests and server responses </li></u...
Understanding HTTP Messages (continued) <ul><li>Cache-Control  header </li></ul><ul><ul><li>Specifies how a Web browser sh...
Understanding HTTP Messages (continued) <ul><li>A blank line always follows the last header line </li></ul><ul><ul><li>Opt...
Sending HTTP Requests <ul><li>GET  method </li></ul><ul><ul><li>Used for standard Web page requests </li></ul></ul><ul><ul...
Sending HTTP Requests (continued) JavaScript, Fourth Edition
Sending HTTP Requests (continued) JavaScript, Fourth Edition
Receiving HTTP Responses <ul><li>HTTP response messages </li></ul><ul><ul><li>Take the same format as request messages </l...
Receiving HTTP Responses (continued) <ul><li>Status codes format (continued) </li></ul><ul><ul><li>5 xx : (server error)— ...
Receiving HTTP Responses (continued) <ul><li>Zero or more response headers follow the status line </li></ul><ul><li>Respon...
Receiving HTTP Responses (continued) <ul><li>Example </li></ul><ul><ul><li>Create a PHP script that returns the RSS feeds ...
Receiving HTTP Responses (continued) JavaScript, Fourth Edition
Requesting Server Data <ul><li>XMLHttpRequest  object </li></ul><ul><ul><li>Key to turning your JavaScript script into AJA...
Requesting Server Data (continued) JavaScript, Fourth Edition
Requesting Server Data (continued) JavaScript, Fourth Edition
Instantiating an  XMLHttpRequest  Object <ul><li>For Mozilla-based browsers and Internet Explorer 7 </li></ul><ul><ul><li>...
Instantiating an  XMLHttpRequest  Object (continued) <ul><li>Component Object Model  ( COM ) </li></ul><ul><ul><li>Archite...
Instantiating an  XMLHttpRequest  Object (continued) <ul><li>You can make your AJAX programs faster by reusing an instanti...
Opening and Sending a Request <ul><li>Use the  open()  method with the instantiated  XMLHttpRequest  object </li></ul><ul>...
Opening and Sending a Request (continued) <ul><li>send()  method </li></ul><ul><ul><li>Submit the request to the server </...
Receiving Server Data <ul><li>responseXML  property </li></ul><ul><ul><li>Contains the HTTP response as an XML document </...
Receiving Synchronous Responses <ul><li>Synchronous request </li></ul><ul><ul><li>Stops the processing of the JavaScript c...
Receiving Synchronous Responses (continued) JavaScript, Fourth Edition
Receiving Synchronous Responses (continued) JavaScript, Fourth Edition
Receiving Synchronous Responses (continued) <ul><li>Synchronous responses are easier to handle </li></ul><ul><li>Drawback ...
Receiving Asynchronous Responses <ul><li>Asynchronous request </li></ul><ul><ul><li>Allows JavaScript to continue processi...
Receiving Asynchronous Responses (continued) <ul><li>Value assigned to the  readyState  property is updated automatically ...
Summary <ul><li>“ Asynchronous JavaScript and XML” or “AJAX” </li></ul><ul><li>The  XMLHttpRequest  object uses HTTP to ex...
Summary (continued) <ul><li>You must open AJAX files from a Web server with the HTTP protocol (http://) </li></ul><ul><li>...
Summary (continued) <ul><li>To improve performance, you should call the  abort()  method of the  XMLHttpRequest  object </...
Upcoming SlideShare
Loading in...5
×

Chapter 12 .ppt

1,811

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,811
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Chapter 12 .ppt"

  1. 1. JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX
  2. 2. Objectives <ul><li>Study AJAX concepts </li></ul><ul><li>Learn about HTTP </li></ul><ul><li>Use AJAX to request and receive server data </li></ul>JavaScript, Fourth Edition JavaScript, Fourth Edition
  3. 3. Introduction to AJAX <ul><li>Asynchronous JavaScript and XML (AJAX) </li></ul><ul><ul><li>Refers to a combination of technologies </li></ul></ul><ul><ul><li>Allows Web pages displayed on a client computer to quickly interact and exchange data </li></ul></ul><ul><ul><ul><li>With a Web server without reloading the entire Web page </li></ul></ul></ul><ul><li>AJAX primarily relies on JavaScript and HTTP requests </li></ul><ul><ul><li>To exchange data between a client computer and a Web server </li></ul></ul><ul><li>XML is often the format used for exchanging data </li></ul>JavaScript, Fourth Edition
  4. 4. Introduction to AJAX (continued) <ul><li>Other technologies that comprise AJAX </li></ul><ul><ul><li>XHTML, CSS, and the Document Object Model (DOM) </li></ul></ul><ul><li>XMLHttpRequest object </li></ul><ul><ul><li>Uses HTTP to exchange data between a client computer and a Web server </li></ul></ul><ul><ul><li>Can be used to request and receive data without reloading a Web page </li></ul></ul>JavaScript, Fourth Edition
  5. 5. Introduction to AJAX (continued) <ul><li>Combining XMLHttpRequest with DHTML </li></ul><ul><ul><li>You can update and modify individual portions of your Web page </li></ul></ul><ul><ul><ul><li>With data received from a Web server </li></ul></ul></ul><ul><li>Google Suggest Web site </li></ul><ul><ul><li>www.google.com/webhp?complete=1 </li></ul></ul><ul><ul><li>One of the first commercial Web sites to implement an AJAX application </li></ul></ul>JavaScript, Fourth Edition
  6. 6. Introduction to AJAX (continued) JavaScript, Fourth Edition
  7. 7. Introduction to AJAX (continued) JavaScript, Fourth Edition
  8. 8. Introduction to AJAX (continued) JavaScript, Fourth Edition
  9. 9. Introduction to AJAX (continued) <ul><li>Example </li></ul><ul><ul><li>Create an AJAX application that retrieves the top stories from a selected news agency using RSS feeds </li></ul></ul><ul><li>RSS (for RDF Site Summary , Rich Site Summary , or Really Simple Syndication ) </li></ul><ul><ul><li>XML format that allows Web sites to publish content that can be read by other Web sites </li></ul></ul>JavaScript, Fourth Edition
  10. 10. Introduction to AJAX (continued) JavaScript, Fourth Edition
  11. 11. Understanding AJAX’s Limitations <ul><li>The data you request must be located on the Web server where your JavaScript program is running </li></ul><ul><li>You can use a server-side script as a proxy to access data from another domain </li></ul><ul><li>Proxy </li></ul><ul><ul><li>Refers to someone or something that acts or performs a request for another thing or person </li></ul></ul>JavaScript, Fourth Edition
  12. 12. Accessing Content on a Separate Domain <ul><li>Web service , or XML Web service </li></ul><ul><ul><li>Software component that resides on a Web server </li></ul></ul><ul><ul><li>Does not contain any sort of graphical user interface or even a command-line interface </li></ul></ul><ul><ul><li>Simply provides services and data in the form of methods and properties </li></ul></ul><ul><ul><ul><li>It is up to the client to provide an implementation for a program that calls a Web service </li></ul></ul></ul><ul><li>Example </li></ul><ul><ul><li>AJAX example that displays streaming stock quote information from Yahoo! Finance </li></ul></ul>JavaScript, Fourth Edition
  13. 13. Accessing Content on a Separate Domain (continued) JavaScript, Fourth Edition
  14. 14. Accessing Content on a Separate Domain (continued) JavaScript, Fourth Edition
  15. 15. Running AJAX from a Web Server <ul><li>You must open your AJAX files from a Web server </li></ul><ul><ul><li>With the HTTP protocol (http://) </li></ul></ul><ul><li>Apache HTTP Server </li></ul><ul><ul><li>Most popular Web server software used on the Internet </li></ul></ul><ul><li>Second most popular Web server </li></ul><ul><ul><li>Microsoft Internet Information Services (IIS) </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>Open the stock quotes Web page from your Web server </li></ul></ul>JavaScript, Fourth Edition
  16. 16. Overview of Creating an AJAX Script <ul><li>Steps to create an AJAX script </li></ul><ul><ul><li>Instantiate an XMLHttpRequest object for the Web browser where the script will run </li></ul></ul><ul><ul><li>Use the XMLHttpRequest object to send a request to the server </li></ul></ul><ul><ul><li>Read and process the data returned from the server </li></ul></ul>JavaScript, Fourth Edition
  17. 17. Working with HTTP <ul><li>Request </li></ul><ul><ul><li>Process of asking for a Web page from a Web server </li></ul></ul><ul><li>Response </li></ul><ul><ul><li>Web server’s reply </li></ul></ul><ul><li>Every Web page is identified by a unique address called the Uniform Resource Locator, or URL </li></ul><ul><li>HTTP client </li></ul><ul><ul><li>Refers to the application, usually a Web browser, which makes the request </li></ul></ul>JavaScript, Fourth Edition
  18. 18. Working with HTTP (continued) <ul><li>HTTP server </li></ul><ul><ul><li>Another name for a Web server </li></ul></ul><ul><ul><li>Refers to a computer that receives HTTP requests and returns responses to HTTP clients </li></ul></ul><ul><li>Host </li></ul><ul><ul><li>Refers to a computer system that is being accessed by a remote computer </li></ul></ul><ul><li>HTTP is a component of Transmission Control Protocol/Internet Protocol (TCP/IP) </li></ul><ul><li>W3C and Internet Engineering Task Force jointly develop HTTP </li></ul>JavaScript, Fourth Edition
  19. 19. Understanding HTTP Messages <ul><li>HTTP messages </li></ul><ul><ul><li>HTTP client requests and server responses </li></ul></ul><ul><li>HTTP client opens a connection to the server and submits a request message </li></ul><ul><li>Web server then returns a response message that is appropriate to the type of request </li></ul><ul><li>Headers </li></ul><ul><ul><li>Define information about the request or response message and about the contents of the message body </li></ul></ul>JavaScript, Fourth Edition
  20. 20. Understanding HTTP Messages (continued) <ul><li>Cache-Control header </li></ul><ul><ul><li>Specifies how a Web browser should cache any server content it receives </li></ul></ul><ul><li>Caching </li></ul><ul><ul><li>Refers to the temporary storage of data for faster access </li></ul></ul><ul><ul><li>Web browser will attempt to locate any necessary data in its cache </li></ul></ul><ul><ul><ul><li>Before making a request from a Web server </li></ul></ul></ul><ul><ul><li>It goes against the reason for using AJAX </li></ul></ul>JavaScript, Fourth Edition
  21. 21. Understanding HTTP Messages (continued) <ul><li>A blank line always follows the last header line </li></ul><ul><ul><li>Optionally, a message body can follow the blank line in the messages </li></ul></ul><ul><li>Most common types of HTTP requests </li></ul><ul><ul><li>GET and POST </li></ul></ul><ul><li>Other HTTP request </li></ul><ul><ul><li>HEAD , DELETE , OPTIONS , PUT , and TRACE </li></ul></ul>JavaScript, Fourth Edition
  22. 22. Sending HTTP Requests <ul><li>GET method </li></ul><ul><ul><li>Used for standard Web page requests </li></ul></ul><ul><ul><li>Can have a query string or form data appended to the URL </li></ul></ul><ul><li>POST request </li></ul><ul><ul><li>Similar to a GET request except that any submitted data is included in the message body </li></ul></ul><ul><ul><ul><li>Immediately following the blank line after the last header </li></ul></ul></ul>JavaScript, Fourth Edition
  23. 23. Sending HTTP Requests (continued) JavaScript, Fourth Edition
  24. 24. Sending HTTP Requests (continued) JavaScript, Fourth Edition
  25. 25. Receiving HTTP Responses <ul><li>HTTP response messages </li></ul><ul><ul><li>Take the same format as request messages </li></ul></ul><ul><ul><li>Return the protocol and version of the HTTP server </li></ul></ul><ul><ul><ul><li>Along with a status code and descriptive text </li></ul></ul></ul><ul><li>Status codes format </li></ul><ul><ul><li>1 xx: (informational)—Request received </li></ul></ul><ul><ul><li>2 xx : (success)—Request successful </li></ul></ul><ul><ul><li>3 xx : (redirection)—Request cannot be completed without further action </li></ul></ul><ul><ul><li>4 xx : (client error)—Request cannot be fulfilled due to a client error </li></ul></ul>JavaScript, Fourth Edition
  26. 26. Receiving HTTP Responses (continued) <ul><li>Status codes format (continued) </li></ul><ul><ul><li>5 xx : (server error)— Request cannot be fulfilled due to a server error </li></ul></ul>JavaScript, Fourth Edition
  27. 27. Receiving HTTP Responses (continued) <ul><li>Zero or more response headers follow the status line </li></ul><ul><li>Response returned from a server can be much more involved </li></ul><ul><ul><li>Than the original request that generated it </li></ul></ul>JavaScript, Fourth Edition
  28. 28. Receiving HTTP Responses (continued) <ul><li>Example </li></ul><ul><ul><li>Create a PHP script that returns the RSS feeds for the selected news agency in the top stories program </li></ul></ul>JavaScript, Fourth Edition
  29. 29. Receiving HTTP Responses (continued) JavaScript, Fourth Edition
  30. 30. Requesting Server Data <ul><li>XMLHttpRequest object </li></ul><ul><ul><li>Key to turning your JavaScript script into AJAX programs </li></ul></ul><ul><ul><li>Allows you to use JavaScript and HTTP to exchange data between a Web browser and a Web server </li></ul></ul>JavaScript, Fourth Edition
  31. 31. Requesting Server Data (continued) JavaScript, Fourth Edition
  32. 32. Requesting Server Data (continued) JavaScript, Fourth Edition
  33. 33. Instantiating an XMLHttpRequest Object <ul><li>For Mozilla-based browsers and Internet Explorer 7 </li></ul><ul><ul><li>Use the XMLHttpRequest constructor </li></ul></ul><ul><li>For older versions of Internet Explorer </li></ul><ul><ul><li>You must instantiate the XMLHttpRequest object as an ActiveX object </li></ul></ul><ul><li>ActiveX </li></ul><ul><ul><li>Technology that allows programming objects to be easily reused </li></ul></ul><ul><ul><ul><li>With any programming language that supports Microsoft’s Component Object Model </li></ul></ul></ul>JavaScript, Fourth Edition
  34. 34. Instantiating an XMLHttpRequest Object (continued) <ul><li>Component Object Model ( COM ) </li></ul><ul><ul><li>Architecture for cross-platform development of client/server applications </li></ul></ul><ul><li>Most JavaScript programmers use a series of nested try...catch statements </li></ul><ul><ul><li>To instantiate an XMLHttpRequest object according to the Web browser that runs the script </li></ul></ul><ul><li>Opening and closing HTTP connections takes up a lot of computer memory and processing time </li></ul><ul><ul><li>HTTP/1.1 automatically keeps the client-server connection open unless it is specifically closed </li></ul></ul>JavaScript, Fourth Edition
  35. 35. Instantiating an XMLHttpRequest Object (continued) <ul><li>You can make your AJAX programs faster by reusing an instantiated XMLHttpRequest object </li></ul><ul><li>Example </li></ul><ul><ul><li>Add code to the top stories Web page that instantiates an XMLHttpRequest object </li></ul></ul>JavaScript, Fourth Edition
  36. 36. Opening and Sending a Request <ul><li>Use the open() method with the instantiated XMLHttpRequest object </li></ul><ul><ul><li>To specify the request method (such as GET or POST ) and URL </li></ul></ul><ul><li>open() method accepts three optional arguments </li></ul><ul><ul><li>User name, password, and the async argument </li></ul></ul><ul><li>abort() method </li></ul><ul><ul><li>Used to cancel any existing HTTP requests before beginning a new one </li></ul></ul>JavaScript, Fourth Edition
  37. 37. Opening and Sending a Request (continued) <ul><li>send() method </li></ul><ul><ul><li>Submit the request to the server </li></ul></ul><ul><ul><li>Accepts a single argument containing the message body </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>Add a function that instantiates, opens, and submits an XMLHttpRequest object </li></ul></ul>JavaScript, Fourth Edition
  38. 38. Receiving Server Data <ul><li>responseXML property </li></ul><ul><ul><li>Contains the HTTP response as an XML document </li></ul></ul><ul><li>responseText property </li></ul><ul><ul><li>Contains the HTTP response as a text string </li></ul></ul><ul><li>In the XML DOM, each XML element is referred to as a node </li></ul><ul><li>childNodes[] array </li></ul><ul><ul><li>Returns an array of child nodes for an element </li></ul></ul><ul><li>nodeValue property </li></ul><ul><ul><li>Sets and returns the value of a node </li></ul></ul>JavaScript, Fourth Edition
  39. 39. Receiving Synchronous Responses <ul><li>Synchronous request </li></ul><ul><ul><li>Stops the processing of the JavaScript code until a response is returned from the server </li></ul></ul><ul><li>Check the value of the XMLHttpRequest object’s status property </li></ul><ul><ul><li>Ensure that the response was received successfully </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>Modify the top stories Web page so it sends and receives synchronous requests and responses using RSS feeds </li></ul></ul>JavaScript, Fourth Edition
  40. 40. Receiving Synchronous Responses (continued) JavaScript, Fourth Edition
  41. 41. Receiving Synchronous Responses (continued) JavaScript, Fourth Edition
  42. 42. Receiving Synchronous Responses (continued) <ul><li>Synchronous responses are easier to handle </li></ul><ul><li>Drawback </li></ul><ul><ul><li>Script will not continue processing until the response is received </li></ul></ul><ul><li>You should use asynchronous requests with the send() method </li></ul>JavaScript, Fourth Edition
  43. 43. Receiving Asynchronous Responses <ul><li>Asynchronous request </li></ul><ul><ul><li>Allows JavaScript to continue processing while it waits for a server response </li></ul></ul><ul><li>Create an asynchronous request </li></ul><ul><ul><li>Pass a value of true as the third argument of the open() method </li></ul></ul><ul><ul><ul><li>Or omit the argument altogether </li></ul></ul></ul><ul><li>Receive a response </li></ul><ul><ul><li>Use the XMLHttpRequest object’s readyState property and onreadystatechange event </li></ul></ul>JavaScript, Fourth Edition
  44. 44. Receiving Asynchronous Responses (continued) <ul><li>Value assigned to the readyState property is updated automatically </li></ul><ul><ul><li>According to the current statement of the HTTP request </li></ul></ul><ul><li>If property is assigned a value of 4 </li></ul><ul><ul><li>The response is finished loading </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>Modify the top stories Web page so it sends and receives asynchronous requests and responses </li></ul></ul>JavaScript, Fourth Edition
  45. 45. Summary <ul><li>“ Asynchronous JavaScript and XML” or “AJAX” </li></ul><ul><li>The XMLHttpRequest object uses HTTP to exchange data between a client computer and a Web server </li></ul><ul><li>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 </li></ul><ul><li>You cannot use the XMLHttpRequest object to directly access content on another domain’s server </li></ul>JavaScript, Fourth Edition
  46. 46. Summary (continued) <ul><li>You must open AJAX files from a Web server with the HTTP protocol (http://) </li></ul><ul><li>Hypertext Transfer Protocol (HTTP) </li></ul><ul><li>HTTP client requests and server responses are both known as HTTP messages </li></ul><ul><li>Use the methods and properties of an instantiated XMLHttpRequest object with JavaScript to build and send request messages </li></ul><ul><li>First step for using AJAX to exchange data between an HTTP client and a Web server is to instantiate an XMLHttpRequest object </li></ul>JavaScript, Fourth Edition
  47. 47. Summary (continued) <ul><li>To improve performance, you should call the abort() method of the XMLHttpRequest object </li></ul><ul><li>Use the send() method with the instantiated XMLHttpRequest object to submit the request to the server </li></ul><ul><li>A synchronous request stops the processing of the JavaScript code until a response is returned </li></ul><ul><li>Asynchronous request allows JavaScript to continue processing while it waits for a server response </li></ul>JavaScript, Fourth Edition
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×