Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Basic XMLHttpRequest sample requesting a CSV

This is a follow-up to a question raised on Twitter.

 

@BlackBerryDev is it possible to read a csv file from a server in a webworks app?? Please help..

Source

 

I put together the following sample which is successfully retrieving a sample CSV hosted at:

http://labs.adobe.com/technologies/spry/data/photos.csv

 

Before getting into the brunt of it, if you encounter any issues or have any questions, by all means feel free to post here.

 

Let's dive in. The code sample is as follows.

 

config.xml


<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" version="1.0.10.857" >

	<name>Sandbox</name>
	<author>Oros</author>
	
	<content src="index.html"/>
	<access uri="*" subdomains="true" />
	
</widget>

 

I white-listed all URLs in the <access> element, but this can be fine-tuned to specific addresses.

 

index.html


<!DOCTYPE html>
<html>
    <head>
        <title>Sandbox</title>
        
        <script type="text/javascript">
            
            function log (text) {
                document.getElementById("contents").innerHTML = document.getElementById("contents").innerHTML + "<br />" + text;
            }
        
            function ready() {
                log("Ready.");
                var xmlhttp = new XMLHttpRequest();

                xmlhttp.onreadystatechange = function () {
                    log("State: " + xmlhttp.readyState + ", Status: " + xmlhttp.status);
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        log("CSV Content:");
                        log(xmlhttp.responseText);
                    }
                };

                log("Open.");
                xmlhttp.open("GET", "http://labs.adobe.com/technologies/spry/data/photos.csv", true);
                log("Send.");
                xmlhttp.send();
                log("Sent.");
                window.removeEventListener('DOMContentLoaded', ready, false);
            }
            
            window.addEventListener('DOMContentLoaded', ready, false);
        </script>

    </head>
    <body>
        <div id="contents">Loading.</div>
    </body>
</html>

The <body> consists of one <div> that will hold the contents of the CSV. Initially its displayed text is Loading... which should be replaced once the contents are retrieved.

 

To retrieve the contents, I registered an event listener for the DOMContentLoaded event. Once triggered, the ready function will initiate.

 

Within ready, I create a new XMLHttpRequest object and set a function to capture the onreadystatechange event. Specifically, I am looking for:

 

  • readystate = 4; and
  • status = 200

Essentially, these two mean that everything went okay and, if so, we retrieve the responseText and populate our <div> with the content.

 

Before sending the request, we also set a few parameters, specifically:

 

  • We are using a GET, not a POST.
  • The URL (i.e. CSV) to retrieve.
  • true to indicate an asynchronous call; thus requiring the monitor of the onreadystatechange event.

We then send the request and remove our DOMContentLoaded listener to free up some resources. This sample was put together based on the XMLHttpRequest documentation here:

http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

 

Finally, I did add some on-screen logging to allow the monitoring of what is happening:

 

 

I tested this out in Ripple, as well as a these simulators:

 

  • 9780 running 6.0.0.534
  • 9000 running 5.0.0.900 (Rogers build.)

I also had an MDS-CS simulator running at the time.

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Visitor
emoralesgt
Posts: 1
Registered: ‎02-13-2012
My Device: Pearl 9100

Re: Basic XMLHttpRequest sample requesting a CSV

Thank you very much... It worked better than what I expected

 

 

I've also shared this post with our group http://bbdev.dotgt.biz/?p=116

 

thaks again

 

 

Visit the Guatemalan Developer group at
http://bbdev.dogt.biz
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: Basic XMLHttpRequest sample requesting a CSV

My pleasure! Glad to have helped and thanks for sharing this along to your group as well!

 

Also, this is just one approach. If any devs out there have alternatives or improvements on what is posted then by all means feel free to share.

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
Shwarup
Posts: 93
Registered: ‎08-18-2011
My Device: 9550

Re: Basic XMLHttpRequest sample requesting a CSV

Thanks a lot for this post !!! Its help me too.

Thanks,

Shwarup Biswas
Please use plain text.
Developer
Shwarup
Posts: 93
Registered: ‎08-18-2011
My Device: 9550

Re: Basic XMLHttpRequest sample requesting a CSV

Hi Oros,

 

Your example help me to start. In my case, I am getting a new page content in "xmlhttp.responseText" which i need to display in the page. If i use "log(xmlhttp.responseText);" it is not loading any .js or .css file, so i need to re load the page with this response. Could you please give me an idea how to do it.

 

Thanks

Thanks,

Shwarup Biswas
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: Basic XMLHttpRequest sample requesting a CSV

Hi Shwarup,

 

To clarify, you're trying to retrieve an HTML document with XHR and then replace the contents of the screen with the retrieved contents, is that right? The issue is that any associated JS or CSS on the HTML document is being inserted as text, but not actually loaded into the page. Please let me know if that is correct.

 

Also, I'm curious, is the HTML document a full HTML document? Example:

 

<!DOCTYPE html>
<html>
    <head>
        <!-- More stuff here. -->
    </head>
    <body>
        <!-- Even more stuff here. -->
    </body>
</html>

Or is it just a fragment?

 

<div>
    <!-- Actual content here. -->
</div>

Finally, do you have any control over the format of the retrieved document or are we talking something like loading external websites? If the latter, could you expand on the use-case just a little? There may be other ways aside from XHR if we're looking at just loading user-specified URLs as our content.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
Shwarup
Posts: 93
Registered: ‎08-18-2011
My Device: 9550

Re: Basic XMLHttpRequest sample requesting a CSV

Hi Oros,

 

Thanks for your quick reply.

 

>> The response contain a full HTML document.  which is the login page to our portal.

>> I don't have any control over the format.

 

We have to send the device details in the request body so that the server authenticates it and redirects us to the login page so that we can get in to the system.

Thanks,

Shwarup Biswas
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: Basic XMLHttpRequest sample requesting a CSV

Hi Shwarup,

 

In that case, it may be best to use the tips noted here to return the result as a document, as opposed to text:

http://www.html5rocks.com/en/tutorials/file/xhr2/

 

You'll still need to parse out the pieces you need (elements, scripts, etc.) and populate your content. Another option might be to do a basic handshake with XHR, then populate an <iframe> with the URL you want to load.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
Shwarup
Posts: 93
Registered: ‎08-18-2011
My Device: 9550

Re: Basic XMLHttpRequest sample requesting a CSV

Thanks Oros for your reply.

 

I able to fix the issue with bellow command:

window.open("data&colon;text/html;charset=UTF-8,"+unescape( encodeURIComponent( xmlhttp.responseText ) ),"_self");

 

Now I stucked on "how to intercept the url in blackberry 10 webview"

 

Could you give me any idea or example to go ahead.

 

Thanks.

 

 

Thanks,

Shwarup Biswas
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: Basic XMLHttpRequest sample requesting a CSV

Not sure I fully follow Shwarup, can you elaborate a little / provide the use-case?


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.