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?
You don't need any library, everything is available in vanilla javascript to fetch a json file and parse it :
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);
});
|| httpRequest.status === 0 (for local connections). That really tripped me up when I was starting to learn xmlhttprequestvar httpRequest = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); But, who cares about older versions of IE? ;)
The most efficient way is to use plain 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();
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 MDN is helpful for JavaScript itself too (and you really should increasingly get to understand JavaScript/DOM APIs even if you primarily rely on jQuery).
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:
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
}
At the client side you can do the following using 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
});
