下面我来详细讲解“javascript请求servlet实现ajax示例(分享)”的完整攻略。
什么是 Ajax?
Ajax 指的是一种创建交互式、快速动态网页的技术。利用 Ajax,在不重新加载整个页面的情况下,实现局部更新数据的功能,并且不会打断用户正在进行的操作。
实现 Ajax 的方式
实现 Ajax 的方式有很多,其中比较典型的方式就是使用 JavaScript 和 Servlet 进行交互。
JavaScript 用于在页面上发送请求和获取响应,而 Servlet 则负责处理请求并返回响应结果。
JavaScript 请求 Servlet
下面,我们就来讲一下如何使用 JavaScript 请求 Servlet。
代码示例:
// 创建 XMLHTTPRequest 对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 设置回调函数
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 处理返回的数据
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
}
// 发送请求
xmlhttp.open("GET", "servlet_url", true);
xmlhttp.send();
上面这段代码中,我们首先创建了 XMLHTTPRequest 对象,然后设置了回调函数,回调函数里面处理请求并返回的数据。
接着,我们使用 open() 方法设置请求方式为 GET,请求的 URL 为 servlet_url,并且设置异步请求为 true。最后使用 send() 方法发送请求。
Servlet 处理请求
在 Servlet 中,我们通过 doGet() 或 doPost() 方法处理请求,并返回响应结果。
代码示例:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应内容类型
response.setContentType("text/html;charset=UTF-8");
// 处理请求
PrintWriter out = response.getWriter();
out.println("Hello World!");
}
上面这段代码中,我们首先使用 setContentType() 方法设置响应内容类型为 text/html,编码为 UTF-8,然后在 getWriter() 方法中输出响应结果,最后将响应发送给客户端。
示例说明
接下来,我们通过两个示例来演示如何使用 JavaScript 请求 Servlet。
示例一:计算两数之和
要求:用户输入两个数字,并且点击按钮计算两数之和。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 示例</title>
<script type="text/javascript">
function sum() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "sum?q=" + num1 + "&p=" + num2, true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="text" id="num1"> +
<input type="text" id="num2">
<button onclick="sum()">计算</button><br>
结果:<span id="result"></span>
</body>
</html>
上面这段代码中,我们创建了两个输入框和一个按钮,当用户点击按钮时,会调用 sum() 方法进行运算。
在 sum() 方法中,我们首先获取用户输入的两个数字,并且创建了一个 XMLHttpRequest 对象,然后设置了回调函数。在回调函数中,我们将服务器返回的结果输出到页面上。
最后,我们使用 open() 方法设置请求方式为 GET,并且将用户输入的两个数字作为参数传递给 Servlet。最后使用 send() 方法发送请求。
在 Servlet 中,我们获取了用户输入的两个数字,并且将它们相加作为响应结果返回给客户端。
代码示例:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应内容类型
response.setContentType("text/html;charset=UTF-8");
// 处理请求
int num1 = Integer.parseInt(request.getParameter("q"));
int num2 = Integer.parseInt(request.getParameter("p"));
int sum = num1 + num2;
PrintWriter out = response.getWriter();
out.println(sum);
}
示例二:查询城市天气
要求:用户输入城市名称,并且点击按钮查询该城市的天气状况。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 示例</title>
<script type="text/javascript">
function query(city) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "weather?q=" + city, true);
xmlhttp.send();
}
function showResult() {
var city = document.getElementById("city").value;
query(city);
}
</script>
</head>
<body>
城市:<input type="text" id="city">
<button onclick="showResult()">查询</button><br>
天气:<span id="result"></span>
</body>
</html>
上面这段代码中,我们创建了一个输入框和一个按钮,当用户点击按钮时,会调用 showResult() 方法进行查询。
在 showResult() 方法中,我们首先获取用户输入的城市名称,并且调用 query() 方法进行查询。
在 query() 方法中,我们创建了一个 XMLHttpRequest 对象,然后设置了回调函数。在回调函数中,我们将服务器返回的结果输出到页面上。
最后,我们使用 open() 方法设置请求方式为 GET,并且将用户输入的城市名称作为参数传递给 Servlet。最后使用 send() 方法发送请求。
在 Servlet 中,我们获取了用户输入的城市名称,并且使用一个简单的判断语句,返回该城市当前的天气状况。
代码示例:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应内容类型
response.setContentType("text/html;charset=UTF-8");
// 处理请求
String city = request.getParameter("q");
String result = "";
if(city.equals("北京")) {
result = "多云";
} else if(city.equals("上海")) {
result = "雨";
} else if(city.equals("广州")) {
result = "晴";
}
PrintWriter out = response.getWriter();
out.println(result);
}
以上就是“javascript请求servlet实现ajax示例(分享)”的完整攻略,希望能对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript请求servlet实现ajax示例(分享) - Python技术站