Home »

WEB 2.0 – AJAX

Introduction to …         WEB 2.0                    Why AJAX         RICH Internet Application         DOJO         JSON          Web 2.0, pronounced “web two point oh” , a phrase coined by O’Reilly Media in 2003         Second generation of web-based communities and hosted service         Internet Usage is drastically changed         Which facilitate collaboration and sharing between users          Such as social-networking sites,wikis and folksonomies         User is part of Application Life Cycle         Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform §          Characteristics of “Web 2.0” §          “Network as platform”§          Users owning the data on a site and exercising control over that data.§          An architecture of participation that encourages users to add value to the application as they use it.§          A rich, interactive, user-friendly interface based on Ajax or similar frameworks.§          Some social-networking aspects §          Technology Overview  “Web 2.0” §          Rich Internet Application techniques, optionally Ajax based§          CSS§          Semantically valid HTML markup and the use of microformats§          Syndication and aggregation of data in RSS/Atom§          Clean and meaningful URLs§          Use of Open source software either completely or partially§          Weblog publishing §          Mashup §          AJAX – The Detail… §          Allows user to continue interacting with web page while waiting for data to be returned§          Page can be updated without refreshing browser§          Results in a better user experience§          There are AJaX libraries that reduce the amount of JavaScript code that must be written§          Not dependent on any language or data structure§          Works with XHTML and JAVAScript§          Dynamic display an interaction using the Document Object model§          Asynchronous data retrieval using XMLHttpRequest§          Javascript binding Every thing together §          XMLHttpRequest §          JavaScript XMLHttpRequest object§          With this object, your JavaScript can trade data with a web server, without reloading the page§          Allows HTTP Request to be sent from JavaScript code§          HTTPResponse are processed by the handler functions, in the client side§          Browser dependent   §          XMLHttpRequest Object Properties          readyState                        – 0 = UNINITIALIZED; open not yet called                        – 1 = LOADING; send for request not yet called                        – 2 = LOADED; send called, headers and status are available                        – 3 = INTERACTIVE; downloading response,                                    responseText only partially set                        – 4 = COMPLETED; finished downloading response         responseText                        – response as text; null if error occurs or ready state < 3         responseXML                        – response as DOM Document object; null if error occurs or ready state < 3         status                         – integer status code         statusText                         – string status §          XMLHttpRequest Object Methods§          Basic methods§                      – open(method, url[, async]) – initializes a new HTTP request§                                  • method can be “GET”, “POST”, “PUT” or “DELETE”§                                  • url must be an HTTP URL (start with “http://&#8221;)§                                  • async is a boolean indicating whether request should be sent asynchronously§                                  – defaults to true§                      – send(body) – sends HTTP request§                        abort() – called after send() to cancel request §                      §          Header methods§                      – void    setRequestHeader(name, value)§                      – String getResponseHeader(name)§                                  Returns the string value of a single header label §                      – String getAllResponseHeaders()§                                  Returns a string where “header: value” pairs are delimited by carriage returns§            §          Rich Internet Applications (RIA) §          Unlike traditional web applications centered all activity around a client-server architecture with a thin client§          Web applications that have the features and functionality similar to desktop applications§          Run in a Web browser, or do not require software installation§          Intermediate layer of code, often called a client engine, between the user and the server§          Features:§                                  -Richer.§                                  -More responsive§                                  -Client/Server balance§                                  -Asynchronous communication§                                  -Network efficiency and more…§          Tools:§                                  -JavaScript§                                  -Adobe Flash§                                  -Microsoft Silverlight§                                  -Sun Microsystem JavaFX§                                  -Java Applets and more…  §          DOJO§          Dojo is an Open Source DHTML toolkit written in JavaScript§          Designed to ease the rapid development of JavaScript- or Ajax-based applications and web sites§          Dojo provides to make your web sites more usable, responsive, and functional§          Provides API for Event system, I/O APIs, and generic language enhancement§          You can use the Dojo build tools to write command-line unit-tests for your JavaScript code  §          DOJO Features§          Widgets: Dojo widgets are prepackaged components of JavaScript code, HTML markup and CSS style declarations that can be used to enrich websites with various interactive features that work across browsers: ex : Menus, tabs etc§          Asynchronous communication§          Dojo provides an abstracted wrapper “dojo.io.bind”§          JavaScript programming§          Packaging system: Packaging system to facilitate modular development of functionality in individual packages and sub-packages§          Dojo File Upload§          Client-side data storage: In addition  to cookies Dojo also provides a local, client-side storage abstraction named Dojo Storage  §          JSON§          JSON (JavaScript Object Notation) is a lightweight data-interchange format. §          Generic Data Structure for data exchange between client and server.§          Text format that is completely language independent but uses conventions that are familiar to programmers of most of the languages, including C, C++, C#, Java, JavaScript, Perl, Python etc.  §          Client Side JSON   Creating the JSON string.  var myJSONObject = {“bindings”: [        {“ircEvent”: “PRIVMSG”, “method”: “newURI”, “regex”: “^http://.*”},        {“ircEvent”: “PRIVMSG”, “method”: “deleteURI”, “regex”: “^delete.*”},        {“ircEvent”: “PRIVMSG”, “method”: “randomURI”, “regex”: “^random.*”}   ] };                                                                                                                           myJSONObject.bindings[0].method // “newURI” . Fetching the JSON Value retrieved from Server                                                                    var myObject = eval(‘(‘ + myJSONtext + ‘)’);  §          Server Side JSON         JSON is supported by most of the server side language JAVA, ASP, PHP etc.         Creating a JSON Object                        JSONObject  jObj = new JSONObject();                        jObj.put(“key”, value);         Retrieve JSON data from the Client             String jsonStr = request.getParameter(“actionString”);                        JSONObject jobj = (JSONObject)JSONValue.parse(jsonStr);                        String actionName = jobj.get(“key”);   

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: