blocks|key|179559|text|在过去，Ajax在不同的浏览器中是不同的(如果您需要支持较旧的浏览器，不幸的是，许多用户仍然在使用)。对于较老的浏览器，您需要一个像JQuery+(或您自己的等效代码)这样的库来处理浏览器差异。无论如何，对于初学者来说，我可能会推荐jQuery来获得好的文档、简单的应用程序接口和快速入门，尽管MDN对JavaScript本身也很有帮助(即使您主要依赖于jQuery，您也应该逐渐了解JavaScript/DOM+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|179560|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.mozilla.org/^0|43|3|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

In the past, Ajax was different in different browsers (and still is if you need to support older browsers which a good number of users are unfortunately still using). For older browsers, you would need a library like JQuery (or your own equivalent code) to handle the browser differences. In any case, for a beginner, I might recommend jQuery for good docs, a simple API, and getting started quickly, though <a href="http://developer.mozilla.org/" rel="nofollow">MDN</a> is helpful for JavaScript itself too (and you really should increasingly get to understand JavaScript/DOM APIs even if you primarily rely on jQuery).

blocks|key|397423|text|你不需要任何库，所有东西都在vanilla+javascript中，可以获取json文件并解析它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|397424|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);
});|code-block|syntax|javascript|397425|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You don't need any library, everything is available in vanilla javascript to fetch a json file and parse it :

<pre><code>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);
});
</code></pre>

blocks|key|397458|text|最有效的方法是使用纯JavaScript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|397459|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("("%2Bthis.responseText%2B")");
++++++//+do+something+with+json
++++}
++++else+alert("HTTP+error+"%2Bthis.status%2B"+"%2Bthis.statusText);
++}
}
a.send();|code-block|syntax|javascript|397460|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The most efficient way is to use plain JavaScript:

<pre><code>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();
</code></pre>

blocks|key|397485|text|我更喜欢使用ajax+jquery。Jquery让生活变得更加简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|397486|例如，你可以在服务器端做的事情是，我假设你使用的是php：|397487|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


}|code-block|syntax|javascript|397488|在客户端，您可以使用jquery+ajax执行以下操作：|397489|++++$.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

++++++++});|397490|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I prefer to use ajax jquery. Jquery makes live a lot easier.

What you for example can do on the server side is, i assume you're using php:

<pre><code>if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
 // if it's an ajax request

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


}
</code></pre>

At the client side you can do the following using jquery ajax:

<pre><code> $.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

 });
</code></pre>

I am using JSON to transfer data.

What do I need in my HTML page to read a file with Ajax that only includes one JSON object into my script?

Do I need jQuery too, or is it possible to load that JSON file with Ajax?

Is it different on different browsers?

How do I load a JSON object from a file with ajax?

服务器

jQuery

JSON

我正在使用JSON传输数据。如果我的脚本中只包含一个JSON对象，那么我需要在HTML页面中使用Ajax读取一个文件？我是否也需要jQuery，或者是否可以使用Ajax加载该JSON文件？它在不同的浏览器上是不同的吗？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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