AJAX Compiled from AJAX Programming Sang Shin http
- Slides: 26
AJAX Compiled from “AJAX Programming” [Sang Shin] http: //www. javapassion. com/ajaxcodecamp/
AJAX “Java. Script technology doesn’t suck, after all”
Rich User Experience u u u Take a look at a typical desktop application (Spreadsheet app, etc. ) The program responses intuitively and quickly The program gives a user meaningful feedback's instantly • A cell in a spreadsheet changes color when you hover your mouse over it • Icons light up as mouse hovers them u Things happen naturally • No need to click a button or a link to trigger an event
Characteristics of Conventional Web Applications u “Click, wait, and refresh” user interaction • Page refreshes from the server needed for all events, data submissions, and navigation u Synchronous “request/response” communication model • The user has to wait for the response u Page-driven: Workflow is based on pages • Page-navigation logic is determined by the server
Issues of Conventional Web Application u Interruption of user operation • Users cannot perform any operation while waiting for a response u Loss of operational context during refresh • Loss of information on the screen • Loss of scrolled position u No instant feedback's to user activities • A user has to wait for the next page u Constrained by HTML • Lack of useful widgets These are the reasons why Rich Internet Application (RIA) technologies were born.
UI Technology Richness Scale
Rich Internet Application (RIA) Technologies Applet (Swing) u Macromedia Flash u Java Web. Start u DHTML with Hidden IFrame u AJAX u
AJAX Asynchronous Java. Script and XML u AJAX is using Java. Script, namely the Xml. Http. Request object, to communicate asynchronously with a server-side component and dynamically update the source of an HTML page based on the resulting XML/Text response. u
AJAX
AJAX
AJAX u u DHTML plus Asynchronous communication capability through XMLHttp. Request Pros • • u Most viable RIA technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No need to download code & no plug-in required Cons • Still browser incompatibility • Java. Script is hard to maintain and debug u AJAX-enabled JSF components will help
Why AJAX? u Intuitive and natural user interaction • No clicking required • Mouse movement is a sufficient event trigger u "Partial screen update" replaces the "click, wait, and refresh" user interaction model • Only user interface elements that contain new information are updated (fast response) • The rest of the user interface remains displayed without interruption (no loss of operational context) u Data-driven (as opposed to page-driven) • UI is handled in the client while the server provides data u Asynchronous communication replaces "synchronous request/response model. " • A user can continue to use the application while the client program requests information from the server in the background • Separation of displaying from data fetching
Real-Life Examples of AJAX Apps u Google maps • http: //maps. google. com/ u Goolgle Suggest • http: //www. google. com/webhp? complete=1&hl=en u Net. Flix • http: //www. netflix. com/Browse. Selection? lnkctr=nmhbs u Gmail • http: //gmail. com/ u Yahoo Maps (new) • http: //maps. yahoo. com/ Many more are popping everywhere
Technologies Used In AJAX u Java. Script • Loosely typed scripting language • Java. Script function is called when an event in a page occurs • Glue for the whole AJAX operation u DOM • API for accessing and manipulating structured documents • Represents the structure of XML and HTML documents u CSS • Allows for a clear separation of the presentation style from the content and may be changed programmatically by Java. Script u XMLHttp. Request • Java. Script object that performs asynchronous interaction with the server
XMLHttp. Request u u Java. Script object Adopted by modern browsers • Mozilla™, Firefox, Safari, and Opera • Communicates with a server via standard HTTP GET/POST u XMLHttp. Request object works in the background for performing asynchronous communication with the backend server • Does not interrupt user operation
Server-Side AJAX Request Processing u Server programming model remains the same • It receives standard HTTP GETs/POSTs • Can use Servlet, JSP, JSF, . . . u With minor constraints • More frequent and finer-grained requests from client • Response content type can be text/xml u text/plain u text/json u text/javascript u
AJAX: Sample App
Steps of AJAX Operation u u u u 1. A client event occurs 2. An XMLHttp. Request object is created 3. The XMLHttp. Request object is configured 4. The XMLHttp. Request object makes an async. request 5. The Validate. Servlet returns an XML document containing the result 6. The XMLHttp. Request object calls the callback() function and processes the result 7. The HTML DOM is updated
XMLHttp. Request Properties u onreadystatechange • Set with an Java. Script event handler that fires at each state change u ready. State – current status of request • • • u 0 1 2 3 4 = = = uninitialized loading loaded interactive (some data has been returned) complete status • HTTP Status returned from server: 200 = OK
XMLHttp. Request Properties u response. Text • String version of data returned from the server u response. XML • XML document of data returned from the server u status. Text • Status text returned from server
AJAX: Another App
AJAX: Coding Involved u index. jsp Page Auto-Complete Form <form name="autofillform" action="autocomplete" method="get"> <input type="text" size="20" autocomplete="off" id="complete. Field" name="id" onkeyup="do. Completion(); "> <input id="submit_btn" type="Submit" value="Lookup Employee"> </form>
AJAX: Coding Involved (2) u Auto. Complete Event Handler function do. Completion() { if (complete. Field. value == "") { clear. Table(); } else { var url = "autocomplete? action=complete&id=" + escape(complete. Field. value); var req = init. Request(url); req. onreadystatechange = function() { if (req. ready. State == 4) { if (req. status == 200) { parse. Messages(req. response. XML); } else if (req. status == 204){ clear. Table(); } } }; req. open("GET", url, true); req. send(null); } }
AJAX: Coding Involved (3) u Auto. Complete XMLHttp. Request function init. Request(url) { if (window. XMLHttp. Request) { return new XMLHttp. Request(); } else if (window. Active. XObject) { is. IE = true; return new Active. XObject("Microsoft. XMLHTTP"); } }
AJAX: Coding Involved (4) u Auto. Complete Servlet do. Get() public void do. Get(Http. Servlet. Request request, Http. Servlet. Response response) throws IOException, Servlet. Exception {. . . String target. Id = request. get. Parameter("id"); Iterator it = employees. key. Set(). iterator(); while (it. has. Next()) { Employee. Bean e = (Employee. Bean)employees. get((String)it. next()); if ((e. get. First. Name(). to. Lower. Case(). starts. With(target. Id) || e. get. Last. Name(). to. Lower. Case(). starts. With(target. Id)) && !target. Id. equals("")) { sb. append("<employee>"); sb. append("<id>" + e. get. Id() + "</id>"); sb. append("<first. Name>" + e. get. First. Name() + "</first. Name>"); sb. append("<last. Name>" + e. get. Last. Name() + "</last. Name>"); sb. append("</employee>"); names. Added = true; } // if } // while if (names. Added) { response. set. Content. Type("text/xml"); response. set. Header("Cache-Control", "no-cache"); response. get. Writer(). write("<employees>" + sb. to. String() + "</employees>"); } else { response. set. Status(Http. Servlet. Response. SC_NO_CONTENT); } } // do. Get
AJAX: Coding Involved (5) u Processing the response function parse. Messages(response. XML) { clear. Table(); var employees = response. XML. get. Elements. By. Tag. Name("employees")[0]; if (employees. child. Nodes. length > 0) { complete. Table. set. Attribute("bordercolor", "black"); complete. Table. set. Attribute("border", "1"); } else { clear. Table(); } for (loop = 0; loop < employees. child. Nodes. length; loop++) { var employee = employees. child. Nodes[loop]; var first. Name = employee. get. Elements. By. Tag. Name("first. Name")[0]; var last. Name = employee. get. Elements. By. Tag. Name("last. Name")[0]; var employee. Id = employee. get. Elements. By. Tag. Name("id")[0]; append. Employee(first. Name. child. Nodes[0]. node. Value, last. Name. child Nodes[0]. node. Value, employee. Id. child. Nodes[0]. node. Value);
- Ang balagtasan ay nilika upang magbigay ng parangal kay
- Identical rhyme examples
- Process of compiling data in research
- Interpreted language vs compiled language
- Interpreted vs compiled language
- What is ruby
- Are shell scripts compiled or interpreted
- What is ruby
- “interpreted vs compiled language”
- Enalber
- Shin kubota jellyfish
- Soe definition floral design
- Why is angela wexler standing on a hassock
- Shins body
- Tertiary line of the ikebana representing earth
- Tung shin tcm doctor
- Shin sobue
- Shin nakamura chemical
- Shin inouye
- Dr. elizabeth shin
- Kim shin jo
- How to wrap a thumb with athletic tape
- Osi shin guards
- Perbedaan linear programming dan integer programming
- Definisi integer
- Greedy vs dynamic
- What is system program