334

আমি ওয়েব অ্যাপস এবং সার্লেটগুলিতে খুব নতুন এবং আমার নীচের প্রশ্নটি রয়েছে:

আমি যখনই সার্ভলেটের অভ্যন্তরে কিছু মুদ্রণ করি এবং ওয়েব ব্রাউজার দ্বারা কল করি, এটি সেই পাঠ্যযুক্ত একটি নতুন পৃষ্ঠা দেয়। আজাক্স ব্যবহার করে বর্তমান পৃষ্ঠায় পাঠ্য মুদ্রণের কোনও উপায় আছে কি?

— আমির রাছুম
সূত্র

561

প্রকৃতপক্ষে, মূলশব্দটি "অজ্যাক্স": অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল । যাইহোক, গত বছরগুলি এটি প্রায়শই অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং জেএসএন এর চেয়ে বেশি । মূলত, আপনি জেএসকে একটি অ্যাসিনক্রোনাস এইচটিটিপি অনুরোধ কার্যকর করতে এবং প্রতিক্রিয়া তথ্যের ভিত্তিতে এইচটিএমএল ডিওএম ট্রি আপডেট করতে দিন।

যেহেতু এটি সমস্ত ব্রাউজারগুলিতে (বিশেষত ইন্টারনেট এক্সপ্লোরার বনাম অন্যদের) জুড়ে কাজ করা একেবারে ক্লান্তিকর কাজ, তাই প্রচুর জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা এটি একক ফাংশনগুলিতে সহজ করে তোলে এবং ব্রাউজার-নির্দিষ্ট বাগ / হুডের নীচে যতগুলি সম্ভব কভারগুলি অন্তর্ভুক্ত করে covers যেমন jQuery , প্রোটোটাইপ , Mootools । যেহেতু আজকাল jQuery সবচেয়ে জনপ্রিয়, আমি এটি নীচের উদাহরণগুলিতে ব্যবহার করব।

Kickoff উদাহরণ ফিরে `String`প্লেইন টেক্সট হিসাবে

/some.jspনীচের মত একটি তৈরি করুন (দ্রষ্টব্য: কোডটি সাবফোল্ডারে জেএসপি ফাইল স্থাপনের আশা করে না, যদি আপনি এটি করেন তবে সে অনুযায়ী সার্লেট ইউআরএল পরিবর্তন করুন):

<!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.
}

