Copy of ajax tutorial

Copy of ajax tutorial

• 1.
  AJAX Tutorial AJAX, shorthandfor Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. AJAX meant to increase the web page's interactivity, speed, and usability. If you know Javascript, HTML, CSS and XML then you need to spend just one hour to startwith AJAX.  AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.  Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display.  Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.  With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.  XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.  AJAX is a web browser technology independent of web server software.  A user can continue to use the application while the client program requests information from the server in the background  Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger.  Data-driven as opposed to page-driven AJAX Is Based On Open Standards AJAX is based on the following open standards:  Browser-basedpresentationusingHTML andCascadingStyle Sheets(CSS)  Data storedin XML format andfetchedfromthe server  Behind-the-scenesdatafetches usingXMLHttpRequestobjectsinthe browser  JavaScriptto make everythinghappen
• 2.
  Technologies Used inAJAX JavaScript  Loosely typed scripting language  JavaScript function is called when an event in a page occurs  Glue for the whole AJAX operation DOM  API for accessing and manipulating structured documents  Represents the structure of XML and HTML documents CSS  Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript XMLHttpRequest  JavaScript object that performs asynchronous interaction with the server AJAX Examples Google Maps A usercan drag the entire mapbyusingthe mouse insteadof clickingonabuttonor something  http://maps.google.com/ Google Suggest As youtype,Google will offersuggestions.Use the arrow keysto navigate the results  http://www.google.com/webhp?complete=1&hl=en Gmail Gmail isa newkindof webmail,builtonthe ideathatemail canbe more intuitive,efficientanduseful  http://gmail.com/ Yahoo Maps (new) Nowit's eveneasierandmore funtoget where you're going!
• 3.
  Steps of AJAXOperation 1. A client event occurs 2. An XMLHttpRequest object is created 3. The XMLHttpRequest object is configured 4. The XMLHttpRequest object makes an asynchronous request to the Webserver. 5. Webserver returns the result containing XML document. 6. The XMLHttpRequest object calls the callback() function and processes the result. 7. The HTML DOM is updated XMLHttpRequest The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005. XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side. The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or even plain text. You already have seen couple of examples on how to create a XMLHttpRequest object. Below is listed some of the methods and properties you have to become familiar with. XMLHttpRequest Methods  abort() Cancels the current request.  getAllResponseHeaders() Returns the complete set of HTTP headers as a string.  getResponseHeader( headerName ) Returns the value of the specified HTTP header.  open( method, URL ) open( method, URL, async ) open( method, URL, async, userName ) open( method, URL, async, userName, password ) Specifies the method, URL, and other optional attributes of a request.
• 4.
  The method parametercan have a value of "GET", "POST", or "HEAD". Other HTTP methods, such as "PUT" and "DELETE" (primarily used in REST applications), may be possible The "async" parameter specifies whether the request should be handled asynchronously or not . "true" means that script processing carries on after the send() method, without waiting for a response, and "false" means that the script waits for a response before continuing script processing.  send( content ) Sends the request.  setRequestHeader( label, value ) Adds a label/value pair to the HTTP header to be sent. XMLHttpRequest Properties  onreadystatechange An event handler for an event that fires at every state change.  readyState The readyState property defines the current state of the XMLHttpRequest object. Here are the possible values for the readyState propery: State Description 0 The requestisnot initialized 1 The requesthasbeensetup 2 The requesthasbeensent 3 The requestisinprocess 4 The requestiscompleted readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method. readyState=1 after you have called the open() method, but before you have called send(). readyState=2 after you have called send().
• 5.
  readyState=3 after thebrowser has established a communication with the server, but before the server has completed the response. readyState=4 after the request has been completed, and the response data have been completely received from the server.  responseText Returns the response as a string.  responseXML Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.  status Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").  statusText Returns the status as a string (e.g. "Not Found" or "OK"). Current Issues with AJAX AJAX is growing very fast and that is the reason that it contains many issues with it. We hope with the passes of time they will be resolved ab AJAX will be ideal for web applications. We are listing down few issues which AJAX has as a challenge. Complexity is increased  Server side developers will need to understand that presentation logic will be required in the HTML client pages as well as in the server-side logic  Page developers must have JavaScript technology skills AJAX-based applications can be difficult to debug, test, and maintain  JavaScript is hard to test - automatic testing is hard  Weak modularity in JavaScript  Lack of design patterns or best practice guidelines yet Toolkits/Frameworks are not mature yet  Most of them are in beta phase No standardization of the XMLHttpRequest yet  Future version of IE will address this No support of XMLHttpRequest in old browsers  Iframe will help
• 6.
  JavaScript technology dependency& incompatibility  Must be enabled for applications to function  Still some browser incompatibilities JavaScript code is visible to a hacker  Poorly designed JavaScript code can invite security problem