<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jaggery - Delicious Javascript</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>
    <link href="../css/prettify.css" rel="stylesheet">
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon" href="../images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72"
          href="../images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114"
          href="../images/apple-touch-icon-114x114.png">
</head>

<body>

<%
include('/includes/topnavi.jag');
%>

<div class="container-fluid" style="width: 960px; margin: auto;">
    <div class="row">
        <div class="span16">
            <div class="page-header">
                <h1>
                    Documentation
                    <small>API documentation for Jaggery.js</small>
                </h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span4">
            <div class="well">
                <%
                include('/includes/navi.jag');
                %>

            </div>

        </div>
        <div class="span12">
            <div class="content" id="xhr" name="xhr">
                <h3>XMLHTTPRequest</h3>

                <pre class="prettyprint linenums">
&lt%
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://www.google.lk");
    xhr.send();
    print(xhr.responseText);
%&gt
</pre>
                <%

                var xhrCode = '&lt%'
                + '\n var xhr = new XMLHttpRequest();'
                + '\n xhr.open("GET", "http://www.google.lk");'
                + '\n xhr.send();'
                + '\n print(xhr.responseText);'
                + '\n %&gt';

                var codeSnip = encodeURIComponent(xhrCode);

                var urlString = '../tryitframe.jag?code='+codeSnip;


                %>
                <div id="tryitwindow" class="modal hide fade">
                    <div class="modal-header">
                        <a href="#" class="close">&times;</a>

                        <h3>Try it now</h3>
                    </div>
                    <div class="modal-body">
                        <iframe src="<%=urlString%>" style="border: none;" width="98%"
                                height="520px" scrolling="no"></iframe>
                    </div>

                </div>

                <p align="right">
                    <button class="btn primary" data-keyboard="true" data-backdrop="true"
                            data-controls-modal="tryitwindow">Try it now
                    </button>
                </p>
<div id="pageLinks">
                <a class="navilink" href="#overview">Overview</a>
                <a class="navilink" href="#members">Members</a>
                <a class="navilink" href="#operations">Operations</a>
                </div>
                 <section id="overview">


                <h4>Overview</h4>
                <p class="description"> <code>XMLHttpRequest</code> provides the functionality of server side XML HTTP communication.
                    This follows the W3C <a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest</a> specification.</p>

                </section>

                <section id="members">
                <h4>Members</h4>
                <table class="clsStd member-table">
                    <tbody>
                    <tr>
                        <th>Member</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                    <tr>

                    <tr>
                        <td><code>onreadystatechange</code></td>
                        <td>Function</td>
                        <td>Ready state change callback when async mode is used.</td>
                    </tr>

                    </tbody>
                </table>
               </section>
                <section id="operations">
                    <h4>Operations</h4>

                    <table class="clsStd operations-table">
                        <tbody>
                        <tr>
                            <th>Operation</th>
                            <th>Returns</th>
                            <th>Description</th>
                        </tr>
                         <tr>
                        <td><code>XMLHttpRequest()</code></td>
                        <td>None</td>
                        <td>
                            <pre class="prettyprint">var xhr = new XMLHttpRequest();</pre>
                            Returns a reference to the constructor of an object.


                        </td>
                    </tr>
                            <tr>
                                <td><code>status</code></td>
                                <td>String</td>
                                <td>Retrieves the HTTP status code of the request.</td>
                            </tr>
                            <tr>
                                <td><code>readyState</code></td>
                                <td>String</td>
                                <td>Retrieves the friendly HTTP status of the request.
                                Holds the status of the XMLHttprequest. Changes from 0 to 4
                                    <br><br>
                                        <ul>
                                            <li>0: xhr request not initialized

                                            </li>
                                            <li>1: server connection established

                                            </li>
                                            <li>2: request received

                                            </li>
                                            <li>3: processing request

                                            </li>
                                            <li>4:request finished and response is ready

                                            </li>
                                        </ul>
                                    </td>
                                    </tr>
                            <tr>
                                <td><code>statusText</code></td>
                                <td>String</td>
                                <td>Returns the status-text (e.g. "Not Found" or "OK")</td>
                            </tr>
                            <tr>
                                <td><code>responseText</code></td>
                                <td>String</td>
                                <td>Retrieves the response body as a string.</td>
                            </tr>
                            <tr>
                                <td><code>responseXML</code></td>
                                <td>XML</td>
                                <td>Retrieves the response body as an E4X XML Object
                                </td>
                            </tr>
                        <tr>
                        <td><code>open(method,url,async)</code></td>
                        <td>String</td>
                        <td><pre class="prettyprint">xhr.open(method,url,async);</pre>

                            Specifies the type of request, the URL, whether the request should be handled asynchronously or
                            not, and other optional attributes of a request.

                            <ul>
                                <li>method: the type of request: GET or POST
                                    <br>
                                </li>
                                <li>url: the location of the file on the server
                                    <br>
                                </li>
                                <li>async: true (asynchronous) or false (synchronous)
                                    <br>
                                </li>
                            </ul>
                        </td>
                    </tr>

                    <tr>
                        <td><code>send(string)</code></td>
                        <td>String</td>
                        <td><pre class="prettyprint">xhr.send(string);</pre>
                         Sends the request off to the server.
                            string is only used for POSTing a requests
                        </td>
                    </tr>
                     <tr>
                        <td><code>getAllResponseHeaders()</code></td>
                         <td>String</td>
                        <td><pre class="prettyprint">xhr.getAllResponseHeaders();</pre>
                            Returns header information.
                            
                        </td>
                    </tr>
                    <tr>
                        <td><code>setRequestHeader(name, value)</code></td>
                         <td>None</td>
                        <td><pre class="prettyprint">xhr.setRequestHeader("Content-Type", "application/json");</pre>
                            Adds an HTTP header to the request.
                        </td>
                    </tr>
                    <tr>
                        <td><code>getResponseHeader(name)</code></td>
                        <td>String</td>
                        <td>
                            <pre class="prettyprint">xhr.getResponseHeader("Content-Type");</pre>
                            Gets the specified HTTP header from the response.
                        </td>
                    </tr>
                    <tr>
                        <td><code>abort()</code></td>
                        <td>None</td>
                        <td>
                            <pre class="prettyprint">xhr.abort();</pre>
                            Abort the request if async mode is used.
                        </td>
                    </tr>
                        </tbody>
                    </table>

                </section>
            </div>
            <!-- /xhr div -->
            <br>
            <br>
        </div>

    </div>
    <%
    include('/includes/footer.jag');
    %>

</div>

<!-- /container -->
<%
include('/includes/scripts.jag')
%>
<script src="../js/google-code-prettify/prettify.js"></script>
<script>
$(document).ready(function(){
        $('#xhr').toggleClass('active')  ;
        $('#docs').addClass('active')  ;
        
        }) ;

</script>
</body>
</html>
