JSON (JavaScript Object Notation) এবং AJAX (Asynchronous JavaScript and XML) হলো দুটি অত্যন্ত শক্তিশালী প্রযুক্তি, যা একত্রে ব্যবহৃত হলে ওয়েব অ্যাপ্লিকেশনগুলিকে দ্রুত এবং ইন্টারঅ্যাকটিভ করতে সাহায্য করে। JSON ডেটা এক্সচেঞ্জের জন্য ব্যবহৃত হয় এবং AJAX ডেটা অ্যাসিনক্রোনাসভাবে সার্ভার থেকে ক্লায়েন্টে বা ক্লায়েন্ট থেকে সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। AJAX ব্যবহার করে আপনি JSON ডেটা পাঠাতে এবং গ্রহণ করতে পারেন, যা ওয়েব পেজের রিফ্রেশ ছাড়াই ডাইনামিকভাবে কন্টেন্ট লোড করার সুবিধা প্রদান করে।
এই উদাহরণে, আমরা দেখব কিভাবে JSON এবং AJAX একত্রে ব্যবহার করে ডেটা লোড এবং প্রদর্শন করা যায়।
AJAX ব্যবহার করে JSON ডেটা সার্ভার থেকে ক্লায়েন্টে পাঠানো বা গ্রহণ করা হয়। JavaScript এর মাধ্যমে এই রিকোয়েস্ট তৈরি করা হয়। এখানে, আমরা একটি উদাহরণ দেখব যেখানে AJAX রিকোয়েস্ট সার্ভারে পাঠানো হয় এবং সার্ভার JSON ডেটা ফেরত পাঠায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON and AJAX Example</title>
<script>
function loadUserData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "getUserData", true); // AJAX রিকোয়েস্ট সার্ভারে পাঠানো
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var userData = JSON.parse(xhr.responseText); // JSON ডেটা পার্সিং
document.getElementById("userInfo").innerHTML =
"Name: " + userData.name + "<br>" +
"Age: " + userData.age + "<br>" +
"City: " + userData.city;
}
};
xhr.send();
}
</script>
</head>
<body>
<h2>AJAX and JSON Integration Example</h2>
<button onclick="loadUserData()">Load User Data</button>
<div id="userInfo"></div>
</body>
</html>
এখানে, AJAX রিকোয়েস্ট সার্ভারে "getUserData" URL পাঠায়। সার্ভার থেকে প্রাপ্ত JSON ডেটা পরবর্তী স্টেপে JavaScript দিয়ে পার্স করা হয় এবং HTML পেজে দেখানো হয়।
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class GetUserDataServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
// JSON ডেটা তৈরি
String jsonData = "{ \"name\": \"John\", \"age\": 30, \"city\": \"New York\" }";
// JSON ডেটা পাঠানো
out.print(jsonData);
out.flush();
}
}
এখানে, Java Servlet এ একটি GET রিকোয়েস্টের মাধ্যমে JSON ডেটা তৈরি করা হচ্ছে এবং ক্লায়েন্টে পাঠানো হচ্ছে।
JSON ডেটা হল কী-ভ্যালু পেয়ার অথবা অ্যারে। JSON ডেটার মধ্যে কী হিসেবে সাধারণত স্ট্রিং ব্যবহৃত হয় এবং তার মান হতে পারে স্ট্রিং, সংখ্যা, অবজেক্ট বা অ্যারে। সার্ভার থেকে JSON ডেটা পাঠানোর ক্ষেত্রে, এটি সাধারণত application/json কনটেন্ট টাইপ হিসেবে পাঠানো হয়।
{
"name": "John",
"age": 30,
"city": "New York"
}
এখানে, name, age, এবং city হল কী এবং তাদের মান হল যথাক্রমে John, 30, এবং New York।
AJAX এর মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে JSON ডেটা অ্যাসিনক্রোনাসভাবে এক্সচেঞ্জ করা যায়। ক্লায়েন্ট সাইডে JavaScript ব্যবহার করে JSON ডেটা পাঠানো বা গ্রহণ করা হয়। সার্ভার সাইডে, এটি কোনো Java, PHP, Node.js বা অন্য কোন ব্যাকএন্ড ভাষায় JSON ডেটা তৈরি এবং প্রোসেস করা হতে পারে।
JavaScript-এ JSON ডেটা পার্স করার জন্য JSON.parse() ফাংশন এবং JSON ডেটা জেনারেট করার জন্য JSON.stringify() ফাংশন ব্যবহার করা হয়।
// JSON ডেটা পার্স করা
var jsonData = '{"name": "John", "age": 30, "city": "New York"}';
var obj = JSON.parse(jsonData);
console.log(obj.name); // John
// JSON ডেটা তৈরি করা
var newObj = {
name: "Alice",
age: 25,
city: "London"
};
var jsonString = JSON.stringify(newObj);
console.log(jsonString);
এখন যদি আপনি JSON ডেটা সার্ভারে পাঠাতে চান, তাহলে AJAX রিকোয়েস্টে সেটি POST পদ্ধতিতে পাঠানো যাবে।
function sendUserData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitUserData", true);
xhr.setRequestHeader("Content-Type", "application/json");
var userData = {
name: "Alice",
age: 25,
city: "London"
};
// JSON.stringify() ব্যবহার করে JSON ডেটা পাঠানো
xhr.send(JSON.stringify(userData));
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("Data submitted successfully");
}
};
}
এখানে, POST রিকোয়েস্টের মাধ্যমে userData অবজেক্ট JSON ফরম্যাটে সার্ভারে পাঠানো হচ্ছে।
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class SubmitUserDataServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
BufferedReader reader = new BufferedReader(new InputStreamReader(request.getInputStream()));
StringBuilder jsonData = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
jsonData.append(line);
}
// JSON ডেটা প্রোসেস করা
System.out.println("Received Data: " + jsonData.toString());
response.setContentType("application/json");
PrintWriter out = response.getWriter();
out.print("{\"message\": \"User data received successfully\"}");
out.flush();
}
}
এখানে, Servlet POST রিকোয়েস্ট থেকে JSON ডেটা গ্রহণ করছে এবং তা প্রিন্ট করছে।
AJAX এবং JSON Integration ওয়েব অ্যাপ্লিকেশনগুলিকে আরও ইন্টারঅ্যাকটিভ এবং দ্রুত করে তোলে। AJAX ব্যবহার করে আমরা সার্ভার থেকে ডেটা অ্যাসিনক্রোনাসভাবে গ্রহণ এবং পাঠাতে পারি, এবং JSON ব্যবহার করে ডেটা সঠিকভাবে স্ট্রাকচার করা হয়। এই দুটি প্রযুক্তি একত্রে ব্যবহার করলে, আমরা ওয়েব পেজ রিফ্রেশ ছাড়াই ডাইনামিকভাবে কন্টেন্ট লোড করতে পারি এবং API কলগুলোর মাধ্যমে ডেটা প্রক্রিয়া করতে পারি।
AJAX (Asynchronous JavaScript and XML) হল একটি ওয়েব ডেভেলপমেন্ট প্রযুক্তি যা ব্যবহারকারীদের ওয়েব পেজ রিফ্রেশ না করে ডাইনামিকভাবে সার্ভার থেকে ডেটা লোড করতে সাহায্য করে। AJAX সাধারণত XMLHttpRequest অবজেক্ট ব্যবহার করে ডেটা আদান-প্রদান করে, তবে আজকাল JSON সাধারণত ডেটা এক্সচেঞ্জের জন্য ব্যবহৃত হয় কারণ এটি আরও হালকা এবং দ্রুত।
এই প্রক্রিয়ায়, AJAX এর মাধ্যমে JSON ডেটা সার্ভার থেকে লোড করা হয় এবং ওয়েব পেজে ডাইনামিকভাবে প্রদর্শিত হয়। Java এর মাধ্যমে সার্ভার সাইডে JSON ডেটা জেনারেট করা হয় এবং তারপর ক্লায়েন্ট সাইডে AJAX রিকোয়েস্টের মাধ্যমে লোড করা হয়।
এখানে আমরা একটি Java সার্ভলেট উদাহরণ ব্যবহার করব, যা JSON ডেটা রিটার্ন করবে।
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import org.json.JSONObject;
public class JsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// JSON ডেটা তৈরি করা
JSONObject jsonResponse = new JSONObject();
jsonResponse.put("name", "John");
jsonResponse.put("age", 30);
jsonResponse.put("city", "New York");
// রেসপন্স টাইপ সেট করা
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
// JSON ডেটা আউটপুট করা
PrintWriter out = response.getWriter();
out.print(jsonResponse.toString());
out.flush();
}
}
এখানে, JsonServlet ক্লাসটি একটি GET রিকোয়েস্ট গ্রহণ করবে এবং JSON ডেটা রিটার্ন করবে। রেসপন্সের কনটেন্ট টাইপ application/json সেট করা হয়েছে, যা ব্রাউজারকে জানায় যে রেসপন্স JSON ফরম্যাটে রয়েছে।
এখন, আমরা JavaScript এর মাধ্যমে AJAX ব্যবহার করে সার্ভার থেকে JSON ডেটা লোড করব এবং তা পেজে প্রদর্শন করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX JSON Example</title>
<script>
// AJAX ফাংশন ব্যবহার করে JSON ডেটা লোড করা
function loadData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি
xhr.open("GET", "JsonServlet", true); // সার্ভলেট URL দিন
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// JSON ডেটা রেসপন্স হিসেবে পাওয়া গেলে
var jsonData = JSON.parse(xhr.responseText);
document.getElementById("name").innerText = "Name: " + jsonData.name;
document.getElementById("age").innerText = "Age: " + jsonData.age;
document.getElementById("city").innerText = "City: " + jsonData.city;
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
</script>
</head>
<body>
<button onclick="loadData()">Load JSON Data</button>
<div id="name"></div>
<div id="age"></div>
<div id="city"></div>
</body>
</html>
এখানে:
JsonServlet এ।AJAX এর মাধ্যমে JSON ডাটা লোড করা আধুনিক ওয়েব অ্যাপ্লিকেশনগুলোতে একটি গুরুত্বপূর্ণ পদ্ধতি, যা ব্যবহারকারীদেরকে দ্রুত এবং ডাইনামিক ওয়েব পেজের অভিজ্ঞতা প্রদান করে। Java সার্ভার সাইডে JSON রেসপন্স তৈরির মাধ্যমে, AJAX ব্যবহার করে ক্লায়েন্ট সাইডে JSON ডেটা লোড করা হয় এবং ওয়েব পেজে তা ডাইনামিকভাবে প্রদর্শিত হয়।
XMLHttpRequest এবং Fetch API দুটি এমন প্রযুক্তি যা JavaScript ব্যবহার করে সার্ভারের সাথে asynchronous (অসিঙ্ক্রোনাস) ডেটা আদান-প্রদান করার জন্য ব্যবহৃত হয়। ওয়েব অ্যাপ্লিকেশনে ডেটা ফেচ করা এবং সার্ভারের সাথে যোগাযোগ করতে এই দুটি API অত্যন্ত গুরুত্বপূর্ণ।
XMLHttpRequest হল একটি পুরোনো API, যা JavaScript ব্যবহার করে সার্ভারের সাথে ডেটা পাঠানোর এবং গ্রহণ করার জন্য ব্যবহৃত হয়। এটি একটি asynchronous HTTP রিকোয়েস্ট তৈরি করে, যার মাধ্যমে ওয়েব পেজ পুনরায় লোড না করে সার্ভার থেকে ডেটা ফেচ করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest Example</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি
xhr.open('GET', 'data.json', true); // GET রিকোয়েস্ট
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = 'Name: ' + data.name;
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
</script>
</head>
<body>
<button onclick="fetchData()">ডেটা লোড করুন</button>
<div id="result"></div>
</body>
</html>
এখানে:
result) তে JSON ডেটা প্রদর্শিত হবে।{
"name": "John Doe",
"age": 30
}
এখানে, data.json ফাইল থেকে নাম প্রদর্শন করা হচ্ছে।
Fetch API হল একটি আধুনিক ওয়েব API যা XMLHttpRequest এর পরিবর্তে ব্যবহার করা যায়। এটি ওয়েব পেজে HTTP রিকোয়েস্ট পাঠাতে এবং রেসপন্স পেতে একটি সরল এবং সমৃদ্ধ ইন্টারফেস প্রদান করে। Fetch Promise ভিত্তিক, যার ফলে কোডের readability এবং error handling আরও সহজ হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Example</title>
<script>
function fetchData() {
fetch('data.json') // GET রিকোয়েস্ট
.then(response => response.json()) // JSON রেসপন্স প্যার্স করা
.then(data => {
document.getElementById('result').innerHTML = 'Name: ' + data.name;
})
.catch(error => console.error('Error:', error)); // Error handling
}
</script>
</head>
<body>
<button onclick="fetchData()">ডেটা লোড করুন</button>
<div id="result"></div>
</body>
</html>
এখানে:
data.json ফাইল ফেচ করা হয়েছে।.then() মেথড ব্যবহার করে JSON রেসপন্স প্যার্স করা হয়েছে।.catch() মেথড দিয়ে ত্রুটি পরিচালনা করা হয়েছে।{
"name": "Jane Doe",
"age": 28
}
এখানে, Fetch API ব্যবহার করে JSON ডেটা ফেচ করা হচ্ছে এবং পেজে name প্রদর্শিত হচ্ছে।
| বৈশিষ্ট্য | XMLHttpRequest | Fetch API |
|---|---|---|
| অ্যাসিনক্রোনাস প্রসেসিং | সাপোর্টেড (callback function) | Promise ভিত্তিক (অধিক সহজ এবং উন্নত) |
| সিম্পল সিঙ্ক্রোনাস/অ্যাসিনক্রোনাস | সিঙ্ক্রোনাসও ব্যবহার করা যেতে পারে | শুধুমাত্র অ্যাসিনক্রোনাস |
| Error Handling | .onerror বা try-catch ব্যবহৃত হয় | .catch() Promise error handling |
| API | পুরোনো এবং জটিল | আধুনিক এবং সরল |
| JSON রেসপন্স প্যার্সিং | ম্যানুয়ালি JSON.parse() ব্যবহার করা হয় | .json() মেথড দ্বারা সরাসরি JSON প্যার্স করা যায় |
| অবজেক্ট স্ট্রাকচার | callback স্টাইল | Promise চেইনিং স্টাইল |
AJAX (Asynchronous JavaScript and XML) এবং JSON (JavaScript Object Notation) একসাথে ব্যবহার করা হয় ওয়েব পেজের ডাইনামিক কনটেন্ট লোড করার জন্য, যেখানে পেজটি পুরোপুরি রিফ্রেশ না করে শুধুমাত্র প্রয়োজনীয় ডেটা লোড করা হয়। AJAX এর মাধ্যমে আপনি Asynchronous Data Handling করতে পারেন, অর্থাৎ ক্লায়েন্ট সাইডে সার্ভারের সাথে ডেটা এক্সচেঞ্জ করতে পারেন এবং পেজ রিফ্রেশ না করেই প্রয়োজনীয় ডেটা প্রদর্শন করতে পারেন। JSON সাধারণত ডেটা এক্সচেঞ্জের ফরম্যাট হিসেবে ব্যবহৃত হয়, কারণ এটি হালকা এবং দ্রুত পার্স করা যায়।
এখানে, আমরা দেখব কিভাবে AJAX এবং JSON এর মাধ্যমে Asynchronous Data Handling করা যায়।
AJAX হল একটি ওয়েব ডেভেলপমেন্ট কৌশল যা ক্লায়েন্ট সাইডের জাভাস্ক্রিপ্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করতে সক্ষম। এটি পেজ রিফ্রেশ না করে ওয়েব পেজের কন্টেন্ট আপডেট করতে সাহায্য করে। AJAX সাধারণত XMLHttpRequest অবজেক্ট ব্যবহার করে সার্ভারের সাথে যোগাযোগ স্থাপন করে।
JSON (JavaScript Object Notation) একটি হালকা ও দ্রুত ডেটা এক্সচেঞ্জ ফরম্যাট যা ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ডেটা পাঠানোর জন্য খুবই জনপ্রিয়। JSON ডেটা স্ট্রিং আকারে থাকে এবং এটি JavaScript অবজেক্টের সাদৃশ্যপূর্ণ, যা JavaScript দ্বারা সহজেই পার্স করা যায়।
আমরা এখানে একটি উদাহরণ দেখাব যেখানে:
প্রথমে আমরা একটি HTML পেজ তৈরি করব যেখানে একটি বাটন ক্লিক করলে AJAX রিকোয়েস্ট সার্ভারে পাঠানো হবে। সার্ভার থেকে JSON ডেটা ফেচ করা হবে এবং তারপর ওয়েব পেজে তা প্রদর্শন করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX and JSON Example</title>
</head>
<body>
<h2>AJAX and JSON Example</h2>
<button onclick="fetchData()">Get Data</button>
<div id="data-container"></div>
<script>
function fetchData() {
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Configure it: GET-request for the URL /data
xhr.open('GET', 'data.json', true);
// Set the function to handle the response
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
// Parse the JSON response
var data = JSON.parse(xhr.responseText);
// Update the page content
var output = '<ul>';
for (var i = 0; i < data.length; i++) {
output += '<li>' + data[i].name + ' - ' + data[i].age + ' years old</li>';
}
output += '</ul>';
document.getElementById('data-container').innerHTML = output;
} else {
console.error('Request failed with status ' + xhr.status);
}
};
// Send the request
xhr.send();
}
</script>
</body>
</html>
এখানে:
XMLHttpRequest ব্যবহার করা হয়েছে।fetchData() ফাংশনটি কল করলে, এটি GET রিকোয়েস্ট পাঠায় সার্ভারে (এখানে আমরা একটি data.json ফাইল ফেচ করছি)।xhr.responseText থেকে পাওয়া যায় এবং JSON.parse() এর মাধ্যমে JavaScript অবজেক্টে রূপান্তর করা হয়।এখন, আমরা একটি JSON ফাইল তৈরি করব যা সার্ভার থেকে ফেচ করা হবে।
[
{
"name": "John Doe",
"age": 30
},
{
"name": "Jane Smith",
"age": 25
},
{
"name": "George Brown",
"age": 35
}
]
এটি একটি সাধারণ JSON অ্যারে যেখানে প্রতিটি অবজেক্টে name এবং age ফিল্ড রয়েছে।
যখন আপনি HTML পেজে "Get Data" বাটনটি ক্লিক করবেন, তখন AJAX রিকোয়েস্ট data.json ফাইলটি সার্ভার থেকে ফেচ করবে এবং xhr.onload ফাংশনে JSON ডেটা প্রক্রিয়াজাত করা হবে। তারপর, JSON ডেটার প্রতিটি আইটেম name এবং age প্রপার্টি সহ HTML পেজে প্রদর্শিত হবে।
যদিও এই উদাহরণে data.json ফাইলটি সরাসরি ক্লায়েন্ট সাইড থেকে ফেচ করা হচ্ছে, আপনি যদি সার্ভার থেকে ডাইনামিক JSON ডেটা পাঠাতে চান, তাহলে একটি সার্ভার তৈরি করতে হবে যা AJAX রিকোয়েস্টের মাধ্যমে JSON রেসপন্স পাঠাবে। এটি সাধারণত Java, Node.js, PHP, বা অন্য সার্ভার সাইড ভাষা ব্যবহার করে করা হয়।
AJAX এবং JSON এর মাধ্যমে Asynchronous Data Handling ওয়েব অ্যাপ্লিকেশনের জন্য একটি শক্তিশালী কৌশল। এটি আপনাকে ওয়েব পেজের পুরোপুরি রিফ্রেশ না করেই ডাইনামিকভাবে ডেটা লোড এবং প্রদর্শন করার সুযোগ দেয়। AJAX ক্লায়েন্ট সাইডের জাভাস্ক্রিপ্ট ব্যবহার করে সার্ভারের সাথে যোগাযোগ করে, এবং JSON হল ডেটা এক্সচেঞ্জের জন্য দ্রুত এবং হালকা ফরম্যাট। এই কৌশলটি সাইটের রেসপন্সিভনেস এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
AJAX (Asynchronous JavaScript and XML) এবং JSON (JavaScript Object Notation) একটি শক্তিশালী সংমিশ্রণ যা ডাইনামিক ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। AJAX ব্যবহার করে ওয়েব পেজের কন্টেন্ট সার্ভার থেকে ব্যাকগ্রাউন্ডে লোড করা যায়, যাতে পেজ রিফ্রেশ না করেই নতুন তথ্য ইউজারকে প্রদর্শন করা যায়। JSON ডেটার মাধ্যমে, আমরা সহজেই ডেটা আদান-প্রদান করতে পারি।
এই উদাহরণে, আমরা দেখব কিভাবে AJAX এবং JSON ব্যবহার করে একটি ডাইনামিক ওয়েব পেজ তৈরি করা যায়, যেখানে ক্লায়েন্ট সাইডের জাভাস্ক্রিপ্ট এবং সার্ভার সাইডের জাভা (Servlet) যুক্ত হয়ে ডেটা এক্সচেঞ্জ করবে।
HTML পেজের মধ্যে একটি ফর্ম থাকবে যা ইউজারের ইনপুট নিবে, এবং AJAX কল করবে সার্ভারকে ডাইনামিকভাবে ডেটা রিট্রাইভ করার জন্য। এখানে আমরা একটি সহজ ইনপুট ফর্ম এবং একটি বাটন তৈরি করব যা ইউজার ক্লিক করার পর AJAX রিকোয়েস্ট পাঠাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX with JSON Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>AJAX and JSON Example</h2>
<!-- Form for input -->
<label for="userName">Enter your name:</label>
<input type="text" id="userName" name="userName">
<button onclick="getGreeting()">Get Greeting</button>
<!-- Placeholder for dynamic content -->
<div id="result"></div>
<script type="text/javascript">
// AJAX function to call the Java Servlet
function getGreeting() {
var name = document.getElementById("userName").value;
$.ajax({
url: "GreetingServlet",
type: "GET",
data: { name: name },
dataType: "json", // Expecting JSON response
success: function(response) {
// Dynamically update the page with JSON response
document.getElementById("result").innerHTML = "Hello, " + response.greeting;
},
error: function(xhr, status, error) {
console.error("Error: " + error);
}
});
}
</script>
</body>
</html>
Explanation:
GET রিকোয়েস্ট পাঠাবে name প্যারামিটারসহ।এখন সার্ভার সাইডে একটি Java Servlet তৈরি করতে হবে যা ইউজারের কাছ থেকে প্রাপ্ত নামকে গ্রহণ করবে এবং JSON ফরম্যাটে একটি গ্রীটিং মেসেজ রিটার্ন করবে।
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import org.json.JSONObject;
public class GreetingServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Get the name from the request
String name = request.getParameter("name");
// Create a JSON object
JSONObject jsonResponse = new JSONObject();
// Prepare the greeting message
if (name != null && !name.isEmpty()) {
jsonResponse.put("greeting", "Hello, " + name + "!");
} else {
jsonResponse.put("greeting", "Hello, Guest!");
}
// Set response content type to JSON
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
// Send the JSON response
PrintWriter out = response.getWriter();
out.print(jsonResponse.toString());
out.flush();
}
}
Explanation:
name প্যারামিটার গ্রহণ করে।AJAX রিকোয়েস্টটি JavaScript দ্বারা পাঠানো হয়, এবং সার্ভার থেকে JSON রেসপন্স পাওয়ার পর, JavaScript পেজে রেসপন্স ডাইনামিকভাবে প্রদর্শন করে। পূর্বের HTML কোডের মধ্যে AJAX কলের জন্য JavaScript অংশ যুক্ত করা হয়েছে।
web.xml ফাইলে সার্ভলেটটি মেপ করতে হবে যাতে এটি ক্লায়েন্ট সাইড থেকে ঠিকভাবে কল করা যায়।
<servlet>
<servlet-name>GreetingServlet</servlet-name>
<servlet-class>GreetingServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GreetingServlet</servlet-name>
<url-pattern>/GreetingServlet</url-pattern>
</servlet-mapping>
এই উদাহরণে, AJAX এবং JSON ব্যবহার করে একটি ডাইনামিক ওয়েব পেজ তৈরি করা হয়েছে। ক্লায়েন্ট সাইডে একটি AJAX request পাঠানো হচ্ছে সার্ভারে, এবং সার্ভার সাইডে একটি Java Servlet JSON আউটপুট দিয়ে উত্তর প্রদান করছে। JSON এর মাধ্যমে সহজে ডেটা এক্সচেঞ্জ করা সম্ভব হয়েছে, এবং AJAX ব্যবহার করে পেজ রিফ্রেশ না করেই ডাইনামিক কন্টেন্ট লোড করা হয়েছে। এই ধরনের পদ্ধতি modern web development-এ ব্যাপকভাবে ব্যবহৃত হয়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
