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

Make an HTTP request from a BlackBerry Browser web page

by BlackBerry Development Advisor on ‎02-17-2010 10:50 AM (4,032 Views)

Summary

This article applies to the following:

  • BlackBerry® Device Software 4.6 and later
  • XMLHttpRequest JavaScript® object
  • Synchronous and asynchronous Hypertext Transfer Protocol (HTTP) requests



Details

The BlackBerry® Browser introduced support for the XMLHttpRequest object in BlackBerry Device Software 4.6. You can use the XMLHttpRequest object to send and retrieve Extensible Markup Language (XML), HTML, plain text, or other types of data between the BlackBerry Browser and the web server without reloading the entire web page.

var req = new XMLHttpRequest();
req.open("GET", "http://www.rim.com/");
req.send();


 In BlackBerry Device Software 4.6, the browser's JavaScript engine was redesigned to provide greater access to the Document Object Model (DOM). The following DOM specifications are fully supported:

  • DOM Level 2 Core
  • DOM Level 2 HTML
  • DOM Level 2 Styles
  • DOM Level 2 Events

You can create extremely responsive and dynamic web pages by accessing the DOM to update parts of the web page when new data or content is retrieved.

document.getElementById("id").innerHTML = "HTTP response";

 
The BlackBerry Browser supports both synchronous and asynchronous HTTP requests. For synchronous requests, the JavaScript engine waits for a response before processing can continue while an asynchronous request allows other JavaScript functions to be processed while the engine awaits a response.

Synchronous request

function httpSync() {
var req = new XMLHttpRequest();
req.open("GET", "http://www.rim.com");
req.send();
alert('request complete: ' + req.statustext);
}

 

Due to the slower data transfer rates in a wireless browsing environment, requests made by the XMLHttpRequest object should almost always be asynchronous. The onreadystatechanged event handler of the XMLHttpRequest object allows you to define a callback function that is run when the response from an asynchronous request is ready.

Asynchronous request

var req = new XMLHttpRequest();
function httpAsync() {
req.onreadystatechanged = reqCompleteCallback;
req.open("GET", "http://www.rim.com", true);
req.send();
alert('request still processing');
}

function reqCompleteCallback() {
if (req.readyState == 4) {
alert('request complete: ' + req.statustext);
}
}

 

The XMLHttpRequest object can help to reduce the perceived latency of wireless browsing. Because asynchronous requests are made in the background, the BlackBerry smartphone user can continue to work with the current web page while new data is retrieved. Because smaller amounts of data are parsed, the BlackBerry Browser can render modifications to the web page quickly.

Use case: Retrieve data from user-selected files and display file contents on page.

Create the following four files:

data.html


<html><body>This content is from data.html.</body></html>


data.xml

<xml><element>This content is from data.xml.</element></xml>

 

data.txt


This content is from data.txt.

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title> XMLHttpRequest example </title>
    <script type="text/javascript">
        var req;
        function updateContent(url) {
            try {
                req = new XMLHttpRequest();
                req.onreadystatechange = handleResponse;
                req.open('GET', url, true);
                req.send(null);
            } catch(e) {
               alert('exception: ' + e.name + '; ' + e.message);
            }
        }
        function handleResponse() {
            if (req.readyState == 4) {
                if (req.status == 200) {
                    displayOutput(req.responseText);
                } else {
                    displayOutput("Error: " + req.statusText);
                }
            }
        }
        function displayOutput(val) {
            var sOut = val.replace(/</g,"&lt;").replace(/>/g,"&gt;");
            sOut = '<b>HTTP Status: </b>' + req.status +                 '<br/><br/><b>Response Text:</b><br/>' + sOut;
            document.getElementById('contentContainer').innerHTML = sOut;
        }
    </script>
</head>
<body>
    <p>
        <input type="radio" name="contentType"
            onClick="updateContent('data.html')"/> HTML<br/>
        <input type="radio" name="contentType"
            onClick="updateContent('data.xml')"/> XML<br/>
        <input type="radio" name="contentType"
            onClick="updateContent('data.txt')"/> Text <br/>
        <input type="radio" name="contentType"
            onClick="updateContent('unknown_file.txt')"/> Non-existant file
    </p>
    <div id="contentContainer"/>
</body>
</html>


Contributors