本文详细介绍如何使用 JavaScript 发起 AJAX 请求并调用后端 Servlet 处理数据。内容涵盖前端创建 XMLHttpRequest 对象、发送异步请求及处理响应状态，以及后端 Servlet 连接数据库、执行查询并将结果转换为 JSON 格式返回给前端的具体代码实现，旨在帮助开发者掌握基本的 Web 前后端通信流程。
JavaScript 调用 Servlet 实现前后端交互示例
本文通过一个具体实例，讲解如何利用 JavaScript 向 Servlet 发送请求。该方案可供读者参考学习。
以下是前端 JavaScript 代码的实现部分：
//创建ajax请求对象
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
/**
* 表单提交
*/
function submit(){
//发送请求
var searchContent = $id("search_input").value;//查找内容
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "/MyMap/QueryMapServlet?searchName="+searchContent, true);
xmlHttp.send(null);
}catch(exception){
alert("您要访问的资源不存在!");
}
$("sideToggleRight").attr("checked","checked");//无作用
}
//处理结果
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
var t = xmlHttp.responseText;
jsonobj = eval('('+t+')');
}
}
}
接着是后端 Servlet 端的处理逻辑：
//oracle数据库查询的结果:
Class.forName("oracle.jdbc.driver.OracleDriver");
conn = DriverManager.getConnection(url, "dio", "123");
stmt = conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE);
rs = stmt.executeQuery("SELECT * FROM GEO where ST like '%"+searchName+"%'");
ResultSetMetaData metaData = rs.getMetaData();
rs.beforeFirst();//将指针移到最开始的位置
int columnCount = metaData.getColumnCount(); //列数
JSONArray array = new JSONArray();
while (rs.next()) {
JSONObject jsonObj = new JSONObject();
//输出数据
for (int i = 1; i <= columnCount; i++) {
String columnName = metaData.getColumnLabel(i);
String value = rs.getString(columnName);
jsonObj.put(columnName, value);
}
array.put(jsonObj);
}
System.out.println(array);
response.getWriter().print(array);
}
如需了解更多 JavaScript 相关知识，建议查阅本站相关专题，包括《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。
希望上述内容对您的 JavaScript 编程实践有所帮助。