JQuery ছাড়াই কীভাবে একটি এজেএক্স কল করবেন?

Question

জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে একটি এজেএক্স কল করবেন, jQuery ব্যবহার না করে?

Comments

দয়া করে মনে রাখবেন থাকাকালীন উত্তর অনেক এখানে শোনার জন্য অপেক্ষা করার পরামর্শ দিই readystatechange , আধুনিক ব্রাউজারে এখন সমর্থন লোড , পরিত্যাগ , অগ্রগতি এবং ত্রুটি জন্য ইভেন্টগুলি XMLHttpRequest- এর (আপনি সম্ভবত শুধুমাত্র যত্নশীল করব লোড যদিও)।

— পল এস

উদাহরণস্বরূপ @ ইমাদউদ্দিনআইবন আলাউদ্দিন যখন এটির প্রধান কার্যকারিতা (ডিওএম ট্র্যাভারসিং) প্রয়োজন হয় না।

— সেট

youmightnotedededququery.com খাঁটি জেএস উদাহরণগুলি সহ অনেকগুলি। ie8 +, ie9 + এবং ie10 + এর জন্য

— অজ্যাক্স

ডাব্লু 3 স্কুলগুলি জ্যাকোয়ারি ছাড়াই অজ্যাক্সে ধাপে ধাপে ধাপে এগিয়েছে: w3schools.com/js/js_ajax_intro.asp

— eli

আপনি ইএইচটিএমএলও ব্যবহার করতে পারেন: github.com/ গুসেইন / ইএইচটিএমএল জসন আনার এবং এটি এইচটিএমএল উপাদানটিতে ম্যাপিংয়ের জন্য ই- জসন উপাদানটি ব্যবহার করুন

— গুসেইন ইসমাyy্যলভ

Answer 1

"ভ্যানিলা" জাভাস্ক্রিপ্ট সহ:

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

JQuery সহ:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});

Comments

@ ফ্র্যাকালাইস্টে যদি আপনি এক্সএমএলএইচটিটিপি.স্ট্যাটাস সম্পর্কিত ব্লকের পরে কেবল কলব্যাকগুলি কল করেন তবে কেবল সেখানে তাদের কল করুন এবং আপনার কাজ শেষ হয়েছে।

— জয়

@ ওয়েড আমার মনে হয় তিনি "ভ্যানিলা" জাভাস্ক্রিপ্ট পড়ার সময় গকিগুকস বলছেন তিনি ভেবেছিলেন এটি একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা এটি ডাউনলোড করা দরকার। তিনি ভ্যানিলা জেএসকেও উল্লেখ করতে পারেন ।

— ট্রাইপড

Answer 2

নিম্নলিখিত স্নিপেট ব্যবহার করে আপনি খুব সহজেই একই জিনিস করতে পারেন:

ajax.get('/test.php', {foo: 'bar'}, function() {});

এখানে স্নিপেট:

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method, url, async);
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};

ajax.post = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, 'POST', query.join('&'), async)
};

Comments

এটি সত্যিই দুর্দান্ত জম্পস্টার্ট, তবে আমি মনে করি আপনি @ 3nigma এর উত্তরে বৈশিষ্ট্যযুক্ত এমন কিছু হারিয়েছেন। এটি হ'ল, আমি নিশ্চিত নই যে সার্ভারের প্রতিক্রিয়া ফিরিয়ে না দিয়ে নির্দিষ্ট অনুরোধগুলি (সমস্ত প্রাপ্ত এবং কিছু পোস্ট) করা কতটা বুদ্ধিমান। আমি প্রেরণ পদ্ধতির শেষে আরেকটি লাইন যুক্ত করেছি - return x.responseText;- এবং তারপরে প্রতিটি ajax.sendকলই ফিরে আসি ।

— স্যাম

@ সাম আপনি [সাধারণত] এটি একটি অ্যাসিনক্রোনাস অনুরোধ হিসাবে ফিরে আসতে পারবেন না। আপনার প্রতিক্রিয়াটি একটি কলব্যাকে পরিচালনা করা উচিত।

— পেটাঃ

: @Sam সেখানে সেখানে একটি উদাহরণajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });

— মধ্যে Petah

