DW : Topic 06 - AJAX(1)

50 %
50 %
Information about DW : Topic 06 - AJAX(1)

Published on September 19, 2013

Author: PradipKharbuja

Source: slideshare.net

TOPIC 06 : AJAX(1) Er. Pradip Kharbuja

INTRODUCTION Until now, the page has to be refreshed if any content has been changed. AJAX helps do this task asynchronously. Asynchronous JavaScript and XML It is a set of related tools that improve the responsiveness of presentation layers. Ajax is a grouping of technologies.  It is not a programming language in itself.

AJAX DEMO Er. Pradip Kharbuja

AJAX  Although XML is part of the Ajax title, it is not strictly required.  Ajax makes use of HTML and CSS for presentation.  It uses the Document Object Model to adapt and manipulate data.  Ajax makes use of a special kind of object called the XMLHttpRequest object.  This allows Ajax to communicate with the server and request HTML/PHP pages.

AJAX  The Ajax processing loop is as follows: 1. The browser creates an XMLHttpRequest object and then sends that to the server. 2. The server processes the object and then sends back the response. 3. The browser processes the response using JavaScript. 4. The browser then updates the page content to reflect changes.  The result is a very responsive web page.

OUR ARCHITECTURE SO FAR Presentation HTML PHP Application Data Ajax MySQL XML

JAVASCRIPT - DOM  How will you manipulate content using JavaScript ?  Core to JavaScript is the concept of the Document Object Model (DOM).  The DOM is a way of representing HTML & XML documents as a tree.  The DOM creates a structure that is easy for developers to navigate.  Any time tags are nested, they become nodes in the tree.

THE DOM <?xml version='1.0' encoding='utf-8'?> <library> <book status = "on shelf"> <ISBN>012345678</ISBN> <title>Component Based Solutions Module Book</title> <author> <forename>Michael</forename> <surname>Heron</surname> </author> </book> <book status = "on loan"> <ISBN>2222222</ISBN> <title>The Javanomicon</title> <author> <forename>Michael</forename> <surname>Heron</surname> </author> </book> </library> Source: Used with permission from http://www.monkeys-at-keyboards.com/java3/8.shtml

THE DOM Source: Used with permission from http://www.monkeys-at-keyboards.com/java3/8.shtml

AJAX Browser compatibility.  Every browser handles the initial parts of setting up an XMLHttpRequest object differently.  And we need to handle each of these methods.

THE REQUEST OBJECT var request; if (window.XMLHttpRequest) { // Code for modern browsers request=new XMLHttpRequest(); }else { // code for older versions of Internet Explorer request = new ActiveXObject("Microsoft.XMLHTTP"); }

SERVER COMMUNICATION Communication with the server is handled via GET/POST requests. -We do this through the open and send methods of the XMLHttpRequest object we created. request.open ("GET", "test.txt", true); request.send(); There are three parameters to open. -The method of the request -The URL of the request -Whether to handle the request asynchronously

RECEIVING THE RESPONSE  We handle this through the use of a callback. We do not know when the server is going to give us the response, so we provide a function to be called as and when it happens.  To do this, we create a function and bind it to the onreadystatechange property of our XMLHttpRequest object.  And we do this before we send a request.

THE SERVER RESPONSE  The server response is made up of three key parts. 1. The ready state This will be a number from 0 to 4. 4 means ‘it’s complete’ 2. The request status 200 means ‘ok’. 404 means 'Page not found'. This is the standard HTTP status code.

THE SERVER RESPONSE 3. The response text  This is what the server gave us back.  It is also what we will usually need to parse with JavaScript.

A SIMPLE AJAX APPLICATION  Suppose, we have a small text file on the server.  When we press the button, we replace the contents of a <p> tag with the contents in the text file. <button type="button" onclick="setupAjax()"> Press me!</button> <p id = "contents">Contents Go Here</p>

A SIMPLE AJAX APPLICATION <script language="JavaScript"> function setupAjax() { var request; if (window.XMLHttpRequest) { request=new XMLHttpRequest(); } else { request = new ActiveXObject("Microsoft.XMLHTTP"); }

A SIMPLE AJAX APPLICATION // Here, we set up the code to handle the response from the server. request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { document.getElementById("contents").innerHTML = request.responseText; } } // Here we send the request to the server to GET the file called test.txt. request.open ("GET", "test.txt", true); request.send(); } </script>

AJAX APPLICATIONS For our Ajax application, we are binding event handlers so that they occur at particular points in a document’s lifetime. There are many places where this can be done. onLoad and onUnload handle when a page is loaded or unloaded. onFocus, onBlur and onChange permit you to handle when there is interaction with a form element. Try an example in slide of mouseover events to an Ajax function.


Add a comment

Related presentations

Related pages

dW:Ajax:Ajax forum:Ajax AutoComplete - Ajax forum Forum

Forum Directory >‎ dW >‎ Ajax >‎ Forum: Ajax forum >‎ Topic: Ajax AutoComplete ... ‏2010-06-03T11:27:05Z by draywin
Read more

dW:Ajax:Ajax forum:Ajax and Applying CSS - ibm.com

1 Post Pinned topic Ajax and Applying CSS ‏2010-06-16T21:19:24Z | Tags: Answered question This question has been answered ...
Read more

AutoComplete - 1 click form submission - Support - Ajax ...

Asked 06 Apr 2013 03:28:49. ... 1.)Place DMXZone Ajax Form on the page. 2.) ... Switch your DW in design view and select the Ajax Autocomplete field. 4.) ...
Read more

Data Grid crashing DW when editing properties - Support ...

Reply Follow this topic Stop following ... I am running DW CS6 with Ajax Data ... Is that hapening with the latest version of the extension Version 1.1 ...
Read more

Popular Videos - Heiko Westermann - YouTube

Popular Videos - Heiko Westermann Heiko Westermann - Topic; ... 1:06. Play next; ... Welcome to AFC Ajax - All Highlights
Read more

Kevin McClellan Architecture - KMA+DW

... php,eltd-core-1.0,flow-ver-1.3.1,,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page ... by Kevin McClellan 04/30/2016 0. ... 04/06/2014 0 ...
Read more

Dreamweaver mit Alzheimer » WYSIWYG - supertopic.de

Seite 1. Dreamweaver mit Alzheimer. Tags ... muss ich bei jedem Neustart von DW die Daten neu ... Editiert: 03.08.11, 12:06 Uhr. Dieser Beitrag wurde vom ...
Read more

Dreamweaver JQuery - Adobe Systems

Adobe Dreamweaver CC. ... Added 06/17/2013. By Matthew Pizzi. More on this topic Customizable starter design for jQuery Mobile ...
Read more