CSCI 6962: Server-side Design and Programming Introduction to AJAX.

Slides:



Advertisements
Similar presentations
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 16 Introduction to Ajax.
Advertisements

 2002 Prentice Hall. All rights reserved. Chapter 9: Servlets Outline 9.1 Introduction 9.2 Servlet Overview and Architecture Interface Servlet and.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
9. AJAX & RIA. 2 Motto: O! call back yesterday, bid time return. — William Shakespeare.
JavaScript Forms Form Validation Cookies CGI Programs.
19-Jun-15 Ajax. The hype Ajax (sometimes capitalized as AJAX) stands for Asynchronous JavaScript And XML Ajax is a technique for creating “better, faster,
Chapter 11 ASP.NET JavaScript, Third Edition. 2 Objectives Learn about client/server architecture Study server-side scripting Create ASP.NET applications.
1 JavaScript & AJAX CS , Spring JavaScript.
CSCI 6962: Server-side Design and Programming History and Background.
Chapter 6 DOJO TOOLKITS. Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type.
Christopher M. Pascucci Basic Structural Concepts of.NET Browser – Server Interaction.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST JavaScript Validating Form Data with JavaScript.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Client-Side programming with JavaScript 3
JavaScript Form Validation
CSCI 6962: Server-side Design and Programming Course Introduction and Overview.
Introduction to AJAX AJAX Keywords: JavaScript and XML
Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.
JavaScript & jQuery the missing manual Chapter 11
Chapter 3 Using Validation Controls. What is a Validation Control? A control that validates the value in another control Renders as an HTML tag with an.
CSCI 6962: Server-side Design and Programming Course Introduction and Overview.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
CSCI 6962: Server-side Design and Programming JDBC Database Programming.
ASP.NET + Ajax Jesper Tørresø ITNET2 F08. Ajax Ajax (Asynchronous JavaScript and XML) A group of interrelated web development techniques used for creating.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.
AJAX and Java ISYS 350. AJAX Asynchronous JavaScript and XML: – Related technologies: JavaScript, Document Object Model, XML, server-side script such.
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
Intro to Ajax Fred Stluka Jan 25, /25/2006Intro to AjaxFred Stluka2 What is Ajax? "Asynchronous JavaScript and XML" New name for an old technique:
JSP Java Server Pages Softsmith Infotech.
Web Programming: Client/Server Applications Server sends the web pages to the client. –built into Visual Studio for development purposes Client displays.
CSCI 6962: Server-side Design and Programming Introduction to Java Server Faces.
06/10/2015AJAX 1. 2 Introduction All material from AJAX – what is it? Traditional web pages and operation Examples of AJAX use Creating.
CSCI 6962: Server-side Design and Programming Introduction to Active Server Pages.
CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP.
Using Client-Side Scripts to Enhance Web Applications 1.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Lecture 9: AJAX, Javascript review..  AJAX  Synchronous vs. asynchronous browsing.  Refreshing only “part of a page” from a URL.  Frameworks: Prototype,
AJAX Compiled from “AJAX Programming” [Sang Shin] (Asynchronous JavaScript and XML)
Java server pages. A JSP file basically contains HTML, but with embedded JSP tags with snippets of Java code inside them. A JSP file basically contains.
Rails & Ajax Module 5. Introduction to Rails Overview of Rails Rails is Ruby based “A development framework for Web-based applications” Rails uses the.
Introduction to JavaScript CS101 Introduction to Computing.
Asynchronous Javascript And XML AJAX : an introduction UFCEUS-20-2 : Web Programming.
IS-907 Java EE World Wide Web - Overview. World Wide Web - History Tim Berners-Lee, CERN, 1990 Enable researchers to share information: Remote Access.
Chapter 16: Ajax-Enabled Rich Internet Applications with XML and JSON TP2543 Web Programming Mohammad Faidzul Nasrudin.
 Previous lessons have focused on client-side scripts  Programs embedded in the page’s HTML code  Can also execute scripts on the server  Server-side.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
SE-2840 Dr. Mark L. Hornick 1 Introduction to Ajax Asynchronous Javascript And XML.
IT533 Lectures ASP.NET AJAX.
AJAX. Overview of Ajax Ajax is not an API or a programming language Ajax aims to provide more responsive web applications In normal request/response HTTP.
JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
AJAX CS456 Fall Examples Where is AJAX used? Why do we care?
JavaScript, Sixth Edition Chapter 11 Updating Web Pages with Ajax.
AJAX. Objectives Understand and apply AJAX Using AJAX in DOJO library.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
CSE 154 Lecture 11: AJAx.
Not a Language but a series of techniques
XMLHttp Object.
CSE 154 Lecture 11: AJAx.
CSE 154 Lecture 22: AJAX.
ISC440: Web Programming 2 AJAX
JavaScript & jQuery AJAX.
Chengyu Sun California State University, Los Angeles
Lecture 12: The Fetch Api and AJAx
Chengyu Sun California State University, Los Angeles
Chengyu Sun California State University, Los Angeles
Presentation transcript:

CSCI 6962: Server-side Design and Programming Introduction to AJAX

Client/Server Model Response is entire web page Very inefficient –High network costs –Must be loaded into browser and rendered Problem: Browser itself cannot get any data from server without requesting entire page Request ClientServer Response Large Document

