답변:
실제로 키워드는 "ajax": Asynchronous JavaScript and XML 입니다. 그러나 지난 몇 년 동안 종종 비동기 JavaScript 및 JSON 이상 입니다. 기본적으로 JS가 비동기 HTTP 요청을 실행하고 응답 데이터를 기반으로 HTML DOM 트리를 업데이트 할 수 있습니다.
모든 브라우저 (특히 Internet Explorer와 다른 브라우저)에서 작동하도록 하는 것은 지루한 작업이므로 단일 기능으로이를 단순화하고 가능한 많은 브라우저 관련 버그 / 질문을 다루는 JavaScript 라이브러리가 많이 있습니다. 같은 jQuery를 , 원형 , Mootools의 . 요즘 jQuery가 가장 많이 사용되므로 아래 예제에서 사용하겠습니다.
String일반 텍스트 로 반환 되는 킥오프 예제/some.jsp아래와 같이 작성하십시오 (참고 : 코드는 JSP 파일이 서브 폴더에 배치 될 것으로 예상하지 않습니다. 그렇게하면 서블릿 URL을 적절히 변경하십시오).
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 4112686</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$("#somediv").text(responseText); // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
</script>
</head>
<body>
<button id="somebutton">press here</button>
<div id="somediv"></div>
</body>
</html>다음과 같은 doGet()메소드 로 서블릿을 작성하십시오 .
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String text = "some text";
response.setContentType("text/plain"); // Set content type of the response so that jQuery knows what it can expect.
response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
response.getWriter().write(text); // Write response body.
}의 URL 패턴이 서블릿을지도 /someservlet또는 /someservlet/*아래로 (물론, URL 패턴은 당신의 선택에 무료입니다,하지만 당신은 변경해야 할 것입니다 someservlet따라 모든 여기 저기 JS 코드 예제에서 URL을) :
@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
// ...
}또는 아직 Servlet 3.0 호환 컨테이너가 아닌 경우 (Tomcat 7, Glassfish 3, JBoss AS 6 등 이상), web.xml구식으로 매핑 하십시오 ( Servlet 위키 페이지 참조 ).
<servlet>
<servlet-name>someservlet</servlet-name>
<servlet-class>com.example.SomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>someservlet</servlet-name>
<url-pattern>/someservlet/*</url-pattern>
</servlet-mapping>이제 브라우저에서 http : // localhost : 8080 / context / test.jsp 를 열고 버튼을 누릅니다. div의 내용이 서블릿 응답으로 업데이트되는 것을 볼 수 있습니다.
List<String>JSON 으로 반환로 JSON 대신 응답 형식으로 일반 텍스트 당신은 더욱 몇 가지 단계를 얻을 수 있습니다. 더 많은 역 동성을 허용합니다. 먼저 Java 객체와 JSON 문자열 사이를 변환하는 도구가 필요합니다. 그것들도 많이 있습니다 ( 개요 는 이 페이지 의 하단을 참조하십시오 ). 내가 가장 좋아하는 것은 Google Gson 입니다. JAR 파일을 다운로드 /WEB-INF/lib하여 웹 응용 프로그램의 폴더에 넣으십시오.
여기에 예를 들어 디스플레이의 List<String>등은 <ul><li>. 서블릿 :
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> list = new ArrayList<>();
list.add("item1");
list.add("item2");
list.add("item3");
String json = new Gson().toJson(list);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}JS 코드 :
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $ul = $("<ul>").appendTo($("#somediv")); // Create HTML <ul> element and append it to HTML DOM element with ID "somediv".
$.each(responseJson, function(index, item) { // Iterate over the JSON array.
$("<li>").text(item).appendTo($ul); // Create HTML <li> element, set its text content with currently iterated item and append it to the <ul>.
});
});
});jQuery는 자동으로 응답을 JSON으로 구문 분석 responseJson하고 응답 컨텐츠 유형을로 설정하면 JSON 오브젝트 ( )를 함수 인수로 직접 제공합니다 application/json. 당신이 잊어 버린 경우를 설정하거나의 기본에 의존 text/plain하거나 text/html, 다음 responseJson인수는 당신에게 JSON 객체하지만 일반 바닐라 문자열을주지 못할 것이다 당신은 수동으로 바이올린 주위에 필요 했어 JSON.parse()따라서 당신의 경우 완전히 불필요하다, 이후 컨텐츠 유형을 먼저 설정하십시오.
Map<String, String>JSON 으로 반환다음과 Map<String, String>같이 표시 되는 다른 예가 있습니다 <option>.
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, String> options = new LinkedHashMap<>();
options.put("value1", "label1");
options.put("value2", "label2");
options.put("value3", "label3");
String json = new Gson().toJson(options);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}그리고 JSP :
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $select = $("#someselect"); // Locate HTML DOM element with ID "someselect".
$select.find("option").remove(); // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
$.each(responseJson, function(key, value) { // Iterate over the JSON object.
$("<option>").val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
});
});
});와
<select id="someselect"></select>List<Entity>JSON 으로 반환여기에 표시하는 예제 List<Product>A의 클래스는 특성을 가지고는 , 하고 . 서블릿 :<table>ProductLong idString nameBigDecimal price
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = someProductService.list();
String json = new Gson().toJson(products);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}JS 코드 :
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $table = $("<table>").appendTo($("#somediv")); // Create HTML <table> element and append it to HTML DOM element with ID "somediv".
$.each(responseJson, function(index, product) { // Iterate over the JSON array.
$("<tr>").appendTo($table) // Create HTML <tr> element, set its text content with currently iterated item and append it to the <table>.
.append($("<td>").text(product.id)) // Create HTML <td> element, set its text content with id of currently iterated product and append it to the <tr>.
.append($("<td>").text(product.name)) // Create HTML <td> element, set its text content with name of currently iterated product and append it to the <tr>.
.append($("<td>").text(product.price)); // Create HTML <td> element, set its text content with price of currently iterated product and append it to the <tr>.
});
});
});List<Entity>XML 로 반환다음은 이전 예제와 효과적으로 동일하지만 JSON 대신 XML을 사용하는 예제입니다. JSP를 XML 출력 생성기로 사용하면 테이블과 코드를 모두 코딩하는 것이 덜 지루하다는 것을 알 수 있습니다. JSTL은 실제로 결과를 반복하고 서버 측 데이터 형식을 수행하는 데 사용할 수 있으므로 훨씬 유용합니다. 서블릿 :
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = someProductService.list();
request.setAttribute("products", products);
request.getRequestDispatcher("/WEB-INF/xml/products.jsp").forward(request, response);
}는 JSP 코드 (참고 : 넣을 경우 <table>A의 <jsp:include>그것이 아닌 아약스 응답 재사용 다른 곳에있을 수 있습니다)
<?xml version="1.0" encoding="UTF-8"?>
<%@page contentType="application/xml" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<data>
<table>
<c:forEach items="${products}" var="product">
<tr>
<td>${product.id}</td>
<td><c:out value="${product.name}" /></td>
<td><fmt:formatNumber value="${product.price}" type="currency" currencyCode="USD" /></td>
</tr>
</c:forEach>
</table>
</data>JS 코드 :
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseXml) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response XML...
$("#somediv").html($(responseXml).find("data").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
});
});이제 Ajax를 사용하여 HTML 문서를 업데이트 할 목적으로 XML이 JSON보다 훨씬 강력한 이유를 알게 될 것입니다. JSON은 재미 있지만 결국 "공공 웹 서비스"에만 유용합니다. JSF 와 같은 MVC 프레임 워크 는 아약스 마법을 위해 XML을 사용합니다.
jQuery $.serialize()를 사용 하면 개별 양식 입력 매개 변수를 수집하고 전달하지 않고도 기존 POST 양식을 쉽게 조정할 수 있습니다 . JavaScript / jQuery없이 완벽하게 작동하는 기존 양식을 가정하여 최종 사용자가 JavaScript를 비활성화하면 정상적으로 저하됩니다.
<form id="someform" action="someservlet" method="post">
<input type="text" name="foo" />
<input type="text" name="bar" />
<input type="text" name="baz" />
<input type="submit" name="submit" value="Submit" />
</form>아래와 같이 ajax로 점진적으로 향상시킬 수 있습니다.
$(document).on("submit", "#someform", function(event) {
var $form = $(this);
$.post($form.attr("action"), $form.serialize(), function(response) {
// ...
});
event.preventDefault(); // Important! Prevents submitting the form.
});서블릿에서 다음과 같이 일반 요청과 ajax 요청을 구별 할 수 있습니다.
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String foo = request.getParameter("foo");
String bar = request.getParameter("bar");
String baz = request.getParameter("baz");
boolean ajax = "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));
// ...
if (ajax) {
// Handle ajax (JSON or XML) response.
} else {
// Handle regular (JSP) response.
}
}jQuery를 양식 플러그인은 작거나 jQuery를 예 위와 더 같은 않지만, 추가 투명 지원이 multipart/form-data파일 업로드에서 요구하는 형태.
양식이 전혀 없지만 "백그라운드에서"서블릿과 상호 작용하여 일부 데이터를 POST $.param()하려는 경우 jQuery 를 사용 하여 JSON 객체를 URL 인코딩으로 쉽게 변환 할 수 있습니다 쿼리 문자열.
var params = {
foo: "fooValue",
bar: "barValue",
baz: "bazValue"
};
$.post("someservlet", $.param(params), function(response) {
// ...
});doPost()여기에 표시된 것과 동일한 방법을 재사용 할 수 있습니다. 위의 구문 $.get()은 jQuery 및 doGet()서블릿 에서도 작동합니다 .
그러나 어떤 이유로 개별 요청 매개 변수 대신 전체로 JSON 객체를 보내려는 경우 JSON.stringify()(jQuery의 일부가 아닌)를 사용하여 문자열로 직렬화하고 jQuery에 요청 콘텐츠 유형을 application/json대신 설정하도록 지시해야 합니다 (기본값) application/x-www-form-urlencoded. 이는 $.post()편의 기능을 통해 수행 할 수 없지만 다음과 같이 수행 해야 $.ajax()합니다.
var data = {
foo: "fooValue",
bar: "barValue",
baz: "bazValue"
};
$.ajax({
type: "POST",
url: "someservlet",
contentType: "application/json", // NOT dataType!
data: JSON.stringify(data),
success: function(response) {
// ...
}
});많은 스타터가 contentType와 혼합 되어 dataType있습니다. 는 contentType의 유형 나타내는 요청의 몸체. 은 dataType의 제 (예상) 형 나타내는 응답 jQuery를 이미의 응답에 기초하여 자동 감지 일반적으로 불필요 본체 Content-Type헤더.
그런 다음 개별 요청 매개 변수로 전송되지 않고 위의 전체 JSON 문자열로 전송되는 서블릿에서 JSON 객체를 처리 getParameter()하려면 일반적인 방법 을 사용 하는 대신 JSON 도구를 사용하여 요청 본문을 수동으로 구문 분석하면됩니다. 방법. 즉, 서블릿은 지원하지 않는 application/json포맷 요청 만 application/x-www-form-urlencoded또는 multipart/form-data형식의 요청을. Gson은 또한 JSON 문자열을 JSON 객체로 구문 분석하는 것을 지원합니다.
JsonObject data = new Gson().fromJson(request.getReader(), JsonObject.class);
String foo = data.get("foo").getAsString();
String bar = data.get("bar").getAsString();
String baz = data.get("baz").getAsString();
// ...이 모든 것을 사용하는 것보다 더 어색하다는 점에 유의하십시오 $.param(). 일반적으로 JSON.stringify()대상 서비스가 JAX-RS (RESTful) 서비스 인 경우에만 사용하려고합니다 . JAX-RS (RESTful) 서비스는 어떤 이유로 든 일반 요청 매개 변수가 아닌 JSON 문자열 만 사용할 수 있습니다.
깨닫고 이해하는 것이 중요하는 것은 어떤 것입니다 sendRedirect()및 forward()아약스 요청 서블릿에 의해 호출은 앞으로 또는 리디렉션 것 아약스 요청 자체 가 아니라 아약스 요청이 시작된 주 문서 / 창을여십시오. 이러한 경우 JavaScript / jQuery는 리디렉션 / 전달 된 응답 만 responseText콜백 함수의 변수 로 검색합니다 . Ajax 관련 XML 또는 JSON 응답이 아닌 전체 HTML 페이지를 나타내는 경우 현재 문서를 해당 페이지로 바꾸면됩니다.
document.open();
document.write(responseText);
document.close();최종 사용자가 브라우저의 주소 표시 줄에서 볼 수 있듯이 URL은 변경되지 않습니다. 북마크 기능에 문제가 있습니다. 따라서 리디렉션 된 페이지의 전체 내용을 반환하는 대신 JavaScript / jQuery가 리디렉션을 수행하도록 "명령"을 반환하는 것이 훨씬 좋습니다. 예를 들어 부울 또는 URL을 반환합니다.
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;
}
// ...
}$("#somediv").html($(responseXml).find("data").html())줄에 대해 "정의되지 않은 또는 null 참조의 속성 '대체'를 가져올 수 없습니다"가 표시됩니다. "잘못된 인수 수 또는 잘못된 속성 할당"이라고도합니다. 또한 디버깅 할 때 XML에 데이터가 채워져 있음을 알 수 있습니다. 어떤 아이디어?
다시로드하지 않고 사용자 브라우저에 현재 표시된 페이지를 업데이트하는 올바른 방법은 브라우저에서 일부 코드를 실행하여 페이지의 DOM을 업데이트하는 것입니다.
이 코드는 일반적으로 HTML 페이지에 포함되거나 연결된 자바 스크립트이므로 AJAX 제안입니다. (실제로, 업데이트 된 텍스트가 HTTP 요청을 통해 서버에서 온 것으로 가정하면 이것이 전형적인 AJAX입니다.)
플러그인이 브라우저의 데이터 구조에 도달하여 DOM을 업데이트하는 것은 까다로울 수 있지만 일부 브라우저 플러그인 또는 애드온을 사용하여 이런 종류의 것을 구현할 수도 있습니다. 기본 코드 플러그인은 일반적으로 페이지에 포함 된 일부 그래픽 프레임에 씁니다.
서블릿의 전체 예와 아약스 호출 방법을 보여 드리겠습니다.
여기서는 서블릿을 사용하여 로그인 양식을 작성하는 간단한 예제를 작성합니다.
index.html
<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);
}
});LoginServlet 서블릿 코드 :-
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);
}
});Ajax (AJAX) (Asynchronous JavaScript and XML의 약어)는 클라이언트 측에서 비동기 웹 애플리케이션을 작성하는 데 사용되는 상호 관련된 웹 개발 기술 그룹입니다. Ajax를 사용하면 웹 애플리케이션이 서버와 비동기 적으로 데이터를주고받을 수 있습니다. 아래는 예제 코드입니다.
두 개의 변수 firstName 및 lastName을 사용하여 서블릿에 데이터를 제출하는 JSP 페이지 Java 스크립트 함수 :
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);
}데이터를 읽는 서블릿은 XML 형식으로 jsp로 다시 전송합니다 (텍스트도 사용할 수 있습니다. 응답 내용을 텍스트로 변경하고 javascript 함수에서 데이터를 렌더링하면됩니다).
/**
* @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")