AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and...
Transcript of AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and...
![Page 2: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/2.jpg)
Outline
• AJAX• Program
USC CSCI 201L
![Page 3: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/3.jpg)
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
![Page 4: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/4.jpg)
My First AJAX1 <!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
![Page 5: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/5.jpg)
AJAX/JSP Form Validation1 <!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
![Page 6: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/6.jpg)
AJAX/JSP Form Validation1 <%-- 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
![Page 7: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/7.jpg)
AJAX/JSP Form Action1 <%-- 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
![Page 8: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/8.jpg)
AJAX/Servlet Form Validation1 <!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
![Page 9: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/9.jpg)
AJAX/Servlet Form Validation1 @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
![Page 10: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/10.jpg)
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
![Page 11: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/11.jpg)
jQuery/Servlet Form Validation1 <!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
![Page 12: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/12.jpg)
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
![Page 13: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/13.jpg)
Outline
• AJAX• Program
USC CSCI 201L
![Page 14: AJAX and jQuery - University of Southern Californiacsci201/lectures/Lecture7/AJAX.pdf · AJAX and jQuery CSCI 201. Principles of Software Development. Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu](https://reader031.fdocuments.net/reader031/viewer/2022022117/5c9e109488c993b4368bfaec/html5/thumbnails/14.jpg)
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 submittedotherwise.
▪ Put a message next to each field that is notformatted correctly
USC CSCI 201L 14/14• Program