Session 11. Calling Servlets from Ajax. Lecture Objectives. Understand servlet response formats

Size: px

Start display at page:

Download "Session 11. Calling Servlets from Ajax. Lecture Objectives. Understand servlet response formats"

Duane Sparks
6 years ago
Views:

1 Session 11 Calling Servlets from Ajax 1 Lecture Objectives Understand servlet response formats Text Xml Html JSON Understand how to extract data from the XMLHttpRequest object Understand the cross domain issues when requesting servlet data 2 3/27/2014 1

2 Reference Reading & Reference Internet security same origin policy Cross origin resource sharing: 3 Ajax Summary Request to a server is enabled with the XMLHttpRequest object, which Specifies the details of the request Can run synchronously or asynchronously Has properties from which you can extract the response XMLHttpRequest response properties Metadata status, statustext, headers, etc. Text responsetext property XML responsexml (Document object) Structured data (e.g., arrays) sent as text and decoded using JSON.parse method 4 3/27/2014 2

3 JavaScript validation Client Side Validation function validate () { var f = document.getelementbyid(" message"); var t = document.getelementbyid(" "); if((echeck(t.value)==false)){ f.innerhtml="please enter a valid address"; t.focus(); else f.innerhtml=""; <td> <span class="highlight">*</span></td> <td><input id=" " size="35" class="textbox" type="text"onblur="validate ();"> <span> </span><span class="error" id=" message"> </span></td> 5 Ajax Validation in the Servlet Validation can be performed with a servlet call <td>company <span class="highlight">*</span></td> <td> <input id="company" name="1" size="35" class="textbox" type="text" onblur="validatecompany();"> <span> </span> <span class="error" id="companymessage"></span></td> function validatecompany() { var f = document.getelementbyid("companymessage"); var t = document.getelementbyid("company"); var url = " + t.value; req = new XMLHttpRequest(); req.open("get", url, true); req.onreadystatechange = companyvalidation; req.send(null); 6 3/27/2014 3

4 Policy Internet Same Origin Policy Policy disallow many legitimate requests permits scripts running on pages originating from the same site (scheme, hostname, and port number) to access each other's DOM with no specific restrictions Does not allow a page to receive data from a different domain Applies to XMLHttpRequest Browsers implement the policy differently (e.g., IE) You might encounter a status code of 0 instead of 200 if there is a mismatch of domains Domains you might encounter Servlet run in NetBeans localhost:8080 Html opened directly - null 7 Same Origin Policy Workarounds New http header resp.setheader("access-control-allow-origin", "null"); Draft standard Supported by Firefox, Safari, and Chrome Lists origins that may request a file HTML5 postmessage method JASONP 8 3/27/2014 4

5 Example: Servlet Validation Servlet can return simple text (not html) MIME type is text/plain Be careful about white space Println method in your servlet will include a carriage return/line feed Print method will not include extra text Error message returned from servlet 9 Client Code Company name sent to server function validatecompany() { var f = document.getelementbyid("companymessage"); var t = document.getelementbyid("company"); var url = + t.value; req = new XMLHttpRequest(); req.open("get", url, true); req.onreadystatechange = companyvalidation; req.send(null); function companyvalidation() { var f = document.getelementbyid("companymessage"); var t = document.getelementbyid("company"); if (req.readystate==4 && req.status==200){ if(req.responsetext!= "ok") { f.innerhtml=req.responsetext; t.focus(); else f.innerhtml=""; 10 3/27/2014 5

6 Comment on readystate Property if (req.readystate==4 && req.status==200){... Not good style to test hard-coded values (i.e., magic numbers) of readystate Constants available in XMLHttpRequest object, but not implemented uniformly in browsers 0 UNSENT 1 OPENED 2 HEADERS_RECEIVED 3 LOADING 4 - DONE 11 Server Code protected void processrequest(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setcontenttype("text/plain;charset=utf-8"); PrintWriter out = response.getwriter(); response.setheader("access-control-allow-origin", "null"); String c = request.getparameter("company"); if (c.equals("")) { out.print("please enter your company name."); else { out.print("ok"); Error message to be displayed in browser Html that calls this servlet is a local file (domain is null) 12 3/27/2014 6

7 Are We on Track? For your project, write the servlet code that will perform Ajax validation of the drop-down If the Please Select option is selected the error message below will display Hints The onsubmit is in your form element To prevent actual submission to the target, use: <form action=" method="post" name="frm" id="frm" onsubmit="return validatecountry()"> A return of false will prevent submission 13 Were We on Track? function validatecountry() { var f = document.getelementbyid("countrymessage"); var t = document.getelementbyid("country"); var url = " + t.value; req = new XMLHttpRequest(); req.open("get", url, false); req.send(null); return countryvalidation(); Synchronous request has no need to set the callback function function countryvalidation() { var f = document.getelementbyid("countrymessage"); var t = document.getelementbyid("country"); if (req.readystate==4 && req.status==200){ if(req.responsetext!= "ok") { f.innerhtml=req.responsetext; t.focus(); return false; else { f.innerhtml=""; return true; 14 3/27/2014 7

8 Were We on Track? protected void processrequest(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setcontenttype("text/plain;charset=utf-8"); PrintWriter out = response.getwriter(); response.setheader("access-control-allow-origin", "null"); String c = request.getparameter("country"); if (c.equals("")) { out.print("please enter your country name."); else { out.print("ok"); 15 Have You Satisfied the Objectives? Understand servlet response formats Text Xml Html JSON Understand how to extract text data from the XMLHttpRequest object Understand the cross domain issues when requesting servlet data 16 3/27/2014 8

Session 11. Ajax. Reading & Reference

Session 11. Ajax. Reading & Reference Session 11 Ajax Reference XMLHttpRequest object Reading & Reference en.wikipedia.org/wiki/xmlhttprequest Specification developer.mozilla.org/en-us/docs/web/api/xmlhttprequest JavaScript (6th Edition) by