Recently, I am idle. I just made a note of the technologies I have used before, so that I will be lazy and you will be happy.
The first step is to comment out the javascript version of ajax: ajax asynchronous refresh is mainly to splice the required conditions into strings and pass them into the background. After processing, the callback function is called directly to return the obtained data to the page, and display it. Because it is still on this page, you don't need to refresh the page. You can understand it. This article also uses encodeURI to encrypt the string and decode it in the class, some notes are provided in the source code. Get/post are two submission methods, but get submission is easy to garbled, so be sure to pay more attention.
Jsp page:
Copy codeThe Code is as follows:
<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/";
%>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Base href = "<% = basePath %>">
<Script type = "text/javascript">
Var xmlHttp;
Function createxmlHttpRequest (){
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest (); // IE7 +, FireFox, Opera, Safari, Chrome
} Else {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
}
Function test () {// get
// Obtain parameters
// Var unames = encodeURI (document. getElementById ("username "). value); // code java with new String (name. getBytes ("ISO8859-1"), "UTF-8") decoding
Var unames = encodeURI (document. getElementById ("username "). value); // The java.net. URLDecoder. decode (name, "UTF-8"); Decoding
Var pws = encodeURI (document. getElementById ("password"). value );
CreatexmlHttpRequest ();
XmlHttp. onreadystatechange = readyState;
// Function (){
// Alert (xmlHttp. readyState + "=" + xmlHttp. status); // judge the Request status
//}
XmlHttp. open ("get", "AjaxServlet1? Msg = gets & name = "+ unames +" & pwd = "+ pws +" & timeStamp = "+ new Date (). getTime (), true); // garbled characters may occur when the get method is submitted to Chinese. encodeURI ()/encodeURIComponent () converts Chinese to hexadecimal encoding and uses the string as the URI for encoding.
XmlHttp. send (null );
}
Function testp () {// post
// Obtain parameters
Var unames = document. getElementById ("username"). value;
Var pws = document. getElementById ("password"). value;
CreatexmlHttpRequest ();
XmlHttp. onreadystatechange = readyState;
XmlHttp. open ("post", "AjaxServlet1", true );
XmlHttp. setRequestHeader ("Content-type", "application/x-www-form-urlencoded ");
Var str = "msg = posts & name =" + unames + "& pwd =" + pws + "& timeStamp =" + new Date (). getTime ();
XmlHttp. send (str); // send can be used to transmit parameters.
}
Function readyState (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
Var msg = xmlHttp. responseText;
// Alert (msg );
Document. getElementById ("result"). innerHTML = msg;
}
}
}
</Script>
<Title> js asynchronous refresh </title>
</Head>
<Body>
<Center>
<Div id = "response">
</Div>
User: <input type = "text" name = "uname" id = "username"> <br>
Password: <input type = "text" name = "pw" id = "password"> <br>
<Input type = "button" name = "button" value = "get OK" onclick = "test ();"/>
<Input type = "button" name = "button" value = "post OK" onclick = "testp ();">
<Div id = "result">
</Div>
</Center>
</Body>
</Html>
Here is the servlet/action Java code:
Copy codeThe Code is as follows:
Package com. cstp. javascript;
Import java. io. IOException;
Import java. io. PrintWriter;
Import javax. servlet. ServletException;
Import javax. servlet. http. HttpServlet;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
@ SuppressWarnings ("serial ")
Public class AjaxServlet1 extends HttpServlet {
Public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
This. doPost (request, response );
}
Public void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Set the encoding to prevent garbled characters
Response. setCharacterEncoding ("UTF-8 ");
Request. setCharacterEncoding ("UTF-8 ");
// Receive Parameters
String msg = request. getParameter ("msg ");
If (msg. equals ("gets ")){
// String name = new String (request. getParameter ("name"). getBytes ("ISO8859-1"), "UTF-8"); // A decoding operation in java
String name = java.net. URLDecoder. decode (request. getParameter ("name"), "UTF-8"); // The decode page must be encoded twice and decoded in java
String pwd = request. getParameter ("pwd ");
System. out. println (name + "," + pwd );
PrintWriter out = response. getWriter ();
Out. println ("ajax responds to get and returns" + name + "," + pwd );
} Else if (msg. equals ("posts ")){
String name = new String (request. getParameter ("name"). getBytes ("UTF-8"), "UTF-8"); // A decoding operation in java
String pwd = request. getParameter ("pwd ");
System. out. println (name + "," + pwd );
PrintWriter out = response. getWriter ();
Out. println ("ajax responds to post and returns" + name + "," + pwd );
}
}
}
The above is the javascript version of ajax, and the following will also share with JQ friends who like jquery:
On the page:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Method ①
Function circum (lon, lat ){
$. Ajax ({
Url: "JQAjaxServlet? Method = jsons ",
ContentType: "application/x-www-form-urlencoded; charset = UTF-8 ",
Type: 'post ',
DataType: "json ",
Async: false,
Data: {// pass the parameter to the background
'Lon ': lon,
'Lat': lat
},
Success: function (data) {// receives the result returned by the background
Here, data is returned for the background. You can handle it as much as you like.
}
});
}
</Script>
Background: servlet/action
The same method is used to process data in a class.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
