JavaScript এর মাধ্যমে Asynchronous Requests হ্যান্ডলিং

Ajax এবং Asynchronous Requests - চেরিপাই (CherryPy) - Web Development

278

CherryPy একটি শক্তিশালী পাইথন ভিত্তিক ওয়েব ফ্রেমওয়ার্ক, যা ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। Asynchronous requests হল এমন রিকোয়েস্ট যা ওয়েব পৃষ্ঠার রিফ্রেশ না করেই সার্ভার থেকে ডেটা নিয়ে আসে। এটি ওয়েব অ্যাপ্লিকেশনগুলিকে দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে। JavaScript এবং CherryPy এর মাধ্যমে Asynchronous requests হ্যান্ডলিং খুবই কার্যকর এবং সহজ।

এটি সাধারনত AJAX (Asynchronous JavaScript and XML) টেকনোলজি ব্যবহার করে করা হয়। JavaScript এর মাধ্যমে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো এবং সার্ভার থেকে ফলাফল ফিরিয়ে আনা হয়, এবং পুরো প্রক্রিয়া চলাকালীন ওয়েব পেজ রিফ্রেশ হয় না।


JavaScript এর মাধ্যমে Asynchronous Requests হ্যান্ডলিং

CherryPy তে JavaScript ব্যবহার করে Asynchronous requests পাঠানোর জন্য আপনি AJAX (যেমন, jQuery এর মাধ্যমে) ব্যবহার করতে পারেন। CherryPy তে এই রিকোয়েস্টগুলো GET, POST, বা অন্যান্য HTTP মেথডের মাধ্যমে হ্যান্ডল করা হয়।

উদাহরণ: CherryPy এবং JavaScript (AJAX) এর মাধ্যমে Asynchronous Request

ধরা যাক, আমরা একটি ফর্ম তৈরি করতে চাই, যেখানে ব্যবহারকারী ইনপুট দেয় এবং সেগুলোর উপর ভিত্তি করে সার্ভার থেকে রিয়েল-টাইম ফলাফল ফেরত পাওয়া যায়।

১. CherryPy কোড (Python Backend)

import cherrypy
import json

class AsyncRequestApp:
    @cherrypy.expose
    def index(self):
        return '''
            <html>
            <head>
                <title>AJAX Request Example</title>
                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                <script>
                    function sendRequest() {
                        var name = document.getElementById('name').value;
                        $.ajax({
                            url: '/greet',  // AJAX রিকোয়েস্ট পাঠানোর URL
                            type: 'GET',    // GET মেথড
                            data: { 'name': name },  // ইনপুট ডেটা
                            success: function(response) {
                                // সার্ভার থেকে পাওয়া ডেটা প্রদর্শন
                                document.getElementById('response').innerHTML = response.message;
                            },
                            error: function() {
                                alert('Something went wrong!');
                            }
                        });
                    }
                </script>
            </head>
            <body>
                <h2>Enter your name:</h2>
                <input type="text" id="name" placeholder="Enter your name"/>
                <button onclick="sendRequest()">Submit</button>
                <p id="response"></p>
            </body>
            </html>
        '''

    @cherrypy.expose
    def greet(self, name=None):
        if name:
            return json.dumps({'message': f"Hello, {name}!"})
        return json.dumps({'message': "Hello, Stranger!"})

if __name__ == '__main__':
    cherrypy.quickstart(AsyncRequestApp())

কোড ব্যাখ্যা:

  1. Frontend (HTML + JavaScript):
    • HTML ফর্মের মধ্যে একটি ইনপুট ফিল্ড এবং একটি Submit বাটন রয়েছে।
    • JavaScript (AJAX) ব্যবহার করে ইনপুট ডেটা সার্ভারে পাঠানো হয় এবং সার্ভার থেকে ফলাফল গ্রাহককে পাঠানো হয়, যা পেজ রিফ্রেশ না করেই প্রদর্শিত হয়।
    • jQuery লাইব্রেরি ব্যবহার করে AJAX কল করা হয়েছে, যেখানে GET মেথড ব্যবহার করা হয়েছে এবং ইনপুটের মান সার্ভারে পাঠানো হচ্ছে।
    • সার্ভার থেকে JSON আকারে ফলাফল গ্রহণ করা হয় এবং #response এলিমেন্টে প্রদর্শন করা হয়।
  2. Backend (Python - CherryPy):
    • /greet রুটের জন্য একটি GET মেথড সংজ্ঞায়িত করা হয়েছে, যা ইউজারের নাম গ্রহণ করে এবং একটি স্বাগত বার্তা ফিরিয়ে দেয়।
    • সার্ভার থেকে ডেটা JSON ফরম্যাটে ফিরিয়ে দেয়া হয়, যাতে JavaScript সহজে এটি প্রক্রিয়া করতে পারে।

