Services

xmlHttpRequest() Object
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>XMLHttpRequest Object</title>
        <script>
            var xmlhttp;
            window.onload = function () {
                xmlhttp = new XMLHttpRequest();
                document.getElementById('btnGetInfo').addEventListener('click', getService);
            }
            function getService(e) {
                var address = document.getElementById('address').value;
                // GEOCODE: https://maps.googleapis.com/maps/api/geocode/json?address=27%hartford%turnpike%vernon%ct&sensor=false
                var url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";
                // third arg is async or not
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
        </script>
    </head>
    <!--
    GEOCODE: https://maps.googleapis.com/maps/api/geocode/json?address=27%hartford%turnpike%vernon%ct&sensor=false

    MAP: http://maps.google.com?q=51.03841,-114.01679
    -->
    <body>
        <label for="address">Address</label>
        <input type="text" id="address" placeholder="Street City State" />
        <br/>
        <button id="btnGetInfo">Get Address Info</button>
        <div id="result"></div>
    </body>
    </html>
    
Top

Index

Making GET Requests
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>XMLHttpRequest Object</title>
        <script>
            var xmlhttp;
            window.onload = function () {
                xmlhttp = new XMLHttpRequest();
                document.getElementById('btnGetInfo').addEventListener('click', getService);
            }
            function getService(e) {
                var address = document.getElementById('address').value;
                // GEOCODE: https://maps.googleapis.com/maps/api/geocode/json?address=27%hartford%turnpike%vernon%ct&sensor=false
                var url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";
                // third arg is async or not
                xmlhttp.onreadystatechange = process;
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
            function process() {
                //alert(xmlhttp.readyState);
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                }
            }
        </script>
    </head>
    <!--
    GEOCODE: https://maps.googleapis.com/maps/api/geocode/json?address=27%hartford%turnpike%vernon%ct&sensor=false

    MAP: http://maps.google.com?q=51.03841,-114.01679
    -->
    <body>
        <label for="address">Address</label>
        <input type="text" id="address" placeholder="Street City State" />
        <br/>
        <button id="btnGetInfo">Get Address Info</button>
        <div id="result"></div>
    </body>
    </html>
        
Top

Index

Making POST Requests
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Post Request</title>
        <script>
            var xmlhttp = new XMLHttpRequest();
            window.onload = function () {
                xmlhttp = new XMLHttpRequest();
                //var url = "https://makemeapassword.org/api/v1/passphrase/plain";
                var url = "https://makemeapassword.org/api/v1/passphrase/plain?pc=1&wc=3&sp=n";
                xmlhttp.onreadystatechange = process;
                console.log(url);

                xmlhttp.open("POST", url, true);
                // need CORS plug-in to set headers as below
                //xmlhttp.setRequestHeader("wc", "3");
                //xmlhttp.setRequestHeader("pc", "1");
                //xmlhttp.setRequestHeader("sp", "n");
                xmlhttp.send();
            }
            function process() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                }
            }
        </script>
    </head>
    <body>
    </body>
    </html>
        
Top

Index

Working with XML Content
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>XMLHttpRequest Object</title>
        <script>
            var xmlhttp;
            window.onload = function () {
                xmlhttp = new XMLHttpRequest();
                document.getElementById('btnGetInfo').addEventListener('click', getService);
            }
            function getService(e) {
                var address = document.getElementById('address').value;
                address = "3185 Kings Arms Ct Atlanta GA";
                //var url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";
                var url = "https://maps.googleapis.com/maps/api/geocode/xml?address=" + address + "&sensor=false";
                // third arg is async or not
                xmlhttp.onreadystatechange = process;
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
            function process() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var lat = xmlhttp.responseXML.documentElement.getElementsByTagName('lat')[0].firstChild.nodeValue;
                    var lng = xmlhttp.responseXML.documentElement.getElementsByTagName('lng')[0].firstChild.nodeValue;

                    document.getElementById('result').innerHTML = "Latitude : " + lat + "<br/>Longitude : " + lng;
                }
            }
        </script>
    </head>
    <body>
        <label for="address">Address</label>
        <input type="text" id="address" placeholder="Street City State" />
        <br/>
        <button id="btnGetInfo">Get Address Info</button>
        <div id="result"></div>
    </body>
    </html>
        
Top

Index

n4jvp.com