XMLHttpRequest

You can send HTTP (or HTTPS) requests to and receive responses from a Web server using JavaScript. The API is based on the HTML5 specification and the Ajax mechanism widely used in the Web environment, and it has been enhanced from the older XMLHttpRequest API.

The main features of the XMLHttpRequest API include the following:

  • Supporting cross-origin request sharing (CORS)

    In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the latest XMLHttpRequest API supports CORS.

    To send a cross-origin request, you must create an XMLHttpRequest interface instance and use its open() method. Set the request URL method parameter as the cross-origin URL.

Note

For the cross-origin request to work, the authority for the external domain access must be set in the server belonging to the cross-origin URL.

Send a cross-origin request

To use the XML HTTP request features in your application, you must learn to send a cross-origin request:

  1. Create an XMLHttpRequest interface instance:

    <script>
    var client = new XMLHttpRequest();

  2. Open the connection with the open() method using the cross-domain URL as a parameter. Send the request with the send() method:

        client.open('GET', 'video_sample.mp4');
    client.send();
</script>
    Note

    Cross-domain access only works if the server allows the domain access of the client.

Source code

For the complete source code related to this use case, see the following files:

Upload files with Ajax

To use the XML HTTP request features in your application, you must learn to upload files in the background with Ajax:

  1. Define the input elements for the file upload. Use the upload() method for the button click event to upload the file when the button is clicked:

    <input type="file" id="uploadfile" name="uploadfile"/>
<input type="button" value="upload" onclick="upload()"/>

  2. In the upload() method, create a FormData interface instance, and add the file element with the attached file into it. Use the send() method to send the FormData to the server:

    <script>
    var client = new XMLHttpRequest();

    function upload() {
        var file = document.getElementById('uploadfile');

        /* Create a FormData instance */
        var formData = new FormData();
        /* Add the file */
        formData.append('upload', file.files[0]);

        client.open('post', '/upload', true);
        client.setRequestHeader('Content-Type', 'multipart/form-data');
        client.send(formData); /* Send to server */
    }

    /* Check the response status */
    client.onreadystatechange = function() {
        if (client.readyState == 4 && client.status == 200) {
            alert(client.statusText);
        }
    };
</script>

Source code

For the complete source code related to this use case, see the following file:

Handle request events

To use the XML HTTP request features in your application, you must learn to track requests through events:

  1. Define a text element in which to display the request event results:

    <div id="divText"></div>

  2. Create an XMLHttpRequest interface instance and define event handlers for it:

    <script>
    var html = '';

    var client = new XMLHttpRequest();

    /* Event handlers */
    client.onloadstart = onloadstarthandler;
    client.onprogress = onprogresshandler;
    client.onabort = onaborthandler;
    client.onerror = onerrorhandler;
    client.onload = onloadhandler;
    client.ontimeout = ontimeouthandler;
    client.onloadend = onloadendhandler;
    client.onreadystatechange = onreadystatechangehandler;

    /* Assign request type and server path */
    client.open('GET', 'video_sample.mp4');
    client.send();

  3. Define the actions of each event handler:

        /* When the request begins */
    function onloadstarthandler(e) {
        html += 'onloadstart<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* When the request is in progress */
    function onprogresshandler(e) {
        html += 'onprogress<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* When the client cancels the request */
    function onaborthandler(e) {
        html += 'onabort<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* When server exception occurs */
    function onerrorhandler(e) {
        html += 'onerror<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* When the request is successfully terminated */
    function onloadhandler(e) {
        html += 'onload<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* When a timeout occurs */
    function ontimeouthandler(e) {
        html += 'ontimeout<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* When request is terminated regardless of success or failure */
    function onloadendhandler(e) {
        html += 'onloadend<br/>';
        document.getElementById('divText').innerHTML = html;
    }

    /* Checks current progress based on a random repetition period */
    function onreadystatechangehandler(e) {
        html += 'onreadystate<br/>';
        document.getElementById('divText').innerHTML = html;
    }
</script>

Source code

For the complete source code related to this use case, see the following files:

Track download progress state

To use the XML HTTP request features in your application, you must learn to track download progress:

  1. Define the input elements for managing a download. Use the sendRequest() and abortRequest() methods for the button click events to start and cancel a download:

    <input type="button" value="Send XMLHttpRequest" onclick="sendRequest()"/>
<input type="button" value="Abort Sending" onclick="abortRequest()"/>
<div id="divText"></div>

  2. Create an XMLHttpRequest interface instance and define the handlers for the onprogress and onabort events to track the download progress and cancellation events:

    <script>
    var client = new XMLHttpRequest();

    client.onprogress = onprogresshandler;
    client.onabort = onaborthandler;
</script>

  3. Use the send() method to request for a file to be read when the Start download button is clicked. When the Cancel download button is clicked, use the abort() method to cancel the download:

    <script>
    /* When Start download button is clicked */
    function sendRequest() {
        client.send();
    }

    /* When Cancel download button is clicked */
    function abortRequest() {
        client.abort();
    }

  4. During the download, use the onprogresshandler event handler to track the current and total download size, and calculate the download status. With the onaborthandler event handler, you can display the cancellation notification on the screen:

        function onprogresshandler(e) {
        document.getElementById('divText').innerHTML = 'DownLoading... (' + parseInt(e.loaded / e.total * 100) + '%)';
    }

    function onaborthandler(e) {
        document.getElementById('divText').innerHTML = 'Download has been cancelled by user.';
    }
</script>

Source code

For the complete source code related to this use case, see the following file:

  • Dependencies
    • Tizen 2.4 and Higher for Mobile
    • Tizen 2.3.1 and Higher for Wearable
    • Tizen 3.0 and Higher for TV
Edit this page