চমৎকার স্নিপেট। তবে, এটি query.join('&').replace(/%20/g, '+')পরিবর্তে হওয়া উচিত নয় ?

— আফসান্টোস

বিকল্প হিসাবে এই লাইনটি অন্তর্ভুক্ত করে দয়া করে সিওআরএস অনুরোধ অন্তর্ভুক্ত করুন। 'xhr.withCredentials = সত্য;'

— আকাম

Answer 3

আমি জানি এই একটি মোটামুটি পুরাতন প্রশ্ন হল, কিন্তু এখন একটি সুন্দর মধ্যে স্থানীয়ভাবে প্রাপ্তিসাধ্য এপিআই নতুন ব্রাউজার । fetch()পদ্ধতি আপনি ওয়েব অনুরোধ করার জন্য অনুমতি দেয়। উদাহরণস্বরূপ, কিছু জসন থেকে অনুরোধ করতে /get-data:

var opts = {
  method: 'GET',      
  headers: {}
};
fetch('/get-data', opts).then(function (response) {
  return response.json();
})
.then(function (body) {
  //doSomething with body;
});

দেখুন এখানে আরো বিস্তারিত জানার জন্য।

Comments

প্রকৃতপক্ষে, আইচ এবং এজ এটিকে সমর্থন করে না তাই, "নতুন ব্রাউজারগুলিতে" ফেচ এপিআই কাজ করে দাবি করা ভুল হবে। (এজ 14 এর ব্যবহারকারীর বিশেষত এই ফাংশনটি সক্ষম করতে হবে) caniuse.com/#feat=fetch

— স্যালুস

এখানে গিটহাবের পলিফিলের উল্লেখ থাকতে হবে। github.com/github/fetch

— TylerY86

<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>চ্যাম্পের মতো আনতে কেবল যোগ করুন এবং ব্যবহার করুন ।

— টাইলার Y86

@ সলুউস এখন এটি এজ 14 এ ডিফল্টরূপে সক্ষম হয়েছে (এবং আইই আর কোনও "নতুন" ব্রাউজার নয় :-)

— সুপারশার্প

মোবাইলে আনবেন না use এটিতে এইচটিটিপি শিরোনামটি অ্যান্ড্রয়েডে লোয়ার-কেসিংয়ের সমস্যা রয়েছে। আইওএসে ভাল কাজ করে।

— কেনি লিম

Answer 4

আপনি নিম্নলিখিত ফাংশন ব্যবহার করতে পারেন:

