xmlHttpRequest 用法。
/////靜態頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</title>
<script type="text/javascript">
var xmlHttp;
var stateID;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function createQueryString(id) {
stateID=id;
var qs = document.getElementById(id).value;
var queryString = "firstName=" + qs;
return queryString;
}
function doRequestPOST(id) {
createXMLHttpRequest();
var url = "GetAndPostExample?timeStamp="+ new Date().getTime();
////獲取傳進來的字符串
queryString= createQueryString(id);
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
////向服務器端發送請求
xmlHttp.send(queryString);
}
function handleStateChange() {
////判斷服務請求是否發送成功
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
parseResults();
}
}
}
function parseResults() {
////獲取返回函數的值,並綁定給對應的文本框
var responseText = document.createTextNode(xmlHttp.responseText);
document.getElementById(stateID.toString()).value=responseText.toString();
}
</script>
</head>
<body>
<h1>Enter your first name, middle name, and birthday:</h1>
<table>
<tbody>
<tr>
<td>First name:</td>
<td><input type="text" id="Name1"/>
<input type="text" id="Name2"/>
<input type="text" id="Name3"/>
<input type="text" id="Name4"/>
</tr>
</tbody>
</table>
<input type="button" value="reset" οnclick="doRequestPOST('Name1');"/>
<input type="button" value="reset" οnclick="doRequestPOST('Name2');"/>
<input type="button" value="reset" οnclick="doRequestPOST('Name3');"/>
<input type="button" value="reset" οnclick="doRequestPOST('Name4');"/>
<br/>
<h2>Server Response:</h2>
<input type="text" id="username" />
</body>
</html>
////後臺(servlet)代碼
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetAndPostExample extends HttpServlet {
protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {
//Set content type of the response to text/xml
response.setContentType("text/xml");
//Get the user's input
String firstName = request.getParameter("firstName");
//Create the response text
String responseText = firstName;
//Write the response back to the browser
PrintWriter out = response.getWriter();
out.println(responseText); //服務器迴應到瀏覽器
//Close the writer
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//Process the request in method processRequest
processRequest(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//Process the request in method processRequest
processRequest(request, response, "POST");
}
}
/////web.xml文件代碼
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>GetAndPostSample</servlet-name>
<servlet-class>GetAndPostExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetAndPostSample</servlet-name>
<url-pattern>/GetAndPostExample</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章