JavaScript
AJAX

परिचय

टिप्पणियों

जीईटी का उपयोग करना और कोई पैरामीटर नहीं

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
        //parse the response in xhttp.responseText;
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

fetch('/').then(response => response.text()).then(text => {
  console.log("The home page is " + text.length + " characters long.");
});

पोस्टिंग के माध्यम से JSON डेटा भेजना और प्राप्त करना

const requestData = {
  method : 'getUsers'
};

const usersPromise = fetch('/api', {
  method : 'POST',
  body : JSON.stringify(requestData)
}).then(response => {
  if (!response.ok) {
    throw new Error("Got non-2XX response from API server.");
  }
  return response.json();
}).then(responseData => {
  return responseData.users;
});

usersPromise.then(users => {
  console.log("Known users: ", users);
}, error => {
  console.error("Failed to fetch users due to error: ", error);
});

स्टैक ओवरफ्लो एपीआई से महीने के शीर्ष जावास्क्रिप्ट सवालों को प्रदर्शित करना

हम महीने के लिए शीर्ष जावास्क्रिप्ट प्रश्नों की एक सूची प्राप्त करने के लिए स्टैक एक्सचेंज के एपीआई के लिए एक AJAX अनुरोध कर सकते हैं, फिर उन्हें लिंक की सूची के रूप में प्रस्तुत कर सकते हैं। यदि अनुरोध विफल हो जाता है या API त्रुटि देता है, तो हमारा वादा त्रुटि से निपटने के बजाय त्रुटि प्रदर्शित करता है।

const url =
    'http://api.stackexchange.com/2.2/questions?site=stackoverflow' +
    '&tagged=javascript&sort=month&filter=unsafe&key=gik4BOCMC7J9doavgYteRw((';

fetch(url).then(response => response.json()).then(data => {
  if (data.error_message) {
    throw new Error(data.error_message);
  }

  const list = document.createElement('ol');
  document.body.appendChild(list);

  for (const {title, link} of data.items) {
    const entry = document.createElement('li');
    const hyperlink = document.createElement('a');
    entry.appendChild(hyperlink);
    list.appendChild(entry);

    hyperlink.textContent = title;
    hyperlink.href = link;
  }
}).then(null, error => {
  const message = document.createElement('pre');
  document.body.appendChild(message);
  message.style.color = 'red';

  message.textContent = String(error);
});

मापदंडों के साथ GET का उपयोग करना

यह फ़ंक्शन GET का उपयोग करके AJAX कॉल चलाता है, जो अनुरोध समाप्त होने पर हमें फ़ाइल (स्ट्रिंग) में पैरामीटर (ऑब्जेक्ट) भेजने और कॉलबैक (फ़ंक्शन) लॉन्च करने की अनुमति देता है।

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

यहां बताया गया है कि हम इसका उपयोग कैसे करते हैं:

ajax('cars.php', {type:"Volvo", model:"300", color:"purple"}, function(response) {
  // add here the code to be executed when data comes back to this page      
  // for example console.log(response) will show the AJAX response in console
});

और निम्न दिखाता है कि cars.php में url के मापदंडों को कैसे पुनः प्राप्त किया cars.php ।

if(isset($_REQUEST['type'], $_REQUEST['model'], $_REQUEST['color'])) {
  // they are set, we can use them !
  $response = 'The color of your car is ' . $_REQUEST['color'] . '. ';
  $response .= 'It is a ' . $_REQUEST['type'] . ' model ' . $_REQUEST['model'] . '!';
  echo $response;
}

यदि आपके पास कॉलबैक फ़ंक्शन में console.log(response) होता है, तो कंसोल में परिणाम होता है:

आपकी कार का रंग बैंगनी है। यह एक वोल्वो मॉडल 300 है!

जांचें कि क्या कोई फ़ाइल HEAD अनुरोध के माध्यम से मौजूद है

यह फ़ंक्शन HEAD पद्धति का उपयोग करके एक AJAX अनुरोध को निष्पादित करता है जिससे हमें यह जांचने की अनुमति मिलती है कि क्या एक तर्क के रूप में दी गई निर्देशिका में कोई फ़ाइल मौजूद है । यह हमें प्रत्येक मामले (सफलता, विफलता) के लिए कॉलबैक लॉन्च करने में भी सक्षम बनाता है।

function fileExists(dir, successCallback, errorCallback) {
    var xhttp = new XMLHttpRequest;

    /* Check the status code of the request */
    xhttp.onreadystatechange = function() {
        return (xhttp.status !== 404) ? successCallback : errorCallback;
    };

    /* Open and send the request */
    xhttp.open('head', dir, false);
    xhttp.send();
};

एक AJAX प्रीलोडर जोड़ें

AJAX कॉल निष्पादित करते समय यहाँ GIF प्रीलोडर दिखाने का एक तरीका है। हमें अपना ऐड तैयार करने और प्री-लोडर फंक्शंस को हटाने की जरूरत है:

function addPreloader() {
  // if the preloader doesn't already exist, add one to the page
  if(!document.querySelector('#preloader')) {
    var preloaderHTML = '<img id="preloader" src="https://goo.gl/cNhyvX" />';
    document.querySelector('body').innerHTML += preloaderHTML;
  }
}

function removePreloader() {
  // select the preloader element
  var preloader = document.querySelector('#preloader');
  // if it exists, remove it from the page
  if(preloader) {
    preloader.remove();
  }
}

अब हम इन कार्यों का उपयोग करने के लिए देखने जा रहे हैं।

var request = new XMLHttpRequest();

onreadystatechange फ़ंक्शन के अंदर आपको एक स्टेटमेंट onreadystatechange होना चाहिए: request.readyState == 4 && request.status == 200 ।

यदि सच है : अनुरोध समाप्त हो गया है और प्रतिक्रिया तैयार है कि हम कहां से removePreloader() । removePreloader() उपयोग करेंगे।

यदि गलत है तो गलत : अनुरोध अभी भी जारी है, इस मामले में हम फ़ंक्शन addPreloader()

xmlhttp.onreadystatechange = function() {

  if(request.readyState == 4 && request.status == 200) {
    // the request has come to an end, remove the preloader
    removePreloader();
  } else {
    // the request isn't finished, add the preloader
    addPreloader()
  }

};

xmlhttp.open('GET', your_file.php, true);
xmlhttp.send();

वैश्विक स्तर पर AJAX की घटनाओं को सुनना

// Store a reference to the native method
let open = XMLHttpRequest.prototype.open; 

// Overwrite the native method
XMLHttpRequest.prototype.open = function() {
    // Assign an event listener
    this.addEventListener("load", event => console.log(XHR), false);
    // Call the stored reference to the native method
    open.apply(this, arguments);
};