function callAjax(url, callback){
    var xmlhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

আপনি এই লিঙ্কগুলিতে অনলাইনে অনুরূপ সমাধান চেষ্টা করতে পারেন:

• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first
• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

Comments

অনুরোধের জন্য কিছু ইনপুট ভেরিয়েবল যুক্ত করতেও ভাল লাগবে (xMLhttp.send ব্যবহার করা হবে (অনুরোধ);)

— পাভেল পেরনা

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

— আবদেলহাদি

Answer 5

সাধারণ সংস্করণ ES6 / ES2015 এ এই সংস্করণটি সম্পর্কে কীভাবে ?

function get(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

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

get('foo.txt')
.then((data) => {
  // Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
  // Do stuff on error...
});

আপনার যদি কোনও জেসন ফাইল লোড করতে হয় আপনি লোড হওয়া ডেটাটিকে JSON.parse()জেএস অবজেক্টে রূপান্তর করতে ব্যবহার করতে পারেন ।

আপনি req.responseType='json'এই ফাংশনে একীভূত করতে পারেন তবে দুর্ভাগ্যক্রমে এটির জন্য কোনও আইই সমর্থন নেই , তাই আমি সাথে থাকব JSON.parse()।

Comments

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

— রোটারেটি

@ রোটারিটি মোবাইল ব্রাউজারগুলি কি এই পদ্ধতির সমর্থন করে?

— বোডরুক

কেবল নতুন ব্রাউজার সংস্করণগুলি এটি সমর্থন করে। একটি সাধারণ অনুশীলন হ'ল আপনার কোডটি সর্বশেষ ES6 / 7 / .. এ লিখুন এবং ভাল ব্রাউজার সমর্থনের জন্য এটি আবার ES5 এ স্থানান্তর করতে বাবেল বা একইভাবে ব্যবহার করুন।

— রোটারেটি

@ রোটারেটি আপনি কি ব্যাখ্যা করতে পারেন যে এটি 'সাধারণ' কলব্যাকের চেয়ে কেন বেশি সুবিধাজনক হবে? পুরানো ব্রাউজার সমর্থনের জন্য এই সুবিধাকে এটিকে পরিবহন করার জন্য অতিরিক্ত পরিশ্রমের মূল্য কি?

— lennyklb

@ লেনার্টক্লোপ্পেনবার্গ আমি মনে করি এই উত্তরটি এটি ভালভাবে ব্যাখ্যা করেছে: stackoverflow.com/a/14244950/1612318 "পুরানো ব্রাউজার সমর্থনের জন্য এটি পরিবহন করার অতিরিক্ত প্রচেষ্টা কি এই সুবিধার জন্য উপযুক্ত?" প্রতিশ্রুতিগুলি ES6 / 7 এর সাথে উপস্থিত অনেকগুলি বৈশিষ্ট্যের মধ্যে একটি। আপনি যদি ট্রান্সপ্লার ব্যবহার করেন তবে আপনি আপ টু ডেট জেএস লিখতে পারেন। এটা জরুরী!

— রোটারেটি

Answer 6

 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 alert(serverResponse); // Shows "15"

Comments

সিঙ্ক্রোনাস কল করবেন না। XhReq.onload ব্যবহার করুন এবং কলব্যাকগুলি ব্যবহার করুন।

— 19

@ ফেলোস্ট্রেঞ্জার oReq.onload = ফাংশন () {/*this.responseText*/};

— 19 ই

@ একনানসুলাইম্যান সিঙ্ক্রোনাস কল নিয়ে কী হয়েছে? কখনও কখনও এটি সেরা ফিট করে।

— Andrii Nemchenko

@ অ্যান্ড্রে: সার্ভারের প্রতিক্রিয়া ফিরে না আসা পর্যন্ত আপনি যতটা বুঝতে পেরেছেন আপনি সমস্ত কিছু সম্পাদন বন্ধ করছেন। ব্যতিক্রমীভাবে খারাপ কিছুই নয়, তবে কিছু ব্যবহারের জন্য এটি ঠিক পর্যাপ্ত নয়।

— mrówa

এছাড়াও, যদি সার্ভারটি আসলে কোনও কারণে কোনও প্রতিক্রিয়া না দেখায় তবে আপনার বাকী কোডটি কখনই চলবে না।

— এলোমেলো হাতি

Answer 7

এক্সএমএলএইচটিপিআরকোয়েস্ট ব্যবহার করুন ।

সহজ জিইটি অনুরোধ

httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()

সাধারণ পোস্টের অনুরোধ

httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')

আমরা উল্লেখ করতে পারি যে অনুরোধটি ynচ্ছিক তৃতীয় যুক্তির সাথে অবিচ্ছিন্ন (সত্য), ডিফল্ট, বা সিঙ্ক্রোনাস (মিথ্যা) হওয়া উচিত।

// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)

আমরা কল করার আগে শিরোনাম সেট করতে পারি httpRequest.send()

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

আমরা httpRequest.onreadystatechangeকল করার আগে কোনও ফাংশনে সেট করে প্রতিক্রিয়াটি পরিচালনা করতে পারিhttpRequest.send()

httpRequest.onreadystatechange = function(){
  // Process the server response here.
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      alert(httpRequest.responseText);
    } else {
      alert('There was a problem with the request.');
    }
  }
}

Comments

নোট করুন যে 200 এর চেয়েও সফল স্ট্যাটাসগুলি আছে উদাহরণস্বরূপ 201

— Nate Vaughan

Answer 8

আপনি ব্রাউজার অনুযায়ী সঠিক জিনিস পেতে পারেন

function getXmlDoc() {
  var xmlDoc;

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlDoc = new XMLHttpRequest();
  }
  else {
    // code for IE6, IE5
    xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlDoc;
}

সঠিক অবজেক্টের সাথে, একটি জিইটি এটিকে বিমূর্ত করা যেতে পারে:

function myGet(url, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('GET', url, true);

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send();
}

