We Keep Coding

JavaScript - Why the strange order of executing codes and then got stuck - XMLHttpRequest - Read URL w/ Login

My code is listed below. I added several console.log to let me locate my problem. But the return of the code is quite strange, and I didn't manage to find answers here, so I asked a new question.
var quote_data = new XMLHttpRequest();
var url = "http://SOME.WEBSITE.com/API_QUERIES?&FIELDS=VALUES&output=text"
console.log("HERE0: Begin");
quote_data.open("GET", url, true);
console.log("HERE1: After open");
quote_data.setRequestHeader('Authorization', 'Basic '+btoa('USERNAME'+':'+'PASSWORD'));
console.log("HERE2: After setRequestHeader");
quote_data.send();
console.log("HERE3: After send");
quote_data.onreadystatechange = function (){
if (quote_data.readyState == 4 && quote_data.status == 200) {
console.log(quote_data.status);
console.log('HERE4A: Works Fine');
var alltext = quote_data.responseText;
var lines = alltext.split("\n");
alert(lines);
}
else {
console.log("HERE4B: Error Reason: "+quote_data.status+" "+quote_data.readyState);
}
}
console.log("HERE5: After statechange");
var split_lines = alltext.split(",");
console.log("HERE6: End");
The return of this code is:
Return from Google Chrome
My problem is:
(1) Why after executing the part with console.log('HERE4A: Works Fine'); the code no longer move on to console.log("HERE5")?
(2) Why executing console.log("HERE5") first after console.log("HERE3") instead of executing console.log("HERE4")?
Thank you all for your attention and help!!!

Ajax call is asynchronous so HERE5 will be displayed right after this ajax call. You should move the rest of the code into the function like:
quote_data.onreadystatechange = function (){
if (quote_data.readyState == 4 && quote_data.status == 200) {
console.log(quote_data.status);
console.log('HERE4A: Works Fine');
var alltext = quote_data.responseText;
var lines = alltext.split("\n");
alert(lines);
console.log("HERE5: After statechange");
var split_lines = alltext.split(",");
console.log("HERE6: End");
}
else {
console.log("HERE4B: Error Reason: "+quote_data.status+" "+quote_data.readyState);
}
}

XMLHttpRequest sends url as response text, Firefox doesn't redirect

I have some javascript that sends a XMLHttpRequest to a PHP file. This PHP file sends a response, and javascript is supposed to create a URL and redirect to it, using the response text as a parameter. In all other browsers it works fine, but Firefox won't include the response text in the URL.
This is the javascript example:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'filename.php', true);
xhr.onreadystatechange = function(e){
var id = e.currentTarget.responseText;
var urlWithId = "restofurl?id=" + id;
window.location.href = urlWithId;
}
xhr.send(fd);
and filename.php is just a number at the moment:
<?php
echo "3";
?>
I have tried putting other parts of the url (up to the whole url) in the php part, and firefox always cuts out exactly that part. I have also tried copying the response several times to different variable, copying it character by character, putting it in a function that just returns the input again,...
This is only going to be on my own computer, so I don't need to worry about any security issues, so I'm mostly looking for an easy way to cheat around this rather than the way it would be done professionally. Does anyone have any idea?

