本篇文章為大家展示了如何在AJAX中使用 Servlet實現數據異步交互，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
首先，導入json所需要的6個包
下載鏈接：JSONObjectjar_jb51.rar
總的目錄：
前端頁面：
首先是一個輸入框：
<input type="text" id="keyword" name="keyword" onkeyup="getContents()">
onkeyup表示按下鍵盤時的操作
javascript：
<script type="text/javascript">
//全局xmlHttp對象
var xmlHttp;
//獲得xmlHttp對象
function createXMLHttp() {
//對于大多數瀏覽器適用
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//考慮瀏覽器的兼容性
if (window.ActiveXObject) {
xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
if (!xmlHttp) {
xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回調函數
function callback() {
//4代表完成
if(xmlHttp.readyState == 4){
//200代表服務器響應成功，404代表資源未找到，500服務器內部錯誤
if(xmlHttp.status == 200){
//交互成功獲得響應的數據，是文本格式
var result = xmlHttp.responseText;
//解析獲得的數據
var json = eval("("+ result +")");
//獲得數據之后，就可以動態的顯示數據了，把數據顯示到輸入框下面
alert(json);
}
}
}
//獲得輸入框的內容
function getContents(){
//首先獲得用戶的輸入內容，這里獲得的是一個結點
var content = document.getElementById("keyword");
if(content.value ==""){
return;
}
//向服務器發送內容，用到XmlHttp對象
xmlHttp = createXMLHttp();
//給服務器發送數據，escape()不加中文會有問題
var url = "search?keyword=" + escape(content.value);
//true表示js的腳本會在send()方法之后繼續執行而不會等待來自服務器的響應
xmlHttp.open("GET",url,true);
//xmlHttp綁定回調方法，這個方法會在xmlHttp狀態改變的時候調用,xmlHttp狀態有0-4，
//我們只關心4，4表示完成
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
</script>總的index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//全局xmlHttp對象
var xmlHttp;
//獲得xmlHttp對象
function createXMLHttp() {
//對于大多數瀏覽器適用
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//考慮瀏覽器的兼容性
if (window.ActiveXObject) {
xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
if (!xmlHttp) {
xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回調函數
function callback() {
//4代表完成
if(xmlHttp.readyState == 4){
//200代表服務器響應成功，404代表資源未找到，500服務器內部錯誤
if(xmlHttp.status == 200){
//交互成功獲得響應的數據，是文本格式
var result = xmlHttp.responseText;
//解析獲得的數據
var json = eval("("+ result +")");
//獲得數據之后，就可以動態的顯示數據了，把數據顯示到輸入框下面
alert(json);
}
}
}
//獲得輸入框的內容
function getContents(){
//首先獲得用戶的輸入內容，這里獲得的是一個結點
var content = document.getElementById("keyword");
if(content.value ==""){
return;
}
//向服務器發送內容，用到XmlHttp對象
xmlHttp = createXMLHttp();
//給服務器發送數據，escape()不加中文會有問題
var url = "search?keyword=" + escape(content.value);
//true表示js的腳本會在send()方法之后繼續執行而不會等待來自服務器的響應
xmlHttp.open("GET",url,true);
//xmlHttp綁定回調方法，這個方法會在xmlHttp狀態改變的時候調用,xmlHttp狀態有0-4，
//我們只關心4，4表示完成
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="text" id="keyword" name="keyword" onkeyup="getContents()">
</body>
</html>后端：
AjaxServlet.java
package com.loger.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
/**
* Servlet implementation class AjaxServlet
*/
@WebServlet("/search")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
static List<String> list = new ArrayList<>();
static{
list.add("chenle");
list.add("陳樂");
}
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//設置編碼
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//首先獲得客戶端發送來的數據
String keyword = request.getParameter("keyword");
System.out.println(keyword);
//返回json數據
response.getWriter().write(JSONArray.fromObject(list).toString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}運行結果：
上述內容就是如何在AJAX中使用 Servlet實現數據異步交互，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