এই সার্ভলেটটি নীচে /someservletবা ইউআরএল প্যাটার্নে মানচিত্র করুন /someservlet/*(স্পষ্টতই, ইউআরএল প্যাটার্নটি আপনার পছন্দের জন্য নিখরচায়, তবে আপনাকে someservletসেই অনুযায়ী সমস্ত জায়গায় জেএস কোডের উদাহরণগুলিতে URL পরিবর্তন করতে হবে):

@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
    // ...
}

অথবা, আপনি যখন কোনও সার্লেট ৩.০ সামঞ্জস্যপূর্ণ ধারকটিতে নেই (টমক্যাট,, গ্লাসফিশ 3, জবস এএস,, ইত্যাদি) বা তারপরে, তখন এটি 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: // লোকালহোস্ট: 8080 / প্রসঙ্গ / টেস্ট.জেএসপি খুলুন এবং বোতামটি টিপুন। আপনি দেখতে পাবেন যে সার্ভলেটের প্রতিক্রিয়া দিয়ে ডিভের সামগ্রীটি আপডেট হবে।

জেএসএন `List<String>`হিসাবে ফিরছে

সঙ্গে তাদেরকে JSON পরিবর্তে প্রতিক্রিয়া বিন্যাস যেমন প্লেইন আপনি এমনকি কিছু পদক্ষেপ পেতে পারেন। এটি আরও গতিশীলতার অনুমতি দেয়। প্রথমত, আপনার কাছে জাভা অবজেক্ট এবং জেএসএন স্ট্রিংয়ের মধ্যে রূপান্তর করার জন্য একটি সরঞ্জাম থাকতে হবে। এগুলি প্রচুর পরিমাণে রয়েছে (ওভারভিউয়ের জন্য এই পৃষ্ঠার নীচে দেখুন )। আমার ব্যক্তিগত প্রিয় গুগল 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.parse()পরে ম্যানুয়ালি ঝাঁকুনির প্রয়োজন হবে, যদি আপনি সম্পূর্ণরূপে অপ্রয়োজনীয় হন তবে আপনি কন্টেন্ট টাইপ প্রথম স্থানে সেট করুন।

জেএসএন `Map<String, String>`হিসাবে ফিরছে

এখানে অন্য উদাহরণ যা প্রদর্শিত 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);
}

এবং জেএসপি:

$(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>`হিসাবে ফিরছে

এখানে একটি উদাহরণ যা প্রদর্শন এর 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>` এক্সএমএল যেমন

এখানে এমন একটি উদাহরণ রয়েছে যা পূর্ববর্তী উদাহরণের মতো কার্যকরভাবে কার্যকর করে তবে জেএসএনের পরিবর্তে এক্সএমএল দিয়ে। জেএসপিকে এক্সএমএল আউটপুট জেনারেটর হিসাবে ব্যবহার করার সময় আপনি দেখতে পাবেন যে টেবিলটি এবং সমস্ত কোড কোড করা কম ক্লান্তিকর। ফলাফলটি পুনরাবৃত্তি করতে এবং সার্ভার সাইডের ডেটা ফর্ম্যাটিং সম্পাদন করতে আপনি এটি ব্যবহার করতে পারবেন বলে জেএসটিএল আরও বেশি সহায়ক। সার্ভলেট:

@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".
    });
});

আপনি সম্ভবত এখনই বুঝতে পারবেন যে এক্সএএমএল এজ্যাক্স ব্যবহার করে এইচটিএমএল ডকুমেন্ট আপডেট করার নির্দিষ্ট উদ্দেশ্যে JSON এর চেয়ে অনেক বেশি শক্তিশালী। জেএসএন মজার, তবে সর্বোপরি তথাকথিত "পাবলিক ওয়েব পরিষেবা" এর জন্য কেবল কার্যকর useful মত MVC ফ্রেমওয়ার্ক JSF তাদের Ajax যাদু জন্য কভার অধীনে ব্যবহার এক্সএমএল।

একটি বিদ্যমান ফর্ম Ajaxifier

আপনি $.serialize()স্বতন্ত্র ফর্ম ইনপুট পরামিতিগুলি সংগ্রহ এবং পাস করে চারপাশে ফিড না দিয়ে সহজেই বিদ্যমান পোষ্ট ফর্মগুলিকে বাড়িয়ে তোলার জন্য 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- এনকোডে রূপান্তর করতে পারেন ক্যোয়ারী স্ট্রিং।

var params = {
    foo: "fooValue",
    bar: "barValue",
    baz: "bazValue"
};

$.post("someservlet", $.param(params), function(response) {
    // ...
});

doPost()উপরে বর্ণিত একই পদ্ধতিটি পুনরায় ব্যবহার করা যেতে পারে। মনে রাখবেন যে উপরের সিনট্যাক্সটি $.get()jQuery এবং এর সাথেও কাজ করেdoGet() সার্লেটতেও কাজ করে।

সার্লেলে ম্যানুয়ালি JSON অবজেক্ট পাঠানো

তবে আপনি সামগ্রিকভাবে পরিবর্তে কিছু কারণে পৃথক অনুরোধ মাপকাঠিগুলি যেমন 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(EXPECTED) ধরণ প্রতিনিধিত্ব করে প্রতিক্রিয়া শরীর, যা সাধারণত অপ্রয়োজনীয় হিসাবে jQuery ইতিমধ্যেই প্রতিক্রিয়া এর উপর ভিত্তি করে এটা autodetects Content-Typeহেডার।

তারপরে, সার্লেলে জেএসএন অবজেক্টটি প্রক্রিয়া করার জন্য যা পৃথক অনুরোধের প্যারামিটার হিসাবে প্রেরণ করা হয়নি তবে পুরো JSON স্ট্রিং হিসাবে উপরের উপায়ে, আপনি কেবল অনুরোধের বডিটি getParameter()স্বাভাবিকভাবে ব্যবহারের পরিবর্তে একটি JSON সরঞ্জাম ব্যবহার করে পার্স করতে হবে উপায়। যথা, সার্লেলেটগুলি application/jsonবিন্যাসিত অনুরোধগুলি সমর্থন করে না , তবে কেবল application/x-www-form-urlencodedবা multipart/form-dataবিন্যাসিত অনুরোধগুলি। জসন কোনও জেএসওএন স্ট্রিংকে একটি জেএসএন বস্তুতে পার্সিং সমর্থন করে।

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()এজ্যাক্স অনুরোধটি কেবল প্রেরণ বা পুনঃনির্দেশিত করবে এবং মূল ডকুমেন্ট / উইন্ডো নয় যেখানে এজাক্স অনুরোধের সূচনা হয়েছিল। জাভাস্ক্রিপ্ট / jQuery কেবলমাত্র responseTextকলব্যাক ফাংশনে পরিবর্তনশীল হিসাবে পুনঃনির্দেশিত / ফরোয়ার্ড প্রতিক্রিয়া পুনরুদ্ধার করতে পারে। যদি এটি একটি পুরো এইচটিএমএল পৃষ্ঠা উপস্থাপন করে এবং এজ্যাক্স-নির্দিষ্ট এক্সএমএল বা জেএসওএন প্রতিক্রিয়াটিকে নয়, তবে আপনি যা করতে পারেন তা হ'ল বর্তমান দস্তাবেজটিকে এটির সাথে প্রতিস্থাপন করা।

document.open();
document.write(responseText);
document.close();

নোট করুন যে এটি ইউআরএলটিকে ব্রাউজারের ঠিকানা দন্ডে দেখে যেমন পরিবর্তন করে না। তাই বুকমার্কযোগ্যতা নিয়ে সমস্যা রয়েছে। অতএব, জাভাস্ক্রিপ্ট / 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;
    }

    // ...
}

আরো দেখুন:

— BalusC
সূত্র

শেষ উদাহরণে জসনকে পার্স করা দরকার।

— shinzou

4

@কহাকু: না আপনি যদি উপরে থেকে নীচে পোস্টটি পড়েন তবে আপনি কেন তা শিখবেন।

— বালুসসি

1

এই উত্তরটি গত একমাস বা আমার জন্য দীর্ঘ লাইফলাইন। এটি থেকে একগুচ্ছ শিখছি। আমি এক্সএমএল উদাহরণটি ভালবাসি। এটি একসাথে রাখার জন্য ধন্যবাদ! একটি noob প্রশ্ন যদিও আপনার সময় আছে। ওয়েব-আইএনএফ-তে এক্সএমএল ফোল্ডার লাগানোর কোনও কারণ আছে কি?

— জোনাথন লালিবার্তে

1

@ জোনাথানলালিবার্ট: সুতরাং ব্যবহারকারীরা সেগুলি ডাউনলোড করতে পারবেন না।

— বালুস সি

@ বালুস, আপনার এক্সএমএল উদাহরণ দুর্দান্ত, আপনাকে ধন্যবাদ। তবে আমি $("#somediv").html($(responseXml).find("data").html())এই লাইনের জন্য "অপরিজ্ঞাত বা নাল রেফারেন্সের সম্পত্তি 'প্রতিস্থাপন' পেতে অক্ষম" পাচ্ছি । এটি "আর্গুমেন্টের ভুল সংখ্যা বা অবৈধ সম্পত্তি নিয়োগ "ও বলে। আমি এটিও দেখতে পারি যে আমার এক্সএমএলটি যখন আমি এটির ডিবাগ করি তখন ডেটা দিয়ে জনবহুল হয়। কোন ধারনা ?

— 629

14

ব্যবহারকারীর ব্রাউজারে প্রদর্শিত পৃষ্ঠাটি আপডেট করার সঠিক উপায়টি (এটি পুনরায় লোড না করে) ব্রাউজারে কিছু কোড এক্সিকিউটিভ করা পৃষ্ঠার ডিওএম আপডেট করে।

এই কোডটি সাধারণত জাভাস্ক্রিপ্ট যা এম্বেড করা হয় বা এইচটিএমএল পৃষ্ঠা থেকে লিঙ্ক করা হয়, এজন্য এজেএক্স পরামর্শ। (প্রকৃতপক্ষে, আমরা যদি ধরে নিই যে আপডেট হওয়া পাঠ্যটি এইচটিটিপি অনুরোধের মাধ্যমে সার্ভার থেকে আসে তবে এটি ক্লাসিক এজেএক্স)

কিছু ব্রাউজার প্লাগইন ব্যবহার করে বা অ্যাড-অন ব্যবহার করে এই জাতীয় জিনিসটি প্রয়োগ করাও সম্ভব, যদিও ডিওএম আপডেট করার জন্য কোনও প্লাগইন ব্রাউজারের ডেটা স্ট্রাকচারগুলিতে পৌঁছতে অসুবিধা হতে পারে। (নেটিভ কোড প্লাগইনগুলি সাধারণত কিছু গ্রাফিক্স ফ্রেমে লিখুন যা পৃষ্ঠায় এমবেড করা আছে))

— স্টিফেন সি
সূত্র

13

আমি আপনাকে সার্লেট এবং কীভাবে এজ্যাক্স কল করব তার পুরো উদাহরণ দেখাব।

এখানে, আমরা সার্লেলেট ব্যবহার করে লগইন ফর্ম তৈরির সহজ উদাহরণ তৈরি করতে যাচ্ছি।

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);           
            }           
        });

লগইন সার্ভেলেট সার্লেট কোড: -

    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);
        } 
    }
}

— মিতুল মহেশ্বরী
সূত্র

8

$.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);
 }
});

— SUBZ
সূত্র

7

অ্যাসিনক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল এর সংক্ষিপ্ত রূপ অ্যাজাক্স (এছাড়াও এজেএক্স) হ'ল সংযুক্ত ওয়েব অ্যাপ্লিকেশনগুলি তৈরি করতে ক্লায়েন্ট-সাইডে ব্যবহৃত আন্তঃসম্পর্কিত ওয়েব বিকাশ কৌশল group অ্যাজাক্সের সাহায্যে ওয়েব অ্যাপ্লিকেশনগুলি ডেটা প্রেরণ করতে এবং এ থেকে ডেটা পুনরুদ্ধার করতে পারে, নীচে একটি সার্ভারের নীচে উদাহরণ কোড রয়েছে:

দুটি ভেরিয়েবল ফার্সনেম এবং লাস্টনাম সহ সার্লেলে ডেটা জমা দেওয়ার জন্য জেএসপি পৃষ্ঠা জাভা স্ক্রিপ্ট ফাংশন:

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);

    }

ডেটা পড়ার জন্য সার্লেটটি এক্সএমএল ফর্ম্যাটে জেএসপিতে ফেরত পাঠান (আপনি পাঠ্যটিও ব্যবহার করতে পারেন Just কেবল আপনার পাঠ্য প্রতিক্রিয়া সামগ্রীকে জাভাস্ক্রিপ্ট ফাংশনে ডেটা রেন্ডার করতে হবে))

/**
 * @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>");
}

— user3468976
সূত্র

5

সাধারণত আপনি সার্লেট থেকে কোনও পৃষ্ঠা আপডেট করতে পারবেন না। ক্লায়েন্ট (ব্রাউজার) একটি আপডেট অনুরোধ করতে হবে। ইটার ক্লায়েন্ট পুরো নতুন পৃষ্ঠাটি লোড করে বা এটি বিদ্যমান পৃষ্ঠার একটি অংশে আপডেটের অনুরোধ করে। এই কৌশলটির নাম আজাক্স।

— পিটার কেঙ্গো
সূত্র

4

বুটস্ট্র্যাপ মাল্টি সিলেক্ট করুন

আয়াক্স

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")

— ঠাখানি থারেজ
সূত্র

সার্লেটলেট এবং অ্যাজাক্স কীভাবে ব্যবহার করবেন?

Kickoff উদাহরণ ফিরে Stringপ্লেইন টেক্সট হিসাবে

জেএসএন List<String>হিসাবে ফিরছে

জেএসএন Map<String, String>হিসাবে ফিরছে

জেএসএন List<Entity>হিসাবে ফিরছে

ফিরতি List<Entity> এক্সএমএল যেমন

একটি বিদ্যমান ফর্ম Ajaxifier

সার্লেলে ম্যানুয়ালি অনুরোধের পরামিতি প্রেরণ করা হচ্ছে

সার্লেলে ম্যানুয়ালি JSON অবজেক্ট পাঠানো

সার্লেট থেকে পুনর্নির্দেশ পাঠানো হচ্ছে

আরো দেখুন:

Kickoff উদাহরণ ফিরে `String`প্লেইন টেক্সট হিসাবে

জেএসএন `List<String>`হিসাবে ফিরছে

জেএসএন `Map<String, String>`হিসাবে ফিরছে

জেএসএন `List<Entity>`হিসাবে ফিরছে

ফিরতি `List<Entity>` এক্সএমএল যেমন