ฉันยังใหม่กับเว็บแอปและ Servlets และฉันมีคำถามต่อไปนี้:
เมื่อใดก็ตามที่ฉันพิมพ์บางอย่างภายใน servlet และเรียกมันโดยเว็บเบราเซอร์มันจะส่งคืนหน้าใหม่ที่มีข้อความนั้น มีวิธีพิมพ์ข้อความในหน้าปัจจุบันโดยใช้ Ajax หรือไม่?
ฉันยังใหม่กับเว็บแอปและ Servlets และฉันมีคำถามต่อไปนี้:
เมื่อใดก็ตามที่ฉันพิมพ์บางอย่างภายใน servlet และเรียกมันโดยเว็บเบราเซอร์มันจะส่งคืนหน้าใหม่ที่มีข้อความนั้น มีวิธีพิมพ์ข้อความในหน้าปัจจุบันโดยใช้ Ajax หรือไม่?
คำตอบ:
อันที่จริงคำหลักคือ "อาแจ็กซ์": Asynchronous JavaScript และ XML แต่ปีที่ผ่านมามันมากกว่ามักจะAsynchronous 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>
สร้าง servlet ด้วย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 มีให้คุณเลือกฟรี แต่คุณจะต้องเปลี่ยนsomeservletURL ในตัวอย่างโค้ด JS ทั่วทุกสถานที่):
@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
// ...
}หรือเมื่อคุณไม่ได้อยู่ในคอนเทนเนอร์ที่เข้ากันได้ของ Servlet 3.0 (Tomcat 7, Glassfish 3, JBoss AS 6 หรือใหม่กว่า) จากนั้นจึงแมปในweb.xmlลักษณะที่ล้าสมัย (ดูหน้า wiki Servlets ของเรา ):
<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โฟลเดอร์ webapplication ของคุณ
นี่คือตัวอย่างที่แสดงเป็นList<String> <ul><li>servlet:
@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 และช่วยให้คุณโดยตรงวัตถุ JSON ( responseJson) 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>ใน<table>ที่Productชั้นจะมีคุณสมบัติLong id, และString name BigDecimal priceservlet:
@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นี่คือตัวอย่างที่ทำงานได้อย่างมีประสิทธิภาพเหมือนกับตัวอย่างก่อนหน้า แต่ใช้ XML แทน JSON เมื่อใช้ JSP เป็นตัวสร้างเอาต์พุต XML คุณจะเห็นว่าไม่น่าเบื่อที่จะเขียนโค้ดตารางและทั้งหมด JSTL เป็นวิธีที่มีประโยชน์มากขึ้นในขณะที่คุณสามารถใช้เพื่อวนซ้ำผลลัพธ์และดำเนินการจัดรูปแบบข้อมูลฝั่งเซิร์ฟเวอร์ servlet:
@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>ใน<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".
});
});ตอนนี้คุณจะรู้ว่าทำไม XML จึงมีประสิทธิภาพมากกว่า JSON สำหรับวัตถุประสงค์เฉพาะในการอัปเดตเอกสาร HTML โดยใช้ Ajax JSON เป็นเรื่องตลก แต่โดยทั่วไปแล้วมีประโยชน์เฉพาะกับสิ่งที่เรียกว่า "บริการเว็บสาธารณะ" เฟรมเวิร์ก MVC เช่นJSFใช้ XML ภายใต้หน้ากากสำหรับอาแจ็กซ์เวทมนต์
คุณสามารถใช้ jQuery $.serialize()เพื่อ ajaxify แบบฟอร์ม POST ที่มีอยู่ได้อย่างง่ายดายโดยไม่ต้องไปไหนมาไหนด้วยการรวบรวมและส่งผ่านพารามิเตอร์อินพุตของแต่ละแบบฟอร์ม สมมติว่าฟอร์มที่มีอยู่ซึ่งทำงานได้อย่างสมบูรณ์แบบโดยไม่มี JavaScript / jQuery (และทำให้เสื่อมโทรมอย่างสง่างามเมื่อ enduser ปิดใช้งาน 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.
});คุณสามารถใน servlet แยกแยะระหว่างคำขอปกติและคำขอ 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รูปแบบตามที่ต้องการโดยการอัปโหลดไฟล์
หากคุณไม่มีรูปแบบ แต่ต้องการโต้ตอบกับ servlet "ในพื้นหลัง" โดยที่คุณต้องการโพสต์ข้อมูลจากนั้นคุณสามารถใช้ jQuery $.param()เพื่อแปลงวัตถุ 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 แสดงถึงชนิดของคำขอร่างกาย ประเภทแสดงถึง (คาดว่า) ประเภทของร่างกายการตอบสนองซึ่งมักจะไม่จำเป็นเป็น jQuery ตรวจสอบอัตโนมัติมันขึ้นอยู่กับส่วนหัวของการตอบสนองdataTypecontentTypedataTypeContent-Type
จากนั้นในการประมวลผลวัตถุ JSON ใน servlet ซึ่งไม่ได้ถูกส่งเป็นพารามิเตอร์คำขอส่วนบุคคล แต่ในฐานะที่เป็นสตริง JSON ทั้งหมดด้วยวิธีข้างต้นคุณจะต้องแยกวิเคราะห์เนื้อหาคำขอด้วยตนเองโดยใช้เครื่องมือ JSON แทนการใช้getParameter()ปกติ ทาง servlet ไม่รองรับการ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) ซึ่งด้วยเหตุผลบางประการเท่านั้นที่สามารถใช้สตริง JSON และไม่ใช้พารามิเตอร์คำขอปกติ
สำคัญที่ต้องตระหนักและเข้าใจว่าใด ๆsendRedirect()และforward()การเรียกร้องโดยเซิร์ฟเล็ตในการร้องขออาแจ็กซ์เท่านั้นไปข้างหน้าหรือจะเปลี่ยนเส้นทางการร้องขออาแจ็กซ์ตัวเองและไม่ได้เป็นหลักเอกสาร / หน้าต่างที่ร้องขออาแจ็กซ์มา JavaScript / jQuery จะเรียกเฉพาะการตอบสนองที่ถูกเปลี่ยนเส้นทาง / ส่งต่อเป็นresponseTextตัวแปรในฟังก์ชันการเรียกกลับ ถ้ามันแสดงถึงหน้า HTML ทั้งหมดและไม่ใช่การตอบกลับ XML หรือ ajax เฉพาะ ajax สิ่งที่คุณทำได้คือการแทนที่เอกสารปัจจุบันด้วย
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())บรรทัดนี้ นอกจากนี้ยังระบุว่า "จำนวนอาร์กิวเมนต์ไม่ถูกต้องหรือการกำหนดคุณสมบัติไม่ถูกต้อง" ฉันยังสามารถเห็นว่า XML ของฉันบรรจุด้วยข้อมูลเมื่อฉันดีบัก ความคิดใด ๆ
วิธีที่ถูกต้องในการอัปเดตหน้าเว็บที่แสดงในเบราว์เซอร์ของผู้ใช้ (โดยไม่ต้องโหลดซ้ำ) คือการให้โค้ดทำงานในเบราว์เซอร์เพื่ออัปเดต DOM ของหน้าเว็บ
รหัสนั้นเป็นจาวาสคริปต์ที่ฝังอยู่ในหรือลิงค์จากหน้า HTML ดังนั้นคำแนะนำ AJAX (อันที่จริงถ้าเราคิดว่าข้อความที่อัพเดทมาจากเซิร์ฟเวอร์ผ่านการร้องขอ HTTP นี่คือ AJAX แบบคลาสสิก)
นอกจากนี้ยังเป็นไปได้ที่จะใช้สิ่งนี้โดยใช้ปลั๊กอินของเบราว์เซอร์หรือโปรแกรมเสริมแม้ว่ามันอาจเป็นเรื่องยากสำหรับปลั๊กอินที่จะเข้าถึงโครงสร้างข้อมูลของเบราว์เซอร์เพื่ออัปเดต DOM (ปลั๊กอินของรหัสเนทีฟโดยปกติจะเขียนไปยังเฟรมกราฟิกบางตัวที่ฝังอยู่ในเพจ)
ฉันจะแสดงตัวอย่างทั้งหมดของ servlet & ajax โทรอย่างไร
ที่นี่เราจะสร้างตัวอย่างง่าย ๆ ในการสร้างแบบฟอร์มการเข้าสู่ระบบโดยใช้ servlet
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
$.ajax
({
type: "POST",
data: 'LoginServlet='+name+'&name='+type+'&pass='+password,
url: url,
success:function(content)
{
$('#center').html(content);
}
});LoginServlet Servlet Code: -
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 และ XML) เป็นกลุ่มของเทคนิคการพัฒนาเว็บที่สัมพันธ์กันที่ใช้บนฝั่งไคลเอ็นต์เพื่อสร้างแอปพลิเคชันเว็บแบบอะซิงโครนัส ด้วย Ajax เว็บแอปพลิเคชันสามารถส่งข้อมูลไปยังและดึงข้อมูลจากเซิร์ฟเวอร์แบบอะซิงโครนัสด้านล่างคือโค้ดตัวอย่าง:
ฟังก์ชันจาวาสคริปต์หน้า Jsp เพื่อส่งข้อมูลไปยัง servlet โดยมีตัวแปรสองตัวคือชื่อและนามสกุล:
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);
}Servlet เพื่ออ่านข้อมูลส่งกลับไปที่ jsp ในรูปแบบ xml (คุณสามารถใช้ข้อความได้เช่นกันเพียงแค่คุณต้องเปลี่ยนเนื้อหาการตอบกลับเป็นข้อความและแสดงข้อมูลในฟังก์ชันจาวาสคริปต์)
/**
* @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>");
}โดยปกติคุณไม่สามารถอัปเดตหน้าจากเซิร์ฟเล็ต ลูกค้า (เบราว์เซอร์) จะต้องร้องขอการอัปเดต ไคลเอ็นต์ Eiter โหลดหน้าใหม่ทั้งหมดหรือร้องขอการอัปเดตเป็นส่วนหนึ่งของหน้าเว็บที่มีอยู่ เทคนิคนี้เรียกว่าอาแจ็กซ์
การใช้ bootstrap multi select
อาแจ็กซ์
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'
});}
}ใน Servlet
request.getParameter("input")