Java 如何使用servlet和Ajax?
我对web应用和servlet非常陌生,我有以下问题:Java 如何使用servlet和Ajax?,java,ajax,jsp,servlets,Java,Ajax,Jsp,Servlets,我对web应用和servlet非常陌生,我有以下问题: 每当我在servlet中打印某些内容并通过webbrowser调用它时,它都会返回一个包含该文本的新页面。有没有一种方法可以使用Ajax打印当前页面中的文本?通常无法从servlet更新页面。客户端(浏览器)必须请求更新。Eiter客户端加载整个新页面,或者请求更新现有页面的一部分。这种技术称为Ajax 更新用户浏览器中当前显示的页面(无需重新加载)的正确方法是让浏览器中执行的一些代码更新页面的DOM 该代码通常是嵌入HTML页面或从HTM
每当我在servlet中打印某些内容并通过webbrowser调用它时,它都会返回一个包含该文本的新页面。有没有一种方法可以使用Ajax打印当前页面中的文本?通常无法从servlet更新页面。客户端(浏览器)必须请求更新。Eiter客户端加载整个新页面,或者请求更新现有页面的一部分。这种技术称为Ajax 更新用户浏览器中当前显示的页面(无需重新加载)的正确方法是让浏览器中执行的一些代码更新页面的DOM 该代码通常是嵌入HTML页面或从HTML页面链接的javascript,因此AJAX建议。(事实上,如果我们假设更新的文本通过HTTP请求来自服务器,这就是经典的AJAX。) 也可以使用一些浏览器插件或附加组件来实现这类功能,尽管插件要进入浏览器的数据结构以更新DOM可能会很棘手。(本机代码插件通常写入嵌入页面中的某些图形框架。)事实上,关键字是“ajax”:异步JavaScript和XML。然而,在过去的几年中,它更多的是异步JavaScript和JSON。基本上,让JS执行一个异步HTTP请求,并根据响应数据更新HTMLDOM树 由于要使它在所有浏览器上都能运行(特别是Internet Explorer与其他浏览器相比),这是一项相当艰巨的工作,因此有大量JavaScript库可以在单个函数中简化这一过程,并尽可能多地掩盖特定于浏览器的错误/怪癖,例如。由于jQuery现在最流行,我将在下面的示例中使用它 以纯文本形式返回
字符串的启动示例
创建一个如下所示的/some.jsp
(注意:此答案中的代码片段并不期望jsp文件被放置在子文件夹中,如果这样做,请相应地将servlet URL从“someservlet”
更改为“${pageContext.request.contextPath}/someservlet”
;为了简洁起见,代码片段中省略了它):
所以问题4112686
$(document).on(“click”、“#somebutton”,function(){//当对ID为“somebutton”的元素调用HTML DOM“click”事件时,执行以下函数。。。
$.get(“someservlet”,函数(responseText){//在“someservlet”的URL上执行Ajax get请求,并使用Ajax响应文本执行以下函数。。。
$(“#somediv”).text(responseText);//找到ID为“somediv”的HTML DOM元素,并使用响应文本设置其文本内容。
});
});
按这里
使用doGet()
方法创建一个servlet,如下所示:
@覆盖
受保护的void doGet(HttpServletRequest请求,HttpServletResponse响应)抛出ServletException,IOException{
String text=“一些文本”;
response.setContentType(“text/plain”);//设置响应的内容类型,以便jQuery知道它可以期望什么。
response.setCharacterEncoding(“UTF-8”);//你想统治世界,是吗?
response.getWriter().write(text);//写入响应体。
}
将此servlet映射到/someservlet
或/someservlet/*
的URL模式上,如下所示(显然,URL模式由您自由选择,但您需要相应地修改JS代码示例中的someservlet
URL):
package.com.example;
@WebServlet(“/someservlet/*”)
公共类SomeServlet扩展了HttpServlet{
// ...
}
或者,当您还没有使用与Servlet 3.0兼容的容器(Tomcat 7、Glassfish 3、JBoss AS 6等或更高版本)时,请以老式的方式将其映射到web.xml中(另请参见):
someservlet
com.example.SomeServlet
someservlet
/someservlet/*
现在打开http://localhost:8080/context/test.jsp 在浏览器中,然后按按钮。您将看到div的内容通过servlet响应得到更新
将列表
返回为JSON
使用非纯文本作为响应格式,您甚至可以更进一步。它允许更多的动态。首先,您希望有一个在Java对象和JSON字符串之间转换的工具。它们也有很多(有关概述,请参阅的底部)。我个人最喜欢的是。下载JAR文件并将其放入您的WEB应用程序的/WEB-INF/lib
文件夹中
下面是一个将列表显示为
的示例。servlet:
@覆盖
受保护的void doGet(HttpServletRequest请求,HttpServletResponse响应)抛出ServletException,IOException{
列表=新的ArrayList();
列表。添加(“第1项”);
列表。添加(“第2项”);
列表。添加(“第3项”);
字符串json=new Gson().toJson(列表);
setContentType(“应用程序/json”);
响应。setCharacterEncoding(“UTF-8”);
response.getWriter().write(json);
}
JS代码:
$(document).on(“click”、“#somebutton”,function(){//当对ID为“somebutton”的元素调用HTML DOM“click”事件时,执行以下函数。。。
$.get(“someservlet”,函数(responseJson){//在“someservlet”的URL上执行Ajax get请求,并使用Ajax响应JSON执行以下函数。。。
var$ul=$(“”).appendTo($(“#somediv”);//创建HTML元素并将其附加到ID为“somediv”的HTML DOM元素。
$.each(responseJson,function(index,item){//遍历JSON数组。
$(“- ”).text(item).appendTo($ul);//创建HTML
- 元素,使用当前迭代的项设置其文本内容,并将其追加到
。
});
});
});
document.open();
document.write(responseText);
document.close();
String redirectURL = "http://example.com";
Map<String, String> data = new HashMap<>();
data.put("redirect", redirectURL);
String json = new Gson().toJson(data);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
function(responseJson) {
if (responseJson.redirect) {
window.location = responseJson.redirect;
return;
}
// ...
}
<form>
Name:<input type="text" name="username"/><br/><br/>
Password:<input type="password" name="userpass"/><br/><br/>
<input type="button" value="login"/>
</form>
$.ajax
({
type: "POST",
data: 'LoginServlet='+name+'&name='+type+'&pass='+password,
url: url,
success:function(content)
{
$('#center').html(content);
}
});
package abc.servlet;
import java.io.File;
public class AuthenticationServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try{
HttpSession session = request.getSession();
String username = request.getParameter("name");
String password = request.getParameter("pass");
/// Your Code
out.println("sucess / failer")
} catch (Exception ex) {
// System.err.println("Initial SessionFactory creation failed.");
ex.printStackTrace();
System.exit(0);
}
}
}
$.ajax({
type: "POST",
url: "url to hit on servelet",
data: JSON.stringify(json),
dataType: "json",
success: function(response){
// we have the response
if(response.status == "SUCCESS"){
$('#info').html("Info has been added to the list successfully.<br>"+
"The Details are as follws : <br> Name : ");
}else{
$('#info').html("Sorry, there is some thing wrong with the data provided.");
}
},
error: function(e){
alert('Error: ' + e);
}
});
function onChangeSubmitCallWebServiceAJAX()
{
createXmlHttpRequest();
var firstName=document.getElementById("firstName").value;
var lastName=document.getElementById("lastName").value;
xmlHttp.open("GET","/AJAXServletCallSample/AjaxServlet?firstName="
+firstName+"&lastName="+lastName,true)
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String firstName = request.getParameter("firstName");
String lastName = request.getParameter("lastName");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<details>");
response.getWriter().write("<firstName>"+firstName+"</firstName>");
response.getWriter().write("<lastName>"+lastName+"</lastName>");
response.getWriter().write("</details>");
}
function() { $.ajax({
type : "get",
url : "OperatorController",
data : "input=" + $('#province').val(),
success : function(msg) {
var arrayOfObjects = eval(msg);
$("#operators").multiselect('dataprovider',
arrayOfObjects);
// $('#output').append(obj);
},
dataType : 'text'
});}
}
request.getParameter("input")