XMLHTTPRequest, eXist Database, and Javascript aren't connecting.

speedlearner · July 16, 2015

This is my Javascript code:

var Data_Display

var My_Data

function Setup() {

My_Data = new XMLHttpRequest();

My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq");

My_Data.send();

document.getElementById("Information").value = My_Data.responseXML;

}

This is my XML code:

<xml>

<svg>

<svg_data>100</svg_data>

</svg>

</xml>

This is my XQuery:

xquery version "3.0";

for $Data in doc("Database_Example.xml")/xml/svg/svg_data

where $Data = 100

return $Data

When I ran the Javascript code, the computer gave me an Access Control Allow Origin error. It told me that I needed a CORS request. Since I have no idea what a CORS request is or how to insert it into my code, I'm stuck. Can anyone assist me?

Ingolme · July 16, 2015

Cross-Origin requests are HTTP requests done from one domain to another.

In order for your code to work, the Javascript has to be loaded from the same server the file you're requesting is on.

That means you can't just double-click the HTML file to test it, you need to type http://localhost:8080/path/to/file.php in your browser so that the Javascript is originating from the same domain as the xquery code.

speedlearner · July 16, 2015

So for all of this to work I have to store my Javascript code inside the eXist database program?

Ingolme · July 16, 2015

No, your Javascript just has to be loaded from the same server. Just upload your HTML page to the server and run it from there.

speedlearner · July 16, 2015

So you're saying that to use the eXist database in my webpage, I have to have the apache server software. Is that correct?

Ingolme · July 16, 2015

If you're able to access localhost then you already have server software. It doesn't matter whether it's apache or not.

Wherever "/exist/rest/db/apps/HTML_Student/Database_Example.xq" is, you need to put the HTML file there too. Inside the directory that's a parent of /exist

speedlearner · July 16, 2015

I created several modifications. I stored the Javascript code inside the eXist database program. This improved a lot of things. Then I made the following changes:

Here is my HTML code:

<!DOCTYPE html>

<html>

<head>

<title>Database Example</title>

</link>

</script>

</head>

</input>

</body>

</html>

Here is my Javascript code:

var Data_Display

var My_Data