এবং একটি পোস্ট:

function myPost(url, data, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('POST', url, true);
  xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send(data);
}

Answer 9

আমি এজ্যাক্স সহ প্রতিশ্রুতি অন্তর্ভুক্ত করার এবং jQuery বাদ দেওয়ার উপায় খুঁজছিলাম was এইচটিএমএল 5 রকসে একটি নিবন্ধ রয়েছে যা ES6 প্রতিশ্রুতি সম্পর্কে কথা বলে। (আপনি কিউ এর মতো প্রতিশ্রুতি গ্রন্থাগার দিয়ে পলিফিল করতে পারেন) আপনি নিবন্ধ থেকে অনুলিপি করা কোড স্নিপেট ব্যবহার করতে পারেন।

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

দ্রষ্টব্য: আমি এ সম্পর্কে একটি নিবন্ধও লিখেছি ।

Answer 10

নীচের কয়েকটি উদাহরণ থেকে একটি ছোট সংমিশ্রণ এবং এই সাধারণ টুকরোটি তৈরি করেছে:

function ajax(url, method, data, async)
{
    method = typeof method !== 'undefined' ? method : 'GET';
    async = typeof async !== 'undefined' ? async : false;

    if (window.XMLHttpRequest)
    {
        var xhReq = new XMLHttpRequest();
    }
    else
    {
        var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    if (method == 'POST')
    {
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(data);
    }
    else
    {
        if(typeof data !== 'undefined' && data !== null)
        {
            url = url+'?'+data;
        }
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(null);
    }
    //var serverResponse = xhReq.responseText;
    //alert(serverResponse);
}

// Example usage below (using a string query):

ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');

বা যদি আপনার পরামিতিগুলি অবজেক্ট (গুলি) হয় - ছোট ছোট অতিরিক্ত কোড সামঞ্জস্য:

var parameters = {
    q: 'test'
}

var query = [];
for (var key in parameters)
{
    query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}

ajax('http://www.google.com', 'POST', query.join('&'));

উভয়ই সম্পূর্ণ ব্রাউজারের + সংস্করণে সামঞ্জস্যপূর্ণ হওয়া উচিত।

Comments

এখানে লুপের জন্য হ্যাশঅনপ্রপার্টি ব্যবহার করা কি উপযুক্ত?

— কিবিবু

Answer 11

আপনি যদি জিকুয়েরি অন্তর্ভুক্ত না করতে চান তবে আমি কিছু হালকা ওজনের এজেএক্স লাইব্রেরি ব্যবহার করে দেখতে চাই।

আমার প্রিয়। এটি কেবলমাত্র 3.4kb এবং খুব ভালভাবে তৈরি: https://github.com/ded/Reqwest

এখানে রেকউয়েস্টের সাথে একটি নমুনা জিইটি অনুরোধ রইল:

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

এখন আপনি যদি আরও হালকা ওজনের কিছু চান তবে আমি কেবল 0.4 কেবিতে মাইক্রোএজাক্স চেষ্টা করেছিলাম: https://code.google.com/p/microajax/

এই এখানে সব কোড আছে:

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

এবং এখানে একটি নমুনা কল রয়েছে:

microAjax(url, onSuccess);

Comments

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

— জিল-জান ভি

Answer 12

পুরাতন তবে আমি চেষ্টা করব, কেউ এই তথ্যকে দরকারী বলে মনে করবে।

আপনার একটি GETঅনুরোধ করতে এবং কিছু JSONফর্ম্যাটেড ডেটা আনতে ন্যূনতম পরিমাণ কোড এটি । এটি কেবলমাত্র আধুনিক ব্রাউজারগুলিতে যেমন ক্রোম , এফএফ , সাফারি , অপেরা এবং মাইক্রোসফ্ট এজগুলির সর্বশেষ সংস্করণগুলির জন্য প্রযোজ্য ।

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async 
xhr.responseType = 'json'; // in which format you expect the response to be


xhr.onload = function() {
  if(this.status == 200) {// onload called even on 404 etc so check the status
   console.log(this.response); // No need for JSON.parse()
  }
};

xhr.onerror = function() {
  // error 
};


xhr.send();

এছাড়াও নতুন খুঁজে বার করো এপিআই পান , যার জন্য প্রতিশ্রুতি ভিত্তিক প্রতিস্থাপন XMLHttpRequest- এর এপিআই ।

Answer 13

XMLHttpRequest- এর ()

আপনি XMLHttpRequest()একটি নতুন XMLHttpRequest(এক্সএইচআর) অবজেক্ট তৈরি করতে কনস্ট্রাক্টর ব্যবহার করতে পারেন যা আপনাকে স্ট্যান্ডার্ড এইচটিটিপি অনুরোধ পদ্ধতি (যেমন GETএবং POST) ব্যবহার করে কোনও সার্ভারের সাথে ইন্টারঅ্যাক্ট করতে দেয় :

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

const request = new XMLHttpRequest();

request.addEventListener('load', function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
});