২. Run the Application:

আপনি python app.py দিয়ে সার্ভারটি চালু করুন এবং ব্রাউজারে গিয়ে http://localhost:8080 এ অ্যাক্সেস করুন।

  • আপনি ইনপুট ফিল্ডে নাম লিখে Submit বাটন ক্লিক করলে, এটি সার্ভারে AJAX রিকোয়েস্ট পাঠাবে এবং সার্ভার থেকে স্বাগত বার্তা প্রদর্শন করবে।

Asynchronous POST Request Example

আমরা যদি POST রিকোয়েস্ট ব্যবহার করতে চাই, তাহলে JavaScript কোডে ছোট পরিবর্তন করতে হবে এবং CherryPy তে POST রিকোয়েস্ট হ্যান্ডল করতে হবে।

উদাহরণ: POST রিকোয়েস্ট

CherryPy কোড:
import cherrypy
import json

class AsyncRequestApp:
    @cherrypy.expose
    def index(self):
        return '''
            <html>
            <head>
                <title>AJAX POST Request Example</title>
                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                <script>
                    function sendRequest() {
                        var name = document.getElementById('name').value;
                        $.ajax({
                            url: '/greet',  // AJAX রিকোয়েস্ট পাঠানোর URL
                            type: 'POST',    // POST মেথড
                            data: JSON.stringify({ 'name': name }),  // ইনপুট ডেটা JSON আকারে
                            contentType: 'application/json',  // কনটেন্ট টাইপ
                            success: function(response) {
                                // সার্ভার থেকে পাওয়া ডেটা প্রদর্শন
                                document.getElementById('response').innerHTML = response.message;
                            },
                            error: function() {
                                alert('Something went wrong!');
                            }
                        });
                    }
                </script>
            </head>
            <body>
                <h2>Enter your name:</h2>
                <input type="text" id="name" placeholder="Enter your name"/>
                <button onclick="sendRequest()">Submit</button>
                <p id="response"></p>
            </body>
            </html>
        '''

    @cherrypy.expose
    def greet(self):
        input_data = cherrypy.request.json
        name = input_data.get('name', 'Stranger')
        return json.dumps({'message': f"Hello, {name}!"})

if __name__ == '__main__':
    cherrypy.quickstart(AsyncRequestApp())

কোড ব্যাখ্যা:

  1. JavaScript (AJAX - POST):
    • POST রিকোয়েস্ট পাঠানো হচ্ছে যেখানে ইনপুট ডেটা JSON আকারে সার্ভারে পাঠানো হচ্ছে।
    • contentType: 'application/json': AJAX রিকোয়েস্টের কনটেন্ট টাইপ নির্ধারণ করা হয়েছে যাতে সার্ভার সঠিকভাবে JSON ডেটা গ্রহণ করে।
  2. Backend (Python - CherryPy):
    • CherryPy POST রিকোয়েস্ট হ্যান্ডল করতে cherrypy.request.json ব্যবহার করছে। এটি ইনপুট ডেটাকে JSON ফরম্যাটে রিড এবং প্রসেস করতে সহায়ক।

CherryPy তে JavaScript এর মাধ্যমে Asynchronous Requests হ্যান্ডলিং খুবই সহজ এবং কার্যকরী। AJAX এর মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান করতে CherryPy এর GET এবং POST মেথডের সাহায্য নেয়া যায়। CherryPy এই প্রক্রিয়া সহজতর করার জন্য একটি সোজাসাপ্টা API প্রদান করে, যা ওয়েব অ্যাপ্লিকেশনগুলিকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।

Content added By
Promotion

Are you sure to start over?

Loading...