我正在使用 JSON 传输数据。
我的 HTML 页面需要什么才能使用 Ajax 读取仅在我的脚本中包含一个 JSON 对象的文件?
我是否也需要 jQuery,或者是否可以使用 Ajax 加载该 JSON 文件?
在不同的浏览器上有区别吗?
我正在使用 JSON 传输数据。
我的 HTML 页面需要什么才能使用 Ajax 读取仅在我的脚本中包含一个 JSON 对象的文件?
我是否也需要 jQuery,或者是否可以使用 Ajax 加载该 JSON 文件?
在不同的浏览器上有区别吗?
你不需要任何库,一切都可以在 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 以获得好的文档、简单的 API 和快速入门,尽管MDN对 JavaScript 本身也有帮助(并且您确实应该越来越多地了解 JavaScript/DOM API,即使您主要是依靠jQuery)。
我更喜欢使用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 执行以下操作:
$.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
});