This is a basic example, you actually have to test readyState status. If i remember well, it is also safer to set the event function before sending the request (not really sure of that).
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
//do something with this.responseText
}
};
xhr.open("POST", url, true);
xhr.send();
EDIT:
This is one of the reasons why i use frameworks, for the old browser support, but this is not an answer. To be more precise, in the past (present?), browsers used to implement exotic functions. It's been a long time i didnt bother to use XHR objects directly, last time it was for file uploads with loading bar (canvas). It shows you the basic way to handle some stuff. This is longer and a bit old fashioned, but well, it works.
function customXHR(){
if(window.XMLHttpRequest){
return new window.XMLHttpRequest;
}else{
try{ //the weird ones
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch(ex){
return null;
}
}
}
var xhr = customXHR(), pleaseStop = false, startDraw = false;
if(xhr){
xhr.addEventListener('load', function(e){
var jsonRep;
if(!pleaseStop){
//did use a JSON response
jsonRep = $.parseJSON(e.target.responseText);
//do the rest, we finished
}
}, false);
xhr.addEventListener('error', function(e){
//error
pleaseStop = true;
}, false);
xhr.upload.addEventListener('progress', function(e){
//why not let this as an example!
//file_size must be retreive separately, i fear
if(e.lengthComputable && file_size > 0 && !pleaseStop && startDraw){ draw_progress(e.loaded / file_size); }
}, false);
xhr.addEventListener('loadstart', function(e){
//can be used too
}, false);
xhr.addEventListener('readystatechange', function(e){
if(e.target.status == 404 && !pleaseStop){
//error not found
pleaseStop = true;
}
if(e.target.readyState == 2 && e.target.status == 200){
startDraw = true;
}
/*if(e.target.readyState == 4){
//not used here, actually not exactly the same as 'load'
}*/
}, false);
xhr.open("POST", url, true);
xhr.send();
} //else no XHR support

Chrome Extension: WebQL database is not appearing in Inspector

I am trying to create database and tables in background.js file of Chrome but somehow it's not being created. When I see in Chrome Inspector > Resources > WebSQL, I find nothing. Code is given below:
function fetchData(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/php/fetch.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// JSON.parse does not evaluate the attacker's scripts.
var resp = xhr.responseText;
if(resp != null) {
var json = JSON.parse(resp)
console.log(resp);
var data = json['data'];
if(data != null) {
openDatabase('documents', '1.0', 'my storage', 5*1024*1024, function (db) {
alert('Called'); //This is not being called.
});
//var dbConnection = openDbConnect();
//createTable(dbConnection);
//Code below is called
for(var a=0;a <= data.length;a++) {
alert(data[a].title);
}
}
}
}
}
xhr.send();
}
Update
I guess it's being created: My Extension ID is bkjajbjnoadlhnhmfekipifehbhgidpg
In ~/Library/Application Support/Google/Chrome/Default/databases I find:
chrome-extension_bkjajbjnoadlhnhmfekipifehbhgidpg_0
But it's weird I can't see it in Inspector.
Update #2
Turns out that like pages, WebSQL is not visible across Chrome. It shows Db to the page which is visited. Now I am getting no idea how to excess chrome related Db in Viewer.

To access the inspector for the background page of your app, go to Menu>Settings>Extensions and make sure it's in Developer Mode. It should have a link to inspect the background page of your app in there. It will open up in a new window.

How should I create two object to do two different ajax calls?

I have:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if(xhr.status === 200) {
document.getElementById('content').innerHTML = xhr.responseText; // Update
}
};
xhr.open('GET', 'data/data-one.html', true); // Prepare the request
xhr.send(null);
Now I want to do the same thing for another link, so when the link is clicked, in the code above, data-one.html is inserted to the HTML container with an id of content in my html page.
Now lets image I have another link in my nav and want to do the same process for another html container with an id of content1 this time to insert data-two.html .
Do I have to create the httprequest in this file or another ajax file? Are the variables gonna be different?
I already tried with the same variable both in the same file and other files but I get an error saying the I can't set the innerHTML to Null. I can't find out why. Please help.

This code is just to get you started. It is very verbose and can be improved to reused. For the sake of clarity I decided to keep it simple though.
function reqListener1 () {
console.log("listener1 -- html echo", this.responseText);
}
function reqListener2 () {
console.log("listener2 -- json echo", this.responseText);
}
document.addEventListener("DOMContentLoaded", function () {
var url1 = "/echo/html/";
var url2 = "/echo/json/";
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener1);
oReq.open("GET", url1);
oReq.send();
// you could use the same variable. but you'll need to instantiate a different object
var oReq2 = new XMLHttpRequest();
oReq2.addEventListener("load", reqListener2);
oReq2.open("GET", url2);
oReq2.send();
});
Demo: http://jsfiddle.net/pottersky/7dz8r19d/1/

Extract URL data from XMLHttpRequest

here is my javaScript code:
window.addEventListener('load', function() {
var submitimages = document.getElementById('submitimages');
submitimages.addEventListener('click', upload);
var images = document.getElementById('images');
});
var upload = function(event) {
event.preventDefault();
event.stopPropagation();
var data = new FormData();
for(var i = 0; i < images.files.length; ++i) {
data.append('images[]', images.files[i]);
}
var xhr = XMLHttpRequest();
xhr.open('POST', 'upload.php?test=' + 'test', true);
xhr.send(data);
}
My objective is to upload multiple images using form data and I want those sent images to move on a different directory depending on text that is on the url upload.php?test=' + 'test' where as on my example I want to move those image to test folder
and here is my php code so far
Please help I tried everything I know but I think I need idea whos someone is more knowledgeable to JavaScript. Regards