request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

আনা ()

আপনি আপনার অনুরোধের প্রতিক্রিয়া উপস্থাপন করে এমন বস্তুর সমাধান করে এমনটি পাওয়ার জন্য fetch()আপনি এই পদ্ধতিটিও ব্যবহার করতে পারেন :PromiseResponse

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

fetch('example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  body: data,
}).then(response => {
  if (response.ok) {
    response.text().then(response => {
      console.log(response);
    });
  }
});

navigator.sendBeacon ()

অন্যদিকে, যদি আপনি কেবল POSTডেটা চেষ্টা করছেন এবং সার্ভারের কাছ থেকে কোনও প্রতিক্রিয়া প্রয়োজন না হয়, সবচেয়ে সংক্ষিপ্ত সমাধানটি ব্যবহার করা হবে navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);

Comments

আমি আপনার উত্তরগুলি সত্যিই পছন্দ করি, কারণ আপনি ইন্টারনেট এক্সপ্লোরারের ক্ষেত্রেও বেশিরভাগ ক্ষেত্রে এক্সএমএলএইচটিপিআরকিউস্টের সাথে কভার করেন, তবে আমি উদাহরণটিতে "কনট ডেটা = ..." হ'ল: "ভার ডেটা = ..." পরিবর্তন করার পরামর্শ দেব would (এক্সএমএলএইচটিপিআরকোয়েস্ট) সুতরাং এটির সাথে এটি সম্পূর্ণরূপে সামঞ্জস্যপূর্ণ

— ডাজাগ

Answer 14

থেকে youMightNotNeedJquery.com + +JSON.stringify

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));

Answer 15

এটি সাহায্য করতে পারে:

function doAjax(url, callback) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

Answer 16

<html>
  <script>
    var xmlDoc = null ;

  function load() {
    if (typeof window.ActiveXObject != 'undefined' ) {
      xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
      xmlDoc.onreadystatechange = process ;
    }
    else {
      xmlDoc = new XMLHttpRequest();
      xmlDoc.onload = process ;
    }
    xmlDoc.open( "GET", "background.html", true );
    xmlDoc.send( null );
  }

  function process() {
    if ( xmlDoc.readyState != 4 ) return ;
    document.getElementById("output").value = xmlDoc.responseText ;
  }

  function empty() {
    document.getElementById("output").value = '<empty>' ;
  }
</script>

<body>
  <textarea id="output" cols='70' rows='40'><empty></textarea>
  <br></br>
  <button onclick="load()">Load</button> &nbsp;
  <button onclick="empty()">Clear</button>
</body>
</html>

Answer 17

ওয়েল এটি কেবল একটি 4 ধাপ সহজ প্রক্রিয়া,

আমি আসা করি এটা সাহায্য করবে

Step 1. XMLHttpRequest অবজেক্টের রেফারেন্স সঞ্চয় করুন

var xmlHttp = createXmlHttpRequestObject();

Step 2. XMLHttpRequest অবজেক্টটি পুনরুদ্ধার করুন

function createXmlHttpRequestObject() {
    // will store the reference to the XMLHttpRequest object
    var xmlHttp;
    // if running Internet Explorer
    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    }
    // if running Mozilla or other browsers
    else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    // return the created object or display an error message
    if (!xmlHttp)
        alert("Error creating the XMLHttpRequest object.");
    else
        return xmlHttp;
}

