मैं वेब ऐप्स और सर्वलेट्स के लिए बहुत नया हूं और मेरे पास निम्नलिखित प्रश्न हैं:
जब भी मैं सर्वलेट के अंदर कुछ प्रिंट करता हूं और इसे वेबब्रॉज़र द्वारा कॉल करता हूं, तो यह एक नया पेज देता है जिसमें वह टेक्स्ट होता है। क्या अजाक्स का उपयोग करके वर्तमान पृष्ठ में पाठ को प्रिंट करने का कोई तरीका है?
जवाबों:
दरअसल, कीवर्ड "अजाक्स" है: अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल । हालाँकि, पिछले वर्षों में यह अतुल्यकालिक जावास्क्रिप्ट और JSON से अधिक है । असल में, आप JS को एक अतुल्यकालिक HTTP अनुरोध निष्पादित करने और प्रतिक्रिया डेटा के आधार पर HTML DOM ट्री अपडेट करने दें।
चूंकि यह सभी ब्राउज़र (विशेष रूप से इंटरनेट एक्सप्लोरर बनाम अन्य) में काम करने के लिए बहुत कठिन काम है, इसलिए जावास्क्रिप्ट लाइब्रेरीज़ में से बहुत सारे हैं जो एकल कार्यों में इसे सरल बनाते हैं और हुडों के नीचे जितने संभव हो उतने ब्राउज़र-विशिष्ट बग / कवर्स कवर करते हैं। , जैसे कि 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हिसाब से मुफ्त है, लेकिन आपको URL को JS कोड के उदाहरणों के अनुसार सभी जगह बदलने की आवश्यकता होगी ):
@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
// ...
}
या, जब आप एक सर्वलेट 3.0 संगत कंटेनर पर अभी तक नहीं हैं (टॉमकैट 7, ग्लासफिश 3, जेबॉस एएस 6, आदि या नए), तो इसे web.xmlपुराने तरीके से मैप करें (यह भी देखें हमारे सर्वलेट्स विकी पेज ):
<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 / Reference / test.jsp खोलें और बटन दबाएं। आप देखेंगे कि div की सामग्री सर्वलेट प्रतिक्रिया के साथ अपडेट हो जाती है।
List<String>JSON के रूप में लौट रहा हैJSON के साथ प्लेनटेक्स्ट के बजाय प्रतिक्रिया स्वरूप के रूप में आप कुछ कदम आगे भी प्राप्त कर सकते हैं। यह अधिक गतिशीलता के लिए अनुमति देता है। सबसे पहले, आप जावा ऑब्जेक्ट्स और JSON स्ट्रिंग्स के बीच कनवर्ट करने के लिए एक टूल रखना चाहेंगे। साथ ही उनमें से बहुत सारे हैं ( अवलोकन के लिए इस पृष्ठ के नीचे देखें )। मेरा व्यक्तिगत पसंदीदा Google Gson है । डाउनलोड करें और अपनी वेब फ़ाइल के /WEB-INF/libफ़ोल्डर में इसकी JAR फ़ाइल डालें।
यहाँ एक उदाहरण है जो प्रदर्शित 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);
}
जेएस कोड:
$(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>है <table>जहाँ Productकक्षा में गुण हैं Long id, String nameऔर BigDecimal 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);
}
जेएस कोड:
$(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 के साथ है। XML आउटपुट जनरेटर के रूप में JSP का उपयोग करते समय आप देखेंगे कि यह तालिका और सभी को कोड करने के लिए कम थकाऊ है। 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>एक में <jsp:include>, यह एक गैर ajax जवाब में पुन: प्रयोज्य कहीं और हो सकता है):
<?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>
जेएस कोड:
$(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".
});
});
अब तक आपको शायद एहसास हो जाएगा कि एक्सएक्सएक्स एजाक्स का उपयोग करके HTML दस्तावेज़ को अपडेट करने के विशेष उद्देश्य के लिए XML जेन्सन की तुलना में अधिक शक्तिशाली क्यों है। JSON मजाकिया है, लेकिन आखिरकार केवल तथाकथित "सार्वजनिक वेब सेवाओं" के लिए उपयोगी है। जेएसएफ जैसे एमवीसी फ्रेमवर्क उनके अजाक्स जादू के लिए एक्सएमएल का उपयोग करते हैं।
आप $.serialize()व्यक्तिगत रूप से इनपुट मापदंडों को एकत्र करने और पास करने के साथ-साथ बिना किसी भी प्रकार के मौजूदा POST रूपों को आसानी से ajaxify करने के लिए jQuery का उपयोग कर सकते हैं । एक मौजूदा फॉर्म को मानते हुए जो जावास्क्रिप्ट / jQuery के बिना पूरी तरह से ठीक काम करता है (और इस प्रकार जब एंडोर्सर को जावास्क्रिप्ट अक्षम किया जाता है, तो इनायत से गिरावट आती है):
<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>
आप उत्तरोत्तर अजाक्स के साथ इसे उत्तरोत्तर बढ़ा सकते हैं:
$(document).on("submit", "#someform", function(event) {
var $form = $(this);
$.post($form.attr("action"), $form.serialize(), function(response) {
// ...
});
event.preventDefault(); // Important! Prevents submitting the form.
});
आप सर्वलेट में सामान्य अनुरोध और अजाक्स अनुरोध के बीच अंतर कर सकते हैं:
@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के रूप में फ़ाइल अपलोड के लिए आवश्यक रूपों।
यदि आपके पास कोई फ़ॉर्म नहीं है, लेकिन बस सर्वलेट के साथ "पृष्ठभूमि में" बातचीत करना चाहता था, जिससे आप कुछ डेटा पोस्ट करना चाहते हैं, तो आप $.param()एक JSON ऑब्जेक्ट को आसानी से URL-एन्कोडेड में बदलने के लिए jQuery का उपयोग कर सकते हैं क्वेरी स्ट्रिंग।
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 प्रतिक्रिया के आधार पर यह autodetects 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) सेवा है जो किसी कारण से केवल JSON स्ट्रिंग्स का उपभोग करने में सक्षम है और नियमित अनुरोध पैरामीटर नहीं।
एहसास है और समझने के लिए महत्वपूर्ण है कि किसी भी है sendRedirect()और forward()एक ajax अनुरोध पर सर्वलेट द्वारा कॉल केवल आगे या अनुप्रेषित होगा ajax अनुरोध ही नहीं है और मुख्य दस्तावेज़ / खिड़की जहां ajax अनुरोध जन्म लिया है। जावास्क्रिप्ट / jQuery ऐसे मामले में केवल responseTextकॉलबैक फ़ंक्शन में चर के रूप में पुनर्निर्देशित / अग्रेषित प्रतिक्रिया को पुनः प्राप्त करेगा । यदि यह संपूर्ण HTML पृष्ठ का प्रतिनिधित्व करता है, न कि अजाक्स-विशिष्ट XML या JSON प्रतिक्रिया का, तो आप यह कर सकते हैं कि वर्तमान दस्तावेज़ को इसके साथ बदल दिया जाए।
document.open();
document.write(responseText);
document.close();
ध्यान दें कि यह URL नहीं बदलता है क्योंकि ब्राउज़र के एड्रेस बार में एंड्यूसर दिखता है। इसलिए बुकमार्क के साथ समस्याएँ हैं। इसलिए, रीडायरेक्ट किए गए पृष्ठ की संपूर्ण सामग्री को वापस करने के बजाय केवल जावास्क्रिप्ट / 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 डेटा से पॉप्युलेट होता है। कोई विचार ?
उपयोगकर्ता के ब्राउज़र में वर्तमान में प्रदर्शित पेज को अपडेट करने का सही तरीका (इसे फिर से लोड किए बिना) ब्राउज़र के पेज को अपडेट करने के लिए ब्राउज़र में कुछ कोड निष्पादित करना है।
यह कोड आम तौर पर जावास्क्रिप्ट है जो एचटीएमएल पेज से एम्बेडेड या लिंक किया गया है, इसलिए AJAX सुझाव है। (वास्तव में, यदि हम मान लें कि अद्यतन पाठ HTTP अनुरोध के माध्यम से सर्वर से आता है, तो यह क्लासिक AJAX है।)
कुछ ब्राउज़र प्लगइन या ऐड-ऑन का उपयोग करके इस तरह की चीज़ को लागू करना भी संभव है, हालांकि DOM को अपडेट करने के लिए ब्राउज़र के डेटा स्ट्रक्चर्स तक पहुंचने के लिए एक प्लगइन के लिए यह मुश्किल हो सकता है। (मूल कोड प्लग-इन सामान्य रूप से कुछ ग्राफिक्स फ्रेम में लिखते हैं जो पेज में एम्बेडेड होता है।)
मैं आपको सर्वलेट का एक पूरा उदाहरण दिखाऊंगा और कैसे ajax कॉल करूंगा।
यहां, हम सर्वलेट का उपयोग करके लॉगिन फ़ॉर्म बनाने के लिए सरल उदाहरण बनाने जा रहे हैं।
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 सर्वलेट कोड: -
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 के साथ, वेब एप्लिकेशन डेटा भेज सकते हैं, और डेटा को पुनः प्राप्त कर सकते हैं, अतुल्यकालिक नीचे एक सर्वर उदाहरण कोड है:
जेएसपी पेज जावा स्क्रिप्ट स्क्रिप्ट दो चर नाम और अंतिम नाम के साथ सर्वलेट के लिए डेटा प्रस्तुत करने के लिए:
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 को भेजें (आप पाठ का भी उपयोग कर सकते हैं। बस आपको पाठ के प्रति प्रतिक्रिया सामग्री को बदलने और जावास्क्रिप्ट फ़ंक्शन पर डेटा प्रस्तुत करने की आवश्यकता है।)
/**
* @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")