Javascript 如何使用ajax从文件加载JSON对象？

我正在使用JSON传输数据

我需要在我的HTML页面中使用Ajax读取一个只在脚本中包含一个JSON对象的文件吗

我是否也需要jQuery，或者是否可以用Ajax加载JSON文件

---

不同浏览器上的Ajax不同吗？

过去，Ajax在不同的浏览器中是不同的（如果您需要支持很多用户仍在使用的旧浏览器，仍然是如此）。对于较旧的浏览器，您需要一个类似JQuery的库（或您自己的等效代码）来处理浏览器差异。在任何情况下，对于初学者，我可能会推荐jQuery作为好的文档，一个简单的API，并且快速入门，尽管它对JavaScript本身也很有帮助（而且即使您主要依赖jQuery，您也应该越来越了解JavaScript/DOM API）。

您不需要任何库，在vanilla javascript中，可以获取json文件并对其进行解析：

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

// this requests the file and executes a callback with the parsed result once
//   it is available
fetchJSONFile('pathToFile.json', function(data){
    // do something with your data
    console.log(data);
});

---

最有效的方法是使用普通JavaScript：

var a = new XMLHttpRequest();
a.open("GET","your_json_file",true);
a.onreadystatechange = function() {
  if( this.readyState == 4) {
    if( this.status == 200) {
      var json = window.JSON ? JSON.parse(this.reponseText) : eval("("+this.responseText+")");
      // do something with json
    }
    else alert("HTTP error "+this.status+" "+this.statusText);
  }
}
a.send();

---

我更喜欢使用ajax jquery。Jquery使生活变得更加简单

例如，您在服务器端可以做的是，我假设您使用的是php：

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    // if it's an ajax request

    $json['success'] = 1;
    $json['html'] = '<div id="test">..[more html code here].. </div>';
    echo json_encode($json);
}else{
    // if it's an non ajax request


}

---

与许多其他库一样，jQuery使Ajax变得更容易，但您可以使用Vanilla JS实现Ajax。您的web服务器上有一个包含序列化JSON数据的静态文件，您希望使用Ajax读取该数据？只要您不需要支持IE 5和6，您可能希望添加

|httpRequest.status==0

（用于本地连接）。当我开始学习

xmlhttprequest

@JuanMendes时，这真的让我大吃一惊。这段代码只需要

var-httpRequest=（window.xmlhttprequest）？new-xmlhttprequest（）：new-ActiveXObject（“Microsoft.XMLHTTP”）但是，谁在乎旧版本的IE？；）谢谢，这是我作为Javascript初学者所需要的，并且比我见过的其他解决方案更简单。我喜欢那里有匿名函数，而不是第三个单独的函数。如果我知道回调不是函数，我就不会解析json。这段代码可以工作，但请注意错误路径将导致“NS\u ERROR\u DOM\u BAD\u URI:拒绝访问受限URI”使代码看起来不起作用。不是答案，但作为替代方案仍然值得一提
    $.ajax({
          type: "POST",
          url: "[your request url here]",
          data: { name: "JOKOOOOW OOWNOOO" },
          complete: function(e, xhr, settings){
              switch(e.status){
                  case 500:
                     alert('500 internal server error!');
                     break;
                  case 404:
                      alert('404 Page not found!');
                     break;
                  case 401:
                      alert('401 unauthorized access');     
                     break;       
              }
          }           
        }).done(function( data ) {
            var obj = jQuery.parseJSON(data)

            if (obj.success == 1){

                  $('div#insert_html_div').html(obj.html);

            }else if (obj.error == 1){


                            }


            // etc

        });