Step 3. এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্টটি ব্যবহার করে অ্যাসিঙ্ক্রোনাস এইচটিটিপি অনুরোধ করুন

function process() {
    // proceed only if the xmlHttp object isn't busy
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
        // retrieve the name typed by the user on the form
        item = encodeURIComponent(document.getElementById("input_item").value);
        // execute the your_file.php page from the server
        xmlHttp.open("GET", "your_file.php?item=" + item, true);
        // define the method to handle server responses
        xmlHttp.onreadystatechange = handleServerResponse;
        // make the server request
        xmlHttp.send(null);
    }
}

Step 4. সার্ভার থেকে কোনও বার্তা পাওয়া গেলে স্বয়ংক্রিয়ভাবে কার্যকর করা হয়

function handleServerResponse() {

    // move forward only if the transaction has completed
    if (xmlHttp.readyState == 4) {
        // status of 200 indicates the transaction completed successfully
        if (xmlHttp.status == 200) {
            // extract the XML retrieved from the server
            xmlResponse = xmlHttp.responseText;
            document.getElementById("put_response").innerHTML = xmlResponse;
            // restart sequence
        }
        // a HTTP status different than 200 signals an error
        else {
            alert("There was a problem accessing the server: " + xmlHttp.statusText);
        }
    }
}

Answer 18

ব্রাউজারে সরল জাভাস্ক্রিপ্টে:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE ) {
    if(xhr.status == 200){
      console.log(xhr.responseText);
    } else if(xhr.status == 400) {
      console.log('There was an error 400');
    } else {
      console.log('something else other than 200 was returned');
    }
  }
}

xhr.open("GET", "mock_data.json", true);

xhr.send();

অথবা আপনি যদি নোড.জেএস ব্যবহার করে আপনার মডিউলগুলি বান্ডিল করতে ব্রাউজারফি ব্যবহার করতে চান। আপনি হাইপারজেন্ট ব্যবহার করতে পারেন :

var request = require('superagent');
var url = '/mock_data.json';

 request
   .get(url)
   .end(function(err, res){
     if (res.ok) {
       console.log('yay got ' + JSON.stringify(res.body));
     } else {
       console.log('Oh no! error ' + res.text);
     }
 });

Answer 19

এখানে জিকুয়েরি ছাড়াই একটি জেএসফিল রয়েছে

http://jsfiddle.net/rimian/jurwre07/

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    var url = 'http://echo.jsontest.com/key/value/one/two';

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if (xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            } else if (xmlhttp.status == 400) {
                console.log('There was an error 400');
            } else {
                console.log('something else other than 200 was returned');
            }
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
};

loadXMLDoc();

Answer 20

var load_process = false;
function ajaxCall(param, response) {

 if (load_process == true) {
     return;
 }
 else
 { 
  if (param.async == undefined) {
     param.async = true;
 }
 if (param.async == false) {
         load_process = true;
     }
 var xhr;

 xhr = new XMLHttpRequest();

 if (param.type != "GET") {
     xhr.open(param.type, param.url, true);

     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
     }
     else if (param.contentType != undefined || param.contentType == true) {
         xhr.setRequestHeader('Content-Type', param.contentType);
     }
     else {
         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     }


 }
 else {
     xhr.open(param.type, param.url + "?" + obj_param(param.data));
 }

 xhr.onprogress = function (loadTime) {
     if (param.progress != undefined) {
         param.progress({ loaded: loadTime.loaded }, "success");
     }
 }
 xhr.ontimeout = function () {
     this.abort();
     param.success("timeout", "timeout");
     load_process = false;
 };

 xhr.onerror = function () {
     param.error(xhr.responseText, "error");
     load_process = false;
 };

 xhr.onload = function () {
    if (xhr.status === 200) {
         if (param.dataType != undefined && param.dataType == "json") {

             param.success(JSON.parse(xhr.responseText), "success");
         }
         else {
             param.success(JSON.stringify(xhr.responseText), "success");
         }
     }
     else if (xhr.status !== 200) {
         param.error(xhr.responseText, "error");

     }
     load_process = false;
 };
 if (param.data != null || param.data != undefined) {
     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
             xhr.send(param.data);

     }
     else {
             xhr.send(obj_param(param.data));

     }
 }
 else {
         xhr.send();

 }
 if (param.timeout != undefined) {
     xhr.timeout = param.timeout;
 }
 else
{
 xhr.timeout = 20000;
}
 this.abort = function (response) {

     if (XMLHttpRequest != null) {
         xhr.abort();
         load_process = false;
         if (response != undefined) {
             response({ status: "success" });
         }
     }

 }
 }
 }

