JQuery के बिना AJAX कॉल कैसे करें?

Question

JQuery का उपयोग किए बिना जावास्क्रिप्ट का उपयोग करके AJAX कॉल कैसे करें?

Comments

कृपया ध्यान दें कि यहाँ बहुत से उत्तरों को पढ़ने के दौरान रीडिस्टेटचेंज के लिए सुनने का सुझाव दिया गया है , आधुनिक ब्राउज़र अब XMLHttpRequest के लिए लोड , गर्भपात , प्रगति और त्रुटि घटनाओं का समर्थन करते हैं (आप शायद केवल लोड के बारे में परवाह करेंगे )।

— पॉल एस।

@ImadoddinIbnAlauddin उदाहरण के लिए जब यह मुख्य कार्यक्षमता (DOM ट्रैवर्सिंग) की आवश्यकता नहीं है।

— सेट

youmightnotneedjquery.com बहुत सारे शुद्ध js उदाहरण incl। ajax for ie8 +, ie9 + और

— ie10

w3schools jquery के बिना ajax में कदम परिचय के द्वारा एक अच्छा कदम है: w3schools.com/js/js_ajax_intro.asp

— eli

आप EHTML का उपयोग भी कर सकते हैं: github.com/Guseyn/EHTML json को लाने और उसे html तत्व में मैप करने के लिए e-json तत्व का उपयोग करें

— Guseyn Ismayylov

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

@Fractaliste यदि आप xmlhttp.status से संबंधित ब्लॉक के बाद कॉलबैक को कॉल करते हैं, तो बस उन्हें वहां कॉल करें और आपका काम हो गया।

— जय

@ मुझे लगता है कि गोकिगूक्स कह रहे हैं कि जब उन्होंने "वेनिला" जावास्क्रिप्ट के साथ पढ़ा तो उन्हें लगा कि यह एक जावास्क्रिप्ट लाइब्रेरी है जिसे उन्हें डाउनलोड करने की आवश्यकता है। वह वेनिला जेएस का भी उल्लेख कर सकते हैं ।

— Trisped

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

— पेटा

अच्छा स्निपेट। हालांकि, query.join('&').replace(/%20/g, '+')इसके बजाय नहीं होना चाहिए ?

— afsantos

कृपया इस पंक्ति को एक विकल्प के रूप में शामिल करके CORS अनुरोध भी शामिल करें। 'xhr.withCredentials = true?'

— अकाम

Answer 3

मुझे पता है कि यह एक काफी पुराना सवाल है, लेकिन अब नए ब्राउज़रों में नेटिव एपीआई उपलब्ध है । fetch()विधि आप वेब अनुरोध करने के लिए अनुमति देते हैं। उदाहरण के लिए, कुछ json से अनुरोध करने के लिए /get-data:

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

अधिक जानकारी के लिए यहां देखें ।

Comments

दरअसल, "नए ब्राउज़र" में Fetch API के काम करने का दावा करना गलत होगा, क्योंकि IE और Edge इसका समर्थन नहीं करते हैं। (एज 14 को उपयोगकर्ता को विशेष रूप से इस फ़ंक्शन को सक्षम करने की आवश्यकता होती है) caniuse.com/#feat=fetch

— सायं 06:01

यहां गीथहब के पॉलीफ़िल का उल्लेख होना चाहिए। github.com/github/fetch

— TylerY86

बस <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>एक विजेता की तरह जोड़ और उपयोग करें।

— TylerY86

@saluce अब यह एज 14 में डिफ़ॉल्ट रूप से सक्षम है (और IE "नया" ब्राउज़र किसी भी अधिक नहीं है :-)

— Supersharp

मोबाइल पर Fetch का उपयोग न करें। इसमें एंड्रॉइड पर HTTP हेडर लो-केसिंग इश्यू है। आईओएस पर अच्छी तरह से काम करता है।

— केनी लिम

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 (अनुरोध) में उपयोग किया जाएगा)

— पावेल पर्ना

@PavelPerna, चूँकि यहाँ उदाहरण एक है 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 फाइल लोड करने की आवश्यकता है तो आप लोड JSON.parse()किए गए डेटा को JS ऑब्जेक्ट में बदलने के लिए उपयोग कर सकते हैं ।

आप req.responseType='json'फ़ंक्शन में भी एकीकृत कर सकते हैं लेकिन दुर्भाग्य से इसके लिए कोई IE समर्थन नहीं है , इसलिए मैं इसके साथ रहना चाहूंगा JSON.parse()।

Comments

उपयोग करने से XMLHttpRequestआप फ़ाइल लोड करने के लिए एक अतुल्यकालिक प्रयास करते हैं। इसका मतलब है कि आपका कोड निष्पादन हो जाएगा, जबकि आपकी फ़ाइल पृष्ठभूमि में लोड होती है। अपनी स्क्रिप्ट में फ़ाइल की सामग्री का उपयोग करने के लिए आपको एक ऐसे तंत्र की आवश्यकता होती है जो आपकी स्क्रिप्ट को बताता है जब फ़ाइल ने लोडिंग को विफल कर दिया था या लोडिंग विफल हो गई थी। यही कारण है कि जहां है वादों काम में आते हैं। इस समस्या को हल करने के अन्य तरीके हैं, लेकिन मुझे लगता है कि वादे सबसे सुविधाजनक हैं।

— रोटारटी

@Rotareti क्या मोबाइल ब्राउज़र इस दृष्टिकोण का समर्थन करते हैं?

— बोड्रुक

