পৃষ্ঠার কিছু অংশ রিফ্রেশ করুন

Question 1

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

Question 2

এই জন্য Ajax ব্যবহার করুন।

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

প্রাসঙ্গিক কাজ:

http://api.jquery.com/load/

যেমন

$('#thisdiv').load(document.URL +  ' #thisdiv');

দ্রষ্টব্য, লোড স্বয়ংক্রিয়ভাবে সামগ্রী প্রতিস্থাপন করে। আইডি নির্বাচকের আগে কোনও স্থান অন্তর্ভুক্ত করার বিষয়ে নিশ্চিত হন।

Question 3

আসুন ধরে নেওয়া যাক আপনার এইচটিএমএল ফাইলের ভিতরে আপনার 2 ডিভ রয়েছে।

<div id="div1">some text</div>
<div id="div2">some other text</div>

জাভা প্রোগ্রাম নিজেই এইচটিএমএল ফাইলের সামগ্রী আপডেট করতে পারে না কারণ এইচটিএমএল ক্লায়েন্টের সাথে সম্পর্কিত, ইতিমধ্যে জাভা ব্যাক-এন্ডের সাথে সম্পর্কিত।

আপনি তবে সার্ভার (ব্যাক-এন্ড) এবং ক্লায়েন্টের মধ্যে যোগাযোগ করতে পারেন।

আমরা যে বিষয়ে কথা বলছি তা হ'ল এজেএক্স, যা আপনি জাভাস্ক্রিপ্ট ব্যবহার করে অর্জন করেছেন, আমি jQuery ব্যবহার করার পরামর্শ দিচ্ছি যা একটি সাধারণ জাভাস্ক্রিপ্ট লাইব্রেরি।

ধরে নেওয়া যাক আপনি প্রতি ধ্রুবক বিরতিতে পৃষ্ঠাটি রিফ্রেশ করতে চান, তবে আপনি প্রতি x সময় একই ক্রিয়াটির পুনরাবৃত্তি করতে বিরতি ফাংশনটি ব্যবহার করতে পারেন।

setInterval(function()
{
    alert("hi");
}, 30000);

আপনি এটি এর মতো করেও করতে পারেন:

setTimeout(foo, 30000);

হুইরিয়া ফু একটি ফাংশন।

সতর্কতার পরিবর্তে ("হাই") আপনি এজেএক্স অনুরোধটি সম্পাদন করতে পারেন যা সার্ভারে একটি অনুরোধ প্রেরণ করে এবং কিছু তথ্য প্রাপ্ত করে (উদাহরণস্বরূপ নতুন পাঠ্য) যা আপনি ডিভিডে লোড করতে ব্যবহার করতে পারেন।

একটি ক্লাসিক এজেএক্স এর মতো দেখাচ্ছে:

var fetch = true;
var url = 'someurl.java';
$.ajax(
{
    // Post the variable fetch to url.
    type : 'post',
    url : url,
    dataType : 'json', // expected returned data format.
    data : 
    {
        'fetch' : fetch // You might want to indicate what you're requesting.
    },
    success : function(data)
    {
        // This happens AFTER the backend has returned an JSON array (or other object type)
        var res1, res2;

        for(var i = 0; i < data.length; i++)
        {
            // Parse through the JSON array which was returned.
            // A proper error handling should be added here (check if
            // everything went successful or not)

            res1 = data[i].res1;
            res2 = data[i].res2;

            // Do something with the returned data
            $('#div1').html(res1);
        }
    },
    complete : function(data)
    {
        // do something, not critical.
    }
});

যেখানে ব্যাকএন্ড পোস্টের তথ্য প্রাপ্ত করতে সক্ষম হয় এবং তথ্যের কোনও ডেটা অবজেক্ট ফেরত দিতে সক্ষম হয়, উদাহরণস্বরূপ (এবং খুব পছন্দনীয়) জেএসওএন, সেখানে কীভাবে এটি করা যায় সে সম্পর্কে অনেক টিউটোরিয়াল আছে, গুগলের কাছ থেকে জিএসওএন এমন কিছু যা আমি কিছুক্ষণ আগে ব্যবহার করা হয়েছে, আপনি এটি একবার দেখে নিতে পারেন।

আমি জাভা পোষ্ট প্রাপ্তি এবং জেএসওন সেই ধরণের ফিরে আসার সাথে পেশাদার নই তাই আমি আপনাকে তার সাথে একটি উদাহরণ দিচ্ছি না তবে আমি আশা করি এটি একটি শালীন সূচনা।

Question 4

উদাহরণস্বরূপ আপনাকে jQuery সহ ক্লায়েন্টের পক্ষে এটি করা দরকার।

ধরা যাক আপনি আইডি সহ ডিভিল এইচটিএমএল পুনরুদ্ধার করতে চান mydiv:

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

আপনি jQuery দিয়ে পৃষ্ঠার এই অংশটি নিম্নরূপ আপডেট করতে পারেন:

$.get('/api/mydiv', function(data) {
  $('#mydiv').html(data);
});

সার্ভার-সাইডে আপনাকে /api/mydivমাইডিভের ভিতরে চলে আসা HTML এর টুকরোটি ফিরে আসার অনুরোধগুলির জন্য হ্যান্ডলার প্রয়োগ করতে হবে ।

JSON প্রতিক্রিয়া ডেটা সহ jQuery get ব্যবহার করে একটি মজাদার উদাহরণের জন্য আমি আপনার জন্য তৈরি এই ফ্রিল্ডটি দেখুন: http://jsfiddle.net/t35F9/1/

Question 5

ডিভ সামগ্রীটি লোড করতে fetchএবং ব্যবহার innerHTMLকরতে

কোড স্নিপেট দেখান

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);
}

<div id="staticPart">
  Here is static part of page

  <button id="btn" onclick="refresh()">
    Click here to start refreshing every 2s
  </button>
</div>

<div id="dynamicPart">Dynamic part</div>

স্নিপেট প্রসারিত করুন

Question 6

$.ajax(), $.get(), $.post(), $.load()অভ্যন্তরীণভাবে jQuery এর ফাংশন XML HTTPঅনুরোধ প্রেরণ । এর মধ্যে load()কেবলমাত্র একটি নির্দিষ্ট জন্য উত্সর্গীকৃত DOM Element। দেখুন jQuery এর আয়াক্স ডক । এগুলির একটি বিশদ QA এখানে রয়েছে ।