如何使用JavaScript进行AJAX调用,而不使用jQuery?


当前回答

现在在现代浏览器中有一个更好的本机Fetch API可用。fetch()方法允许您发出web请求。 例如,从/get-data请求一些JSON:

let options = {
  method: 'GET',      
  headers: {}
};

fetch('/get-data', options)
.then(response => response.json())
.then(body => {
  // Do something with body
});

更多细节请参见MDN Web Docs: Using Fetch API。

其他回答

这可能会有帮助:

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

快速代码获取没有jQuery

async  function product_serach(word) {
            var response = await fetch('<?php echo base_url(); ?>home/product_search?search='+word);
            var json = await response.json();
            for (let [key, value] of Object.entries(json)) 
            {
                console.log(json)
            }                                 
        }

你可以根据浏览器获得正确的对象

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

使用“vanilla”(普通)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();
}

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

你可以在这些链接上尝试类似的解决方案:

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