使用原生AJAX完成任意异步交互效果servlet部分
时间: 2023-10-15 17:08:29 浏览: 39
假设我们要完成一个简单的异步交互效果:点击按钮后,从服务器获取一条随机的名言警句并在页面上显示。下面是使用原生AJAX和Java Servlet实现该效果的代码。
1. 创建一个Java Servlet类,名为QuoteServlet,用于处理AJAX请求并返回名言警句。
```java
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class QuoteServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private String[] quotes = {
"The greatest glory in living lies not in never falling, but in rising every time we fall.",
"The way to get started is to quit talking and begin doing.",
"Your time is limited, don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.",
"If life were predictable it would cease to be life, and be without flavor.",
"If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.",
};
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
out.print(getRandomQuote());
out.flush();
}
private String getRandomQuote() {
Random random = new Random();
int index = random.nextInt(quotes.length);
return quotes[index];
}
}
```
2. 在web.xml中配置Servlet,使其能够被访问。
```xml
<servlet>
<servlet-name>QuoteServlet</servlet-name>
<servlet-class>QuoteServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QuoteServlet</servlet-name>
<url-pattern>/quote</url-pattern>
</servlet-mapping>
```
3. 在HTML页面中添加一个按钮和一个用于显示随机名言警句的文本框。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Quote Generator</title>
</head>
<body>
<h1>Random Quote Generator</h1>
<button id="get-quote">Get a quote</button>
<br><br>
<textarea id="quote-text" rows="5" cols="60" readonly></textarea>
</body>
</html>
```
4. 使用JavaScript代码监听按钮点击事件,并使用XMLHttpRequest对象从服务器获取名言警句。
```javascript
var button = document.getElementById("get-quote");
var quoteText = document.getElementById("quote-text");
button.addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "quote", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
quoteText.value = xhr.responseText;
}
};
xhr.send();
});
```
以上就是使用原生AJAX完成任意异步交互效果的完整代码。当用户点击“Get a quote”按钮时,JavaScript代码会向服务器发送一个AJAX请求,并在获取到响应后将随机名言警句显示在文本框中。