function Setup() {

My_Data = new XMLHttpRequest();

My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq");

My_Data.send();

document.getElementById("Information").value = My_Data.responseXML;

Here is my XQuery code:

xquery version "3.0";

let $header-addition := response:set-header("Access-Control-Allow-Origin","*")

for $Data in doc("Database_Example.xml")/xml/svg/svg_data

where $Data = 100

return $Data

Here is my XML Code:

<xml>

<svg>

<svg_data>100</svg_data>

</svg>

</xml>

All the errors have disappered. But nothing appears in my textbox. I still don't know why.

Ingolme · July 16, 2015

You should read the AJAX tutorial again. You need an event handler for the readystatechange event, the response will be available only when that function runs and the ready state is 4 or 5

justsomeguy · July 16, 2015

Your original error doesn't have anything to do with eXist or whatever else, the problem Ingolme was describing was that you are sending an ajax request to http://localhost:8080, but the error message indicates that you did not open the page with that same protocol, domain, and port. Maybe you just double-clicked on the HTML file, for example, so that the URL starts with file://. That's not going to work. If you're sending an ajax request to http://localhost:8080 then you need to access your web page in the browser via http://localhost:8080 also. Without CORS, you can only send an ajax request to a file with the same protocol, domain, and port.

I stored the Javascript code inside the eXist database program.

What does that mean?

But nothing appears in my textbox.

Use your browser's developer tools to look at the ajax request and check the response from the server. In order for responseXML to be populated, the response from the server will need to have the content-type header set to XML, so check the response headers for the ajax request to make sure it has the right content type. You can also look at the response body to see the actual data that the server responded with.

You need an event handler for the readystatechange event,

Wow I totally missed that, haha.

speedlearner · July 17, 2015

I stored the Javascript code inside the eXist database program.

What does that mean?

It means I stored a copy of my Database_Example.js into the HTML_Student collection in eXist.

Use your browser's developer tools to look at the ajax request and check the response from the server. In order for responseXML to be populated, the response from the server will need to have the content-type header set to XML, so check the response headers for the ajax request to make sure it has the right content type. You can also look at the response body to see the actual data that the server responded with.

I'm using Google Chrome. I have no idea how to find the developer tools in Google Chrome.

I reread the AJAX tutorial. I made the following adjustments to my Javascript document:

var Data_Display

var My_Data

function Setup() {

My_Data = new XMLHttpRequest();

My_Data.onreadystatechange=function()

{

if (My_Data.readyState==4 && My_Data.status==200)

{

document.getElementById("Information").value = My_Data.responseXML;}

}

My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq");

My_Data.send();

When I did, the words object XMLDocument appeared in my textbox. I have yet to achieve the result I want to achieve. What else am I doing wrong?

speedlearner · July 17, 2015

WHat adjustments would I need to make to create a CORS request in my Javascript document?

Ingolme · July 17, 2015

For cross-origin requests your server needs to send an "Access-Control-Allow-Origin" HTTP header.

More details here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

speedlearner · July 17, 2015

I read the article you sent to me. And I have a few questions

var invocation = new XMLHttpRequest();var url = 'http://bar.other/resources/public-data/';function callOtherDomain() {if(invocation) {invocation.open('GET', url, true);invocation.onreadystatechange = handler;invocation.send();

In the invocation.open statement, I see the word Get, the URL of the resource I want to open, and the word true. What is the word true?

I also see the invocation.onreadysetchange. Why is it set to handler? And what is the word handler? I don't understand.

justsomeguy · July 17, 2015

It means I stored a copy of my Database_Example.js into the HTML_Student collection in eXist.

Why? Why not put your code in a file instead?

I'm using Google Chrome. I have no idea how to find the developer tools in Google Chrome.

Maybe start with a search engine? I'm sure that there is some search engine somewhere that will be able to find information about Google Chrome. You could also check the links in my signature, or I'm sure you could even think of other ways to find this information out without waiting for someone to tell you.

the words object XMLDocument appeared in my textbox

ResponseXML is an XMLDocument object, not a string of text. If you want text then don't use XML. If you want XML then you need to traverse through that XMLDocument object to find the information you're looking for.

In the invocation.open statement, I see the word Get, the URL of the resource I want to open, and the word true. What is the word true?

Here's the documentation for the open method:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#open()

Why is it set to handler? And what is the word handler? I don't understand.

It's the arbitrary name of a function that they want to use as the ready state callback. They don't show the definition of it, they're just showing that they are setting a handler function for the callback. The details of what that function does with the response aren't important as part of the discussion on CORS.

speedlearner · July 18, 2015

In the eXist database, folders are called collections. That's why I stored Database_Example.js into the HTML_Student collection.

I'm sure I won't be the last person to ask about the Google Chrome developer tools. So I found them and I will now share them with everyone else. If anyone is looking for the developer tools, all they have to do is open a webpage, hold down the ctrl button, hold down the shift button, and press the letter J. You can also right click the webpage and click inspect element in the pop up dialog box.

I made adjustments to some of my code.

Database_Example.html

<!DOCTYPE html>

<html>

<head>

<title>Database Example</title>

</link>

</script>

</head>

</input>

</body>

</html>

Database_Example.css

#Information {

position: absolute;

top: 300px;

left: 400px;

font-size: 30pt;}

Database_Example.js

var Data_Display

var My_Data

function Setup() {

My_Data = new XMLHttpRequest();

My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq", true);

My_Data.onreadystatechange = 4;

My_Data.send();

}

Database_Example.xs

xquery version "3.0";

let $header-addition := response:set-header("Access-Control-Allow-Origin","*")

for $Data in doc("Database_Example.xml")/xml/svg/svg_data

where $Data = 100

return $Data

Database_Example.xml

<xml>

<svg>

<svg_data>100</svg_data>

</svg>

</xml>

I stored Database_Example.js, Database_Example.xq, and Database_Example.xml into the HTML_Student collection of the eXist database. I also stored a copy of Database_Example.html and Database_Example.css into the HTML_Student collection of the eXist database.

I opened Database_Example.html from Notepad ++. Then I opened Database_Example.html by typing the following url into the Google Chrome address bar:

http://http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.html

I opened the Google Chrome developer tools. The developer tools have several menus. Elements, Network, Sources, Timeline, Profiles, Resources

I opened the Network menu. Something that looked like a spreadsheet appeared. It has several headers. Name, Status, Type, Initiator, Size, Time, Timeline

I looked at the Name column. According to the spreadsheet, Database_Example.html ran first. Then Database_Example.css ran next. This was followed by Database_Example.js Finally Database_Example.xq executed. Then I looked at the status column. According to the spreadsheet, Database_Example.html finished it's execution. Then Database_Example.css finished it's execution. When Database_Example.js executed, it returned a 304 code. According to the HTTP codes, it means that nothing changed in Database_Example.js after it executed. When Database_Example.xq executed, it returned a 200 code.

From what I uderstand, the XQuery executed fine. But still nothing appeared in my textbox. I suspect that there is some error in my Javascript code. But I'm still not able to find it. Do you have any suggestions?

speedlearner · July 18, 2015

I have an update. I changed my Javascript document. Now it looks like this:

var Data_Display

var My_Data

var My_Data2

function Setup() {

My_Data2 = "";

My_Data = new XMLHttpRequest();

My_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/Database_Example.xq", true);

My_Data.onreadystatechange = function () {

if (My_Data.readyState > 0) {

My_Data2 = My_Data2 + " " + My_Data.readyState

document.getElementById("Information").value = My_Data2;

}

My_Data.send();

When I made the change and opened Database_Example.html, the numbers 2, 3, and 4 appeared in my textbox. This is proof positive that my webpage is opening the Database_Example.xq file which is stored inside the eXist database program. However, the results I want to appear in my webpage still wont appear in my textbox. And I still don't know why.

justsomeguy · July 20, 2015

The network tab doesn't show files being executed, it shows the requests that the browser sends. It shows network activity for the page. A 304 response from the server means the browser used a cached version of the file and didn't download it from the server again. That tab only shows requests made by the browser, not anything to do with executing something like Javascript.

the numbers 2, 3, and 4 appeared in my textbox. This is proof positive that my webpage is opening the Database_Example.xq file which is stored inside the eXist database program.

It's only proof that the request was set up, then in process, then complete. It would still show 2, 3, and 4 if the server responded with a 404 (not found) or 500 (internal error). If you want to see how the server actually responded to that request then you can see that on the network tab, including the HTTP response code, and you can click on the request in order to see the actual content that the server sent also. You could also modify your function to print the HTTP response code and the content of the file.

However, the results I want to appear in my webpage still wont appear in my textbox.

Where is the code to put data in the text box? Your setup function in post 15 sets the onreadystatechange handler to the number 4, that's not going to do anything. The onreadystatechange handler is supposed to be a function that gets called whenever the ready state changes.

XMLHTTPRequest, eXist Database, and Javascript aren't connecting.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in