短的、干净的:

const http = new XMLHttpRequest() http。打开(“得到”,“https://api.lyrics.ovh/v1/toto/africa”) http.send () http。onload = () => console.log(http.response)

简单的异步请求:

function get(url, callback) {
  var getRequest = new XMLHttpRequest();

  getRequest.open("get", url, true);

  getRequest.addEventListener("readystatechange", function() {
    if (getRequest.readyState === 4 && getRequest.status === 200) {
      callback(getRequest.responseText);
    }
  });

  getRequest.send();
}

窗口。fetch是使用ES6承诺的XMLHttpRequest的现代替代品。这里有一个很好的解释，但它可以归结为(来自文章):

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log('Fetch Error :-S', err);
});

自2017年以来，浏览器支持一直很好。IE可能不会得到官方的支持。GitHub有一个可用的polyfill，增加了对一些传统浏览器的支持(特别是2017年3月之前的Safari版本和同期的移动浏览器)。

我想这是否比jQuery或XMLHttpRequest更方便取决于项目的性质。

这里是规范https://fetch.spec.whatwg.org/的链接

编辑:

使用ES7 async/await，这变得很简单(基于这个Gist):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

Ajax

你最好使用Prototype或jQuery这样的库。

这里有一个xml文件的替代方案，以非常快的方式将文件作为对象加载和访问属性作为对象。

注意，为了使javascript能够正确地解释内容，有必要将文件保存为与HTML页面相同的格式。如果你使用UTF8保存你的文件在UTF8等。

XML就像树一样?而不是写作

     <property> value <property> 

写一个简单的文件，像这样:

      Property1: value
      Property2: value
      etc.

保存文件.. 现在调用函数....

    var objectfile = {};

function getfilecontent(url){
    var cli = new XMLHttpRequest();

    cli.onload = function(){
         if((this.status == 200 || this.status == 0) && this.responseText != null) {
        var r = this.responseText;
        var b=(r.indexOf('\n')?'\n':r.indexOf('\r')?'\r':'');
        if(b.length){
        if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/gi,'');}
        r=j.split(b);
        r=r.filter(function(val){if( val == '' || val == NaN || val == undefined || val == null ){return false;}return true;});
        r = r.map(f => f.trim());
        }
        if(r.length > 0){
            for(var i=0; i<r.length; i++){
                var m = r[i].split(':');
                if(m.length>1){
                        var mname = m[0];
                        var n = m.shift();
                        var ivalue = m.join(':');
                        objectfile[mname]=ivalue;
                }
            }
        }
        }
    }
cli.open("GET", url);
cli.send();
}

现在你可以有效地获得你的价值。

getfilecontent('mesite.com/mefile.txt');

window.onload = function(){

if(objectfile !== null){
alert (objectfile.property1.value);
}
}

这只是给大家的一份小礼物。谢谢你的喜欢:)

如果您想在本地测试该功能，请使用以下命令重新启动浏览器(除safari外所有浏览器都支持):

yournavigator.exe '' --allow-file-access-from-files

现代、干净、简洁

fetch('https://baconipsum.com/api/?type=1')

让url = 'https://baconipsum.com/api/?type=all-meat&paras=1&start-with-lorem=2'; //只发送GET请求而不等待响应 fetch (url); //使用then来等待结果 获取(url)。然后(r = > r.json()。then(j=> console.log('\nREQUEST 2'，j))); //或async/await (异步()= > console.log('\nREQUEST 3'， await(await fetch(url)).json()) ) (); 打开Chrome控制台网络选项卡查看请求