目标:以异步方式实现两个整数的和:
在文本框中输入:113和110 在下方会显示这两个数的和:223
方式1:以GET方式请求:
客户端代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax</title>
<script type="text/javascript">
/*
* Ajax中的一个重要对象是:XMLHttpRequest
*/
//声明一个空对象以接收XMLHttpRequest对象
var xmlHttpRequest = null;
function ajaxSubmit()
{
if(window.activeXObject)//IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)//除IE意外的其他浏览器实现
{
xmlHttpRequest = new XMLHttpRequest();
}
if(null != xmlHttpRequest)
{
//得到两个文本框的值
var value1ID = document.getElementById("value1ID").value;
var value2ID = document.getElementById("value2ID").value;
//使用ajax准备向服务器端发送请求:
xmlHttpRequest.open("GET", "/js_demo1/AjaxServlet?v1=" + value1ID + "&v2=" + value2ID, true);
//关联好ajax的回调函数(类似事件监听)
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服务器发送数据
xmlHttpRequest.send(null);
}
}
function ajaxCallback()
{
if(xmlHttpRequest.readyState == 4)
{
if(xmlHttpRequest.status == 200)
{
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
}
</script>
</head>
<body>
请输入两个整数:<br/>
<input type="text" id="value1ID"/><br/>
<input type="text" id="value2ID"/><br/>
<input type="button" value="get content from sever" οnclick="ajaxSubmit();"/>
<div id="div1"></div>
</body>
</html>
服务器端:
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String v1 = request.getParameter("v1");
String v2 = request.getParameter("v2");
String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "on-cache");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println("server");
out.println(v3);
out.close();
}
}
web.xml代码和上一篇的一样,这里就在说明了!
方式2,:用POST方式实现请求:
依照顺序在上面代码进行改写:
客户端:
//使用ajax准备向服务器端发送请求:
xmlHttpRequest.open("POST", "/js_demo1/AjaxServlet", true);
//关联好ajax的回调函数(类似事件监听)
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服务器发送数据,使用POST方式提交,必须加上下面一行
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("v1=" + value1ID + "&v2=" + value2ID);
服务器端:
添加如下代码:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}