1.实例功能
两数相加得结果的例子
2.代码
①sum.html
<html><head>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function add(){
var url="add";
var params="num1="+num1.value+"&num2="+num2.value;
sendRequest(url,params,‘POST’,showresult);//向servlet发送请求
}
function showresult(){
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var info=httpRequest.responseText;//从servlet获得结果
result.innerHTML=info;//将结果显示在div中。
}
}
}
</script></head>
<body>
num1:<input type="text" name="num1" /><br/>
num2:<input type="text" name="num2" /><br/>
<input type="button" value="求和 " οnclick="add()"/>
<div id="result"></div>
</body>
</html>
②AddServlet(地址为/add)
(2)方法二
public void doPost(…request, … response)
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
int num1=Integer.parseInt(request.getParameter("num1"));
int num2=Integer.parseInt(request.getParameter("num2"));
String result="和为:"+(num1+num2);
out.print(result);//输出结果
}
3.说明
用户在输入页面中输入数据---通过XMLHttpRequest对象(由JavaScript创建)向Servlet发送请求(当前页面不变,且在响应到来前不影响用户在当前页面的其他操作)—通过XMLHttpRequest对象获得Servlet结果并显示在当前页面(页面只刷新要显示结果的那块)。当前地址自始至终都停留在输入页面。
方式二与桌面程序的运行方式很相似。