AJAX Model Based on JavaScript running in browser –JavaScript code sends data to server, reads response –Response is simple data instead of entire page –Modifies page without re-rendering it completely –AJAX: Asynchronous JavaScript and XML Request Web Page Server Response JavaScript Small Data

XMLHttpRequest Object XMLHttpRequest object acts as “link” to server –Sends request to given URL (including “form data”) –Allows access to status of request –Acts as reference to data sent back from server as response Server JavaScript in Browser XMLHttpRequest

XMLHttpRequest Object XMLHttpRequest object represented differently on different browsers –Microsoft browsers represent as ActiveX –Other browsers support directly Must use “browser safe” JavaScript to create –Provide method to check capabilities and return object –Place declaration of XMLHttpRequest object directly in JavaScript so object created automatically

XMLHttpRequest Object Will use this object in code

Example “Greeting” example –Reads name from text element –Sends to getGreeting servlet –Reads response –Displays in another text element username=John Text element getGreeting Server JavaScript Hello John!

JavaScript Page Structure Button contains onClick() call to JavaScript greet() function

Opening Link to Server Syntax: request.open(method, URL, asynchronous); XMLHttpRequest object created previously GET or POST (usually POST ) true if asynchronous, false otherwise The URL of the server, including the servlet name and any parameters

Adding Parameters to URL Data passed to server in form of request Extract information from form (using JavaScript/DOM) Append to URL to pass to server Open that URL URL Parameters appended form.username.value

Adding Parameters to URL Form name = “form” Field name = “username” Extract the value of the username field of the form form Append to request in name=value format

Sending Request/Receiving Response Send request to server: requestObject.send(); Get response back from server as string: result = requestObject.responseText; Note: These commands must be in JavaScript try/catch block in case no access to server

Manipulating Page Use response to then manipulate page using JavaScript/ Document Object Model –Form element values –Document properties –Inserting new content…

Creating Content at the Server Create servlet to handle request –Gets data from request as before Writes result to response object –Create printWriter to response object using getWriter() –Write string to printWriter using print(String) method

Asynchronous Access Getting response from server may take time –Slow network access, lengthy response … Continue with other tasks while waiting for response –Spawn separate asynchronous process to handle response when it arrives Get information from form Open request to server Send request Continue other tasks (user interface, animation,etc.) Wait for response When response received, handle it (possibly changing page

Asynchronous Access Set asynchronous parameter to true in open request.onreadystatechange defines function to be called by asynchronous process request.onreadystatechange = functionName Send request request.onreadystatechange = functionName Continue other tasks (user interface, animation,etc.) function functionName(){ Wait for response When response received, handle it }

Asynchronous Access

Status Checking Can track progress of response –Keep user up to data on status request.readystate –Returns number indicating status of request 1 (loading) Request object created, but send method not called 2 (loaded) send method called, but response not yet available 3 (interactive) Some data received, and responseText will give current partial results 4 (completed) All data received

Status Checking Display message while waiting Display response when loaded

Validation Problem: Validation costly in client/server model –Single error requires reload of entire page AJAX solution: –Use AJAX to send form data to server for validation –Receive any error messages as response –Submit form only if no errors AJAX in browser Server Validation servlet Next page JSP form data errors form submission next page

Validation Client-side validation –Form can call function when SUBMIT button pressed –If function returns false, form not submitted function validateFunction() { validate form data if (form valid) return true; else return false; }

Validation Validation outline using AJAX: function validate() { var ok = true; // Any errors yet? for (all elements on form we must validate) { append form data to URL send request to validation servlet for that data response = request.responseText; if (response != “”) { ok = false; display error message in response } } return ok; }

Validation Must validate quantity entered by user So call validateQuantity before form submitted

Validation If no errors, return empty string Do validation checks and create appropriate error message Send message back to client

Validation Get quantity from form and submit to servlet If no error message returned, return true (allows form submit) Otherwise, display error message and return false (prevents form submit)

Timed Events Appearance: “Continuous feed” from server –Form field regularly updated by server AJAX Implementation: –Timer in JavaScript calls function at regular intervals –Function calls server-side servlet for current data –Displays current data on form

Timer Events Simple example: Server returns random number every time called by a client

Timer Events Create timer object in JavaScript Attach timer to JavaScript function: window.setInterval(functionName, interval); Initialize inside function called when page loaded function intitializerFunction() { window.setInterval(functionName, interval); } … Function to call at regular intervals Interval in miliseconds

Timer Events Field where “feed” displayed startTimer called when page loaded readFeed called every second (1000 ms) timer object declared globally

Timer Events Servlet creates illusion of “real-time” data –Get input from sensors, etc. at regular intervals –Based on data submitted asynchronously by other users (online gaming, etc.) AJAX in browser Server Servlet Game database request data about state of game moves change game state database game state Other players Other players

Handling Lack of JavaScript Client browser must have JavaScript enabled for AJAX to work –Not always true (mobile browsers, etc.) Must still give some response if no AJAX –Submit form data using standard client-server model –Send entire page back as response

Handling Lack of JavaScript Create a “backup” page on server to call if AJAX not supported:

Handling Lack of JavaScript Call that page when form submitted as action Also call JavaScript AJAX function using onSubmit (as in validation example) –Button must now be type=“submit”

Handling Lack of JavaScript JavaScript function onSubmit() calls returns false –If JavaScript enable, server call prevented –Otherwise, server call made by default