केवल नए ब्राउज़र संस्करण इसका समर्थन करते हैं। एक आम बात यह है कि अपने कोड को नवीनतम ES6 / 7 / .. में लिखें और बेहतर ब्राउजर सपोर्ट के लिए इसे वापस ES5 में ट्रांसलेल करने के लिए बैबल या एक जैसे उपयोग करें।

— रोटेरेटी

@ रोरैटी क्या आप यह भी बता सकते हैं कि यह 'सरल' कॉलबैक से अधिक सुविधाजनक क्यों होगा? क्या यह सुविधा पुराने ब्राउज़र समर्थन के लिए इसे ट्रांसपाइल करने के लिए अतिरिक्त प्रयास के लायक है?

— लेनिक्लब

@LennartKloppenburg मुझे लगता है कि यह उत्तर इसे अच्छी तरह से समझाता है: 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

@FellowStranger oReq.onload = function () {/ _this.responseText*/};

— 19h

@kenansulayman सिंक्रोनस कॉल में क्या गलत है? कभी-कभी यह सबसे अच्छा फिट बैठता है।

— एंड्री नेमचेंको

@Andrey: कुछ भी नहीं, जहाँ तक आपको एहसास है कि आप सर्वर से प्रतिक्रिया मिलने तक सब कुछ का निष्पादन रोक रहे हैं। असाधारण रूप से बुरा कुछ भी नहीं है, लेकिन शायद कुछ उपयोगों के लिए बिल्कुल पर्याप्त नहीं है।

— श्री फव्वारा

इसके अलावा, यदि सर्वर वास्तव में कभी किसी कारण से प्रतिक्रिया नहीं देता है, तो आपका बाकी कोड कभी नहीं चलेगा।

— यादृच्छिक हाथी

Answer 7

XMLHttpRequest का उपयोग करें ।

सरल GET अनुरोध

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

हम यह निर्दिष्ट कर सकते हैं कि अनुरोध एक वैकल्पिक तीसरे तर्क के साथ अतुल्यकालिक (सत्य), डिफ़ॉल्ट या तुल्यकालिक (गलत) होना चाहिए।

// 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

ध्यान दें कि २०० २०१ there की तुलना में अन्य सफल स्थितियां हैं

— नैट वॉन

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

सही वस्तु के साथ, एक GET को अमूर्त किया जा सकता है:

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

मैं ajax के साथ वादों को शामिल करने और jQuery को शामिल करने का एक तरीका ढूंढ रहा था। एचटीएमएल 5 रॉक्स पर एक लेख है जो ईएस 6 वादों के बारे में बात करता है। (आप Q की तरह एक वादा पुस्तकालय के साथ पॉलीफ़िल कर सकते हैं) आप उस कोड स्निपेट का उपयोग कर सकते हैं जिसे मैंने लेख से कॉपी किया था।

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

क्या यह यहाँ पाश के लिए hasOwnProperty का उपयोग करने के लायक है?

— किबिबू

Answer 11

यदि आप JQuery को शामिल नहीं करना चाहते हैं, तो मैं कुछ हल्के AJAX पुस्तकालयों की कोशिश करूँगा।

मेरा पसंदीदा रिक्वेस्ट है। यह केवल 3.4kb है और बहुत अच्छी तरह से निर्मित है: https://github.com/ded/Reqwest

यहाँ reqwest के साथ एक नमूना अनुरोध प्राप्त करें:

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

अब अगर आप कुछ और भी हल्का चाहते हैं, तो मैं मात्र 0.4kb पर microAjax आज़माऊंगा: https://code.google.com/p/microsoftaj//

यह सभी कोड यहीं है:

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

नए Fetch API को भी देखें जो XMLHttpRequest API के लिए एक वादा-आधारित प्रतिस्थापन है ।

Answer 13

XMLHttpRequest ()

आप XMLHttpRequest()एक नया XMLHttpRequest(XHR) ऑब्जेक्ट बनाने के लिए कंस्ट्रक्टर का उपयोग कर सकते हैं जो आपको मानक HTTP अनुरोध विधियों (जैसे कि 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()विधि का उपयोग भी कर सकते हैं Promiseजो Responseआपके अनुरोध के जवाब का प्रतिनिधित्व करने वाले ऑब्जेक्ट के लिए हल करता है :

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

मुझे वास्तव में आपके उत्तर पसंद हैं, क्योंकि आप XMLHttpRequest के साथ इंटरनेट एक्सप्लोरर के लिए भी अधिकांश मामलों को कवर करते हैं, लेकिन मैं उस उदाहरण पर: "const data = ...": "var data = ..." को बदलने की सिफारिश करूंगा। (XMLHttpRequest) तो यह पूरी तरह से इसके साथ संगत है

— Dazag

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. XMLHttpRequest ऑब्जेक्ट का उपयोग करके अतुल्यकालिक HTTP अनुरोध करें

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

या यदि आप नोड्यूल का उपयोग करके अपने मॉड्यूल को बंडल करने के लिए Browserify का उपयोग करना चाहते हैं। आप अतिशयोक्ति का उपयोग कर सकते हैं :

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

यहाँ JQuery के बिना एक JSFiffle है

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

HTML:

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

सिंगल लाइन यदि कर्ली ब्रैकेट्स की आवश्यकता नहीं है, तो कोई भी IE6 का उपयोग नहीं करता है, यह संभवतः कॉपी पेस्ट किया गया था, onreadystatechange के बजाय ऑनलोड का उपयोग करें, संभावित पुनरावर्ती कॉल के लिए त्रुटियों को पकड़ें, xmlhttp एक भयानक चर नाम है, बस इसे x कॉल करें।

— सुपर

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