function obj_param(obj) {
var parts = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
}
return parts.join('&');
}

আমার এজ্যাক্স কল

  var my_ajax_call=ajaxCall({
    url: url,
    type: method,
    data: {data:value},
    dataType: 'json',
    async:false,//synchronous request. Default value is true 
    timeout:10000,//default timeout 20000
    progress:function(loadTime,status)
    {
    console.log(loadTime);
     },
    success: function (result, status) {
      console.log(result);
    },
      error :function(result,status)
    {
    console.log(result);
     }
      });

পূর্ববর্তী অনুরোধ বাতিল

      my_ajax_call.abort(function(result){
       console.log(result);
       });

Answer 21

এইচটিএমএল:

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

পিএইচপি:

<?php

$id = $_GET[id];
print "$id";

?>

Comments

একক লাইন ইফ-এর জন্য কোঁকড়ানো বন্ধনী প্রয়োজন নেই, নুন আইই 6 ব্যবহার করে, এটি সম্ভবত অনুলিপি করা হয়েছে অনড্রেসেটেচেন্জের পরিবর্তে অনলোড ব্যবহার করুন, সম্ভাব্য পুনরাবৃত্ত কলগুলির জন্য ত্রুটিগুলি ধরুন, এক্সএমএলএইচটিপি একটি ভয়াবহ পরিবর্তনশীল নাম, কেবল এটিকে কল করুন এক্স।

— সুপার

Answer 22

খাঁটি জাভাস্ক্রিপ্ট সহ একটি ভারি ভাল সমাধান এখানে

/*create an XMLHttpRequest object*/

let GethttpRequest=function(){  
  let httpRequest=false;
  if(window.XMLHttpRequest){
    httpRequest   =new XMLHttpRequest();
    if(httpRequest.overrideMimeType){
    httpRequest.overrideMimeType('text/xml');
    }
  }else if(window.ActiveXObject){
    try{httpRequest   =new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
      try{
        httpRequest   =new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }
  if(!httpRequest){return 0;}
  return httpRequest;
}

  /*Defining a function to make the request every time when it is needed*/

  function MakeRequest(){

    let uriPost       ="myURL";
    let xhrPost       =GethttpRequest();
    let fdPost        =new FormData();
    let date          =new Date();

    /*data to be sent on server*/
    let data          = { 
                        "name"      :"name",
                        "lName"     :"lName",
                        "phone"     :"phone",
                        "key"       :"key",
                        "password"  :"date"
                      };

    let JSONdata =JSON.stringify(data);             
    fdPost.append("data",JSONdata);
    xhrPost.open("POST" ,uriPost, true);
    xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
    xhrPost.onloadstart = function (){
      /*do something*/
    };
    xhrPost.onload      = function (){
      /*do something*/
    };
    xhrPost.onloadend   = function (){
      /*do something*/
    }
    xhrPost.onprogress  =function(){
      /*do something*/
    }

    xhrPost.onreadystatechange =function(){

      if(xhrPost.readyState < 4){

      }else if(xhrPost.readyState === 4){

        if(xhrPost.status === 200){

          /*request succesfull*/

        }else if(xhrPost.status !==200){

          /*request failled*/

        }

      }


   }
  xhrPost.ontimeout = function (e){
    /*you can stop the request*/
  }
  xhrPost.onerror = function (){
    /*you can try again the request*/
  };
  xhrPost.onabort = function (){
    /*you can try again the request*/
  };
  xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
  xhrPost.setRequestHeader("Content-disposition", "form-data");
  xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
  xhrPost.send(fdPost);
}

/*PHP side
<?php
  //check if the variable $_POST["data"] exists isset() && !empty()
  $data        =$_POST["data"];
  $decodedData =json_decode($_POST["data"]);
  //show a single item from the form
  echo $decodedData->name;

?>
*/

/*Usage*/
MakeRequest();