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




(14)

वैसे यह सिर्फ एक 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);
        }
    }
}

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


"वेनिला" जावास्क्रिप्ट के साथ:

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

आप निम्न फ़ंक्शन का उपयोग कर सकते हैं:

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

आप इन लिंक पर ऑनलाइन समान समाधानों का प्रयास कर सकते हैं:


आप ब्राउज़र के अनुसार सही ऑब्जेक्ट प्राप्त कर सकते हैं

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

इससे मदद मिल सकती है:

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

एक विशाल सहायता संसाधन के रूप में उपरोक्त @Petah उत्तर का उपयोग करना। मैंने अपना खुद का AJAX मॉड्यूल लिखा है जिसे AJ के लिए संक्षिप्त कहा जाता है: https://github.com/NightfallAlicorn/AJ सब कुछ अभी तक परीक्षण नहीं किया गया है लेकिन यह मेरे लिए JSON के लिए प्राप्त और पोस्ट के साथ काम करता है। आप अपनी इच्छानुसार स्रोत की प्रतिलिपि बनाने और उपयोग करने के लिए स्वतंत्र हैं। मैंने अभी तक एक स्वीकार्य उत्तर नहीं देखा था इसलिए मुझे लगता है कि यह पोस्ट करना ठीक है।


निम्नलिखित स्निपेट का उपयोग करके आप समान चीजें आसानी से कर सकते हैं, इस तरह:

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

पुराना लेकिन मैं कोशिश करूंगा, शायद किसी को यह जानकारी उपयोगी लगेगी।

यह 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 के लिए एक वादा-आधारित प्रतिस्थापन है


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

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

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


मैं AJAX के साथ वादे शामिल करने और jQuery को बाहर करने के लिए दूर की तलाश में था। एचटीएमएल 5 चट्टानों पर एक लेख है जो ES6 वादों के बारे में बात करता है ( 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();
  });
}

नोट: मैंने इसके बारे में एक लेख भी लिखा है।


सादा 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();
  });
}

समारोह एक promise देता है। फ़ंक्शन का उपयोग करने और उसके द्वारा किए गए वादे को संभालने के तरीके पर एक उदाहरण दिया गया है:

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

यदि आपको एक JSON.parse() फ़ाइल लोड करने की आवश्यकता है तो आप जेएस ऑब्जेक्ट में लोड किए गए डेटा को कन्वर्ट करने के लिए JSON.parse() का उपयोग कर सकते हैं।

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


XMLHttpRequest प्रयोग करें।

सरल अनुरोध प्राप्त करें

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.send() कॉल करने से पहले हम httpRequest.onreadystatechange को फ़ंक्शन में सेट करके प्रतिक्रिया को संभाल सकते हैं।

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

 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"

http://ajaxpatterns.org/XMLHttpRequest_Call


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




ajax