Ajax Business Logic: Page Three text boxes, respectively, require the input surname, middle name and birthday. Two buttons handle get and post requests, displaying the results of the input.
Page: getandpostexample.html
<%@ page contenttype= "text/html; CHARSET=GBK "%>
<title>
Send page requests with Get and post
</title>
<script type= "Text/javascript" >
XMLHttpRequest objects
var xmlHttp;
Creating XMLHttpRequest Objects
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
Send parameter string
function createquerystring () {
Get a last Name
var firstName = document.getElementById ("FirstName"). Value;
Get the middle name
var middlename = document.getElementById ("MiddleName"). Value;
Get a birthday
var birthday = document.getElementById ("Birthday"). Value;
Constructing the request string
var quertstring = "Firstname=" + firstName + "&middlename=" + middlename
+ "&birthday=" + birthday;
return quertstring;
}
Handling GET Requests
function Dorequestusingget () {
Createxmlhttprequest ();
var querystring = "Getandpostexample?";
QueryString = querystring + createquerystring () + "×tamp=" + New Date (). GetTime ();
Xmlhttp.onreadystatechange = Handlestatechange;
Xmlhttp.open ("Get", querystring,true);
Xmlhttp.send (NULL);
}
Process POST Requests
function Dorequestusingpost () {
Createxmlhttprequest ();
var url = "getandpostexample?timestamp=" + New Date (). GetTime ();
var querystring = createquerystring ();
Xmlhttp.open ("POST", url,true);
Xmlhttp.onreadystatechange = Handlestatechange;
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded;");
Xmlhttp.send (querystring);
}
callback method
function Handlestatechange () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Parse return result
Parseresults ();
}
}
}
Parse return result
function Parseresults () {
var responsediv = document.getElementById ("Serverresponse");
if (Responsediv.haschildnodes ()) {
Responsediv.removechild (Responsediv.childnodes[0]);
}
Returns text constructs a text node
var responsetext = document.createTextNode (Xmlhttp.responsetext);
Responsediv.appendchild (ResponseText);
}
</script>
<body>
Enter your last name, middle name, and birthday:
<table>
<tbody>
<tr>
<td> Surname:</td>
<td><input type= "text" id= "FirstName"/>
</tr>
<tr>
<td> Middle Name:</td>
<td><input type= "text" id= "MiddleName"/>
</tr>
<tr>
<td> Birthday:</td>
<td><input type= "text" id= "Birthday"/>
</tr>
</tbody>
</table>
<form action= "#" >
<input type= "button" value= "Send Get Request"/>
<br/><br/>
<input type= "button" value= "send Post request"/>
</form>
<br/>
Server response:
<div id= "Serverresponse" >
</div>
</body>
Server-side processing
Getandpostexample.java
Import javax.servlet.*;
Import javax.servlet.http.*;
Import java.io.*;
Import java.util.*;
public class Getandpostexample
Extends HttpServlet {
private static final String Content_Type = "text/html;" CHARSET=GBK ";
Processing methods
protected void ProcessRequest (HttpServletRequest request,
HttpServletResponse response, String method) throws
Servletexception, IOException {
Set Response content Categories
Response.setcontenttype (Content_Type);
Get the parameters
String firstName = Request.getparameter ("FirstName");
String MiddleName = Request.getparameter ("MiddleName");
String birthday = Request.getparameter ("Birthday");
Create response text
String responsetext = "Hello" + firstName + "+ MiddleName +". Your birthday is "+ Birthday
+ "." + "[Reference method: + methods +]";
Send back to Browser
PrintWriter out = Response.getwriter ();
Out.println (ResponseText);
Close Write Stream
Out.close ();
}
Initialize Global Variables
public void Init () throws Servletexception {
}
Handling Get methods
public void doget (HttpServletRequest request, httpservletresponse response) throws
Servletexception, IOException {
ProcessRequest (Request,response, "get");
}
Handling Post Methods
public void DoPost (HttpServletRequest request, httpservletresponse response) throws
Servletexception, IOException {
ProcessRequest (Request,response, "POST");
}
Clean up resources
public void Destroy () {
}
}
Reference: Ajax Basics Tutorial Take notes.