Scribd Logo
Upload

Welcome to Scribd!

  • 61 views

    Ajax and Jquery: Jeffrey Miller, PH.D

    Uploaded by

    John Mathias
    The document discusses AJAX and jQuery. It begins with an outline describing what AJAX is and providing a basic "My First AJAX" program example. It then discusses using AJAX with JSP forms for validation. Several jQuery examples are also provided for AJAX form validation using servlets. Additional information is given on learning more about AJAX and jQuery. The document concludes with an assignment to write a program that validates a form fields using AJAX without form submission.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Ajax and Jquery: Jeffrey Miller, PH.D

    Uploaded by

    John Mathias
    61 views14 pages
    The document discusses AJAX and jQuery. It begins with an outline describing what AJAX is and providing a basic "My First AJAX" program example. It then discusses using AJAX with JSP forms for validation. Several jQuery examples are also provided for AJAX form validation using servlets. Additional information is given on learning more about AJAX and jQuery. The document concludes with an assignment to write a program that validates a form fields using AJAX without form submission.

    Original Description:

    CSCI 201

    Original Title

    Ajax

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses AJAX and jQuery. It begins with an outline describing what AJAX is and providing a basic "My First AJAX" program example. It then discusses using AJAX with JSP forms for validation. Several jQuery examples are also provided for AJAX form validation using servlets. Additional information is given on learning more about AJAX and jQuery. The document concludes with an assignment to write a program that validates a form fields using AJAX without form submission.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    61 views14 pages

    Ajax and Jquery: Jeffrey Miller, PH.D

    Uploaded by

    John Mathias
    The document discusses AJAX and jQuery. It begins with an outline describing what AJAX is and providing a basic "My First AJAX" program example. It then discusses using AJAX with JSP forms for validation. Several jQuery examples are also provided for AJAX form validation using servlets. Additional information is given on learning more about AJAX and jQuery. The document concludes with an assignment to write a program that validates a form fields using AJAX without form submission.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 14

    AJAX and jQuery

    CSCI 201
    Principles of Software Development

    Jeffrey Miller, Ph.D.


    jeffrey.miller@usc.edu
    Outline
    • AJAX
    • Program

    USC CSCI 201L


    AJAX
    ▪ AJAX stands for Asynchronous JavaScript and XML
    ▪ AJAX uses a combination of
    › A browser built-in XMLHttpRequest object to request data from a web server
    › JavaScript and HTML DOM to display the data
    ▪ AJAX allows for just part of a page to be reloaded with direct access
    to the server
    › There is another JavaScript API called fetch that performs similarly to AJAX

    USC CSCI 201L 3/14


    My First AJAX
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <script>
    5 function loadDoc() {
    6 var xhttp = new XMLHttpRequest();
    7 xhttp.onreadystatechange = function() {
    8 document.getElementById("demo").innerHTML = this.responseText;
    9 };
    10 xhttp.open("GET", "csci201.txt", true);
    11 xhttp.send();
    12 }
    13 </script>
    14 </head>
    15 <body>
    16 <div id="demo">
    17 <h1>The Magic of AJAX</h1>
    18 <button type="button" onclick="loadDoc()">Click To Be Amazed</button>
    19 </div>
    20 </body>
    21 </html>

    USC CSCI 201L 4/14


    AJAX/JSP Form Validation
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>Sample Form</title>
    5 <script>
    6 function validate() {
    7 var xhttp = new XMLHttpRequest();
    8 xhttp.open("GET", "validate.jsp?fname=" + document.myform.fname.value +
    9 "&lname=" + document.myform.lname.value, false);
    10 xhttp.send();
    11 if (xhttp.responseText.trim().length > 0) {
    12 document.getElementById("formerror").innerHTML = xhttp.responseText;
    13 return false;
    14 }
    15 return true;
    16 }
    17 </script>
    18 </head>
    19 <body>
    20 <form name="myform" method="GET" action="form.jsp" onsubmit="return validate();">
    21 <div id="formerror"></div>
    22 First Name <input type="text" name="fname" /><br />
    23 Last Name <input type="text" name="lname" /><br />
    24 <input type="submit" name="submit" value="Submit" />
    25 </form>
    26 </body>
    27 </html>

    USC CSCI 201L 5/14


    AJAX/JSP Form Validation
    1 <%-- validate.jsp --%>
    2 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    3 pageEncoding="ISO-8859-1"%>
    4 <%
    5 String fname = request.getParameter("fname");
    6 String lname = request.getParameter("lname");
    7 System.out.println(fname + "." + lname);
    8 if (fname == null || fname.length() == 0) {
    9 %>
    10 <font color="red"><strong>First name needs a value.</strong></font><br />
    11 <%
    12 }
    13 if (lname == null || lname.length() == 0) {
    14 %>
    15 <font color="red"><strong>Last name needs a value.</strong></font><br />
    16 <%
    17 }
    18 %>

    USC CSCI 201L 6/14


    AJAX/JSP Form Action
    1 <%-- form.jsp --%>
    2 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" %>
    3 <!DOCTYPE html>
    4 <html>
    5 <head>
    6 <title>Form Data Processing</title>
    7 </head>
    8 <body>
    9 <%
    10 String fname = request.getParameter("fname");
    11 String lname = request.getParameter("lname");
    12 %>
    13 <h1>Submitted Data</h1>
    14 First Name:<strong><%= fname %></strong><br />
    15 Last Name:<strong><%= lname %></strong>
    16 </body>
    17 </html>

    USC CSCI 201L 7/14


    AJAX/Servlet Form Validation
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>AJAX Form</title>
    5 <script>
    6 function validateUsername() {
    7 var xhttp = new XMLHttpRequest();
    8 xhttp.open("POST", "Validate", true);
    9 xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    10 xhttp.onreadystatechange = function() {
    11 document.getElementById("usernameMsg").innerHTML = this.responseText;
    12 }
    13 xhttp.send("field=username&username=" + document.myform.username.value);
    14 }
    15 function validatePassword() {
    16 var xhttp = new XMLHttpRequest();
    17 xhttp.open("GET", "Validate?field=password&password=" + document.myform.pass.value, true);
    18 xhttp.onreadystatechange = function() {
    19 document.getElementById("passwordMsg").innerHTML = this.responseText;
    20 }
    21 xhttp.send();
    22 }
    23 </script>
    24 </head>
    25 <body>
    26 <form name="myform" action="SubmitServlet" method="POST">
    27 Username <input type="text" name="username" value="jeff" onblur="validateUsername();"/>
    28 <strong><div id="usernameMsg"></div></strong><br />
    29 Password <input type="password" name="pass" value="test" onblur="validatePassword();"/>
    30 <strong><div id="passwordMsg"></div></strong><br />
    31 <input type="submit" name="submit" value="Authenticate" />
    32 </form>
    33 </body>
    34 </html>

    USC CSCI 201L 8/14


    AJAX/Servlet Form Validation
    1 @WebServlet("/Validate")
    2 public class Validate extends HttpServlet {
    3 private static final long serialVersionUID = 1L;
    4
    5 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    6 String fieldToValidate = request.getParameter("field");
    7 PrintWriter out = response.getWriter();
    8 if(fieldToValidate != null && fieldToValidate.equals("username")) {
    9 String username = request.getParameter("username");
    10 if(username != null && username.length() > 0) {
    11 out.println("Valid Username");
    12 }
    13 else {
    14 out.println("Invalid Username");
    15 }
    16 }
    17 if(fieldToValidate != null && fieldToValidate.equals("password")) {
    18 String password = request.getParameter("password");
    19 if(password != null && password.length() > 0) {
    20 out.println("Valid Password");
    21 }
    22 else {
    23 out.println("Invalid Password");
    24 }
    25 }
    26 }
    27 }

    USC CSCI 201L 9/14


    jQuery
    ▪ Description from jQuery website

    › You need to include a .js file in your code, and then jQuery can be used
    › http://jquery.com

    10/14
    jQuery/Servlet Form Validation
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>AJAX Form</title>
    5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    6 <script>
    7 function validateUsername() {
    8 $.ajax({
    9 url: "Validate",
    10 data: {
    11 username: document.myform.username.value,
    12 field: "username"
    13 },
    14 success: function( result ) {
    15 $( "#usernameMsg").html(result);
    16 }
    17 });
    18 }
    19 function validatePassword() {
    20 $.ajax({
    21 url: "Validate",
    22 data: {
    23 password: document.myform.pass.value,
    24 field: "password"
    25 },
    26 success: function( result ) {
    27 $( "#passwordMsg").html(result);
    28 }
    29 });
    30 }
    31 </script>
    32 </head>
    33 <body>
    34 <form name="myform" action="SubmitServlet" method="POST">
    35 Username <input type="text" name="username" value="jeff" onblur="validateUsername();"/>
    36 <strong><div id="usernameMsg"></div></strong>
    37 <br />
    38 Password <input type="password" name="pass" value="test" onblur="validatePassword();"/>
    39 <strong><div id="passwordMsg"></div></strong>
    40 <br />
    41 <input type="submit" name="submit" value="Authenticate" />
    42 </form>
    43 </body>
    44 </html>

    USC CSCI 201L 11/14


    More AJAX
    ▪ For more information on AJAX
    › Go to http://www.w3schools.com/js/js_ajax_intro.asp
    › View the source of any web page to see the JavaScript that was
    used on that page
    › Go through one of many tutorials you find online

    12/14
    Outline
    • AJAX
    • Program

    USC CSCI 201L


    Program
    ▪ Write a program that validates the form based on rules for different types of fields, but
    have it to do this through AJAX without submitting the form if there are any errors
    › Email should have an @ with at least one . After
    › Passwords should be at least 8 characters long with at least 1 number
    › Birthday must be a date in the past
    › New Student must have one option selected
    › College must have a value
    › Favorite color must have a value other than Black
    › Terms and Conditions must be checked
    ▪ Do not allow the form to be submitted
    otherwise.
    ▪ Put a message next to each field that is not
    formatted correctly

    • Program USC CSCI 201L 14/14

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy