How would I go about fetching multiple XML files? I tried creating an array but that only opens the last file, and as I understand it xmlhttp.open is supposed to cancel any previous send. I tried modifying this which was the closest thing I could find, but my JavaScript knowledge is a bit to limited to adapt it.
This is the basic code I'm using to get one XML file.
if (window.XMLHttpRequest)
{ xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET","myfile.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("TAGNAME");
for (i=0;i<x.length;i++)
{ // Further parsing
}
Also is it possible to then display which file the parsed content comes from in my loop?
try this:
var arr = ["file1.xml", "file2.xml"],
cnt = 0, xhr = new XMLHttpRequest(), method = "GET";
function formatXml(file, xmlDoc) {
var x=xmlDoc.getElementsByTagName("TAGNAME");
console.log(file,x);
}
function getXml() {
xhr.open(method, arr[cnt], true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
formatXml(arr[cnt], xhr.responseText);
cnt++;
if (cnt < arr.length) getXml(); // call again
}
};
xhr.send();
}
getXml(); // start it
Related
I would like my program to import an JSON file, using the data to create an array-list then access the array-list so that I can display it on the web page.
I've tried using JSON.parse() but it only works when I do something like JSON.parse('[{"shape":"polygon"},{"shape":"square"}]); It doesn't work for parsing a JSON file that is not declared inside. My JSON file is saved to my desktop. I'm new to JavaScript and importing files so anything would be helpful!
I've tried using:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObject = JSON.parse(this.responseText);
}
};
xmlhttp.open("GET", "PATIENT51.txt", true);
xmlhttp.send();
I keep getting errors with: JSON.parse(this.responseText);
JSON.parse Error: Invalid character at position:5 problemlist1.html(3,5)
You can just have the log in xmlhttp scope and it'll work.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
console.log(JSON.parse(this.responseText))
}
};
xmlhttp.open("GET", "PATIENT51.txt", true);
xmlhttp.send();
EDIT: seen your edit, in addition, make sure that your JSON has the right format:
{
"key1" : 1,
"key2" : 2,
"key3" : 3
}
I'm making and app and I need do get the number of verses of a chapter of the bible.
I'm getting the info from http://www.kingjamesbibleonline.org/
In order to do that I am making an XMLHttpRequest to send to the server from the function getVerses() from the site.
The problem that I am facing is that I'm not getting a .responseText from the XMLHttpRequest. When I use firebug and call that function, in the Network tab > Response tab I get nothing but on Network tab > Preview I get the answer.
Where is this answer coming from and what is the variable that has this value?
My node code is as follows:
let XMLHttpRequest2 = require("xmlhttprequest").XMLHttpRequest;
function getVerses() {
let xmlhttp = new XMLHttpRequest2(); //: new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == xmlhttp.DONE ) {
if(xmlhttp.status == 200){
console.log(xmlhttp.responseText);
}
else if(xmlhttp.status == 400) { }
else { }
}
}
xmlhttp.open("POST", "http://www.kingjamesbibleonline.org/ajax.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send('callFunc=getMaxVerseForChapter&book='+'"Genesis"'+'&chapter='+'"2"');
}
getVerses();
Apparently the server is very strict and it expects the header to be called Content-Type and not Content-type. Some kind of poorly written stuff obviously (in PHP). Also get rid of the double quotes around the values you are sending.
Here you go:
let XMLHttpRequest2 = require("xmlhttprequest").XMLHttpRequest;
function getVerses() {
let xmlhttp = new XMLHttpRequest2(); //: new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == xmlhttp.DONE ) {
if(xmlhttp.status == 200){
console.log(xmlhttp.responseText);
}
else if(xmlhttp.status == 400) { }
else { }
}
}
xmlhttp.open("POST", "http://www.kingjamesbibleonline.org/ajax.php", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send('callFunc=getMaxVerseForChapter&book=' + 'Genesis' + '&chapter=' + '2');
}
getVerses();
and since you are hardcoding the values, you don't really need string concatenation:
xmlhttp.send('callFunc=getMaxVerseForChapter&book=Genesis&chapter=2);
good afternoon. I'm developing an app that can get a JSON from local (manifest.json). I want to get this file from JavaScript and then read it. But I have a problem, I cant call this file. How can I?
var urlJSON = new XMLHttpRequest("manifes.json").toString;
var dataJSON = JSON.parse(urlJSON);
alert(dataJSON.name);
var xmlhttp = new XMLHttpRequest();
var url = 'manifest.json';
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(JSON.parse(xmlhttp.responseText));
}
if (xmlhttp.status == 404) {}
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
Or run chrome with arguments --allow-file-access-from-files
Or download and create server for your app
Please someone should show me how to do this using javascript. because am using javascript and ajax to load the page that will do the upload and then after use javascript and ajax to submit the form to a php script
function AddMultipleContact(){
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "url.php";
var group = document.getElementById("select-input").value;
var file = document.getElementById('file-name').files;
var variables = "select-input="+group+"&file-name="+file;
xmlhttp.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = xmlhttp.responseText;
document.getElementById("flash-message").innerHTML = data;
}
}
xmlhttp.send(variables); // Actually execute the request
}
Files are generally data, like binary or really anything, it can't just be sent as a querystring and concantenated into a string.
To upload files with ajax you have to use the FormData object, which is only supported from IE10 and up, for older browsers ajax upload isn't possible, and workarounds with iframes etc. has to be implented
function AddMultipleContact() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "url.php";
var group = document.getElementById("select-input").value;
var files = document.getElementById('file-name').files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('files[]', file, file.name);
}
formData.append('select_input', group);
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = xmlhttp.responseText;
document.getElementById("flash-message").innerHTML = data;
}
}
xmlhttp.send(formData);
}
I want my page to execute the same function 3 times, calling for 3 different things each time.
The code is currently
<script>
ajaxGet('/goget.php?name='+edit.dep.value, 'dep_result');
ajaxGet('/goget.php?name='+edit.arr.value, 'arr_result');
ajaxGet('/goget.php?type='+edit.reg.value, 'reg_result');
</script>
But it only executes the last call. Why?
Javascript:
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function ajaxGet(ajaxLoadData, changeToID) {
if(XMLHttpRequestObject) {
var obj = document.getElementById(changeToID);
XMLHttpRequestObject.open("GET", ajaxLoadData);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
You'll want to have each call to ajaxGet create its own XMLHttpRequest.
An XMLHttpRequest can only handle 1 request at a time. And, since they'll be making the request asynchronously, they'll be processing in parallel rather than sequentially.
function ajaxGet(ajaxLoadData, changeToID) {
var obj = document.getElementById(changeToID);
var xhr = new XMLHttpRequest();
xhr.open("GET", ajaxLoadData);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
obj.innerHTML = xhr.responseText;
}
};
xhr.send(null);
}
Granted, browsers generally limit requests to only a few at a time (usually 2), queuing any additional. But your code shouldn't count on that.
Side note: Unless you need to support IE6 or older, you shouldn't need to fallback to ActiveXObject.
You need to change your ajaxGet() method to instantiate a new XMLHttpRequest object at every call. Since, you're using the same XMLHttpRequest every new request is overwriting the previous one.
Hence, you're getting the results returned by the last method call only.
function getXHRObj() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function ajaxGet(ajaxLoadData, changeToID) {
var XMLHttpRequestObject = getXHRObj();
var obj = document.getElementById(changeToID);
XMLHttpRequestObject.open("GET", ajaxLoadData);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}