2007 2019 Marco Papa Ellis Horowitz 15 Ajax Engine Role Every user action that

2007 2019 marco papa ellis horowitz 15 ajax engine

This preview shows page 15 - 22 out of 55 pages.

© 2007-2019 Marco Papa & Ellis Horowitz 15 Ajax Engine Role Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn't require a trip back to the server, such as: – simple data validation – editing data in memory – even some navigation the engine handles on its own. If the engine needs something from the server in order to respond, such as: – submitting data for processing – loading additional interface code – retrieving new data the engine makes those requests asynchronously, retrieving results in JSON or XML, without stalling a user ± s interaction with the application.
Image of page 15
© 2007-2019 Marco Papa & Ellis Horowitz 16 Initiating the XMLHttpRequest Object Creating an instance of the XMLHttpRequest object requires branching syntax to account for browser differences. For Safari, Chrome, FF, IE 9+, Edge a simple call to the object's constructor function does the job: var req = new XMLHttpRequest(); For Internet Explorer 5-8, pass the name of the object to the ActiveX constructor (obsolete): var req = new ActiveXObject("Microsoft.XMLHTTP"); The object reference returned by both constructors is to an abstract object that works entirely out of view of the user. Its methods control all operations, while its properties hold, among other things, various data pieces returned from the server.
Image of page 16
© 2007-2019 Marco Papa & Ellis Horowitz 17 XMLHttpRequest Object Methods See latest at:
Image of page 17
© 2007-2019 Marco Papa & Ellis Horowitz 18 XMLHttpRequest Object Methods (cont ± d) • Of the methods shown in the Table on the previous slide, the open() and send() methods are the ones you'll likely use most. open() sets the scene for an upcoming operation. Two required parameters are the HTTP method you intend for the request and the URL for the connection. For the method parameter, use "GET" on operations that are primarily data retrieval requests; use "POST" on operations that send data to the server, especially if the length of the outgoing data is potentially greater than 512 bytes. The URL may be either a complete or relative URL. • It is safer to send asynchronously and design your code around the onreadystatechange event for the request object.
Image of page 18
© 2007-2019 Marco Papa & Ellis Horowitz 19 XMLHttpRequest Example Code var req; function loadXMLDoc(url) { req = false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } // branch for IE/Windows ActiveX version (optional / obsolete) } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange ; req.open("GET", url, true ); req.send(""); } } This code instantiates an XmlHttpRequest object depending upon the browser
Image of page 19
© 2007-2019 Marco Papa & Ellis Horowitz 20 XMLHttpRequest Object Properties See latest at:
Image of page 20
© 2007-2019 Marco Papa & Ellis Horowitz 21
Image of page 21
Image of page 22

You've reached the end of your free preview.

Want to read all 55 pages?

  • Fall '07
  • Papa
  • Ajax, Ellis Horowitz, Marco Papa

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture