AJAX with jQuery

AJAX Demo 
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>AJAX Part 1</title>
        <!-- get jQuery from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            // same as window.onload
            $(document).ready(function () {
                $('button').click(buttonClicked);
            })

            function onDataReceived(data) {
                console.log(data);

                $('#name').text(data.name);
                $('#city').text(data.city);
                $('#weather').text(data.weather.weather);
                $('#temperature').text(data.weather.temp);
            }

            function buttonClicked() {
                clearFields();
                var url = 'http://services.faa.gov/airport/status/{CODE}?format=application/json';
                var code = $('input').val();
                console.log(code);
                url = url.replace("{CODE}", code);
                console.log(url);
                $.get(url, onDataReceived).fail(onFailure);
            }

            function onFailure(jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 404)
                    $('#error').text("The airport code '" + $('input').val() + "' was not found.");
                else
                    $('#error').text("An error with code " + jqXHR.status + " has occurred.");
            }
            function clearFields() {
                $('#name').text(" ");
                $('#city').text(" ");
                $('#weather').text(" ");
                $('#temperature').text(" ");
                $('#error').text(" ");
            }
        </script>
    </head>
    <body>
        <input placeholder="enter airport code" style="text-transform:uppercase"/>
        <button>GetInfo</button>
        <p>Airport Name :</p>
        <p id='name' />
        <br />
        <p>City :</p>
        <p id='city' />
        <br />
        <p>Weather :</p>
        <p id='weather' />
        <br />
        <p>Temperature :</p>
        <p id='temperature' />
        <br />
        <p id="error"></p>
    </body>
    </html>
Top

Index

AJAX Demo Part 2 
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>AJAX Demo</title>
        <!-- get jQuery from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            // same as window.onload
            $(document).ready(function () {
                $('button').click(buttonClicked);
            })

            function onDataReceived(data, status, xhr) {
                console.log(data);
                console.log(status);
                // response object
                console.log(xhr);

                $('#name').text(data.name);
                $('#city').text(data.city);
                $('#weather').text(data.weather.weather);
                $('#temperature').text(data.weather.temp);
            }

            function buttonClicked() {
                var code = $('input').val();
                console.log(code);
                if (code != "") {
                    clearFields();
                    var request = {
                        url: 'http://services.faa.gov/airport/status/{CODE}'.replace("{CODE}", code),
                        type: 'GET',
                        success: onDataReceived,
                        headers: { Accept: 'application/json' },
                        error: onError,
                        timeout: 3000
                    };
                    $.ajax(request);
                }
            }

            function onError(xhr, status, error) {
                // response object
                console.log(xhr);
                console.log(status);
                console.log(error);

                if (xhr.status == 404) {
                    $('#error').text("The airport code '" + $('input').val().toUpperCase() + "' was not found.");
                } else if (status == 'timeout') {
                    $('#error').text("The server took too long to respond.");
                } else {
                    $('#error').text("An error with code " + xhr.status + " has occurred.");
                }
            }
            function clearFields() {
                $('#name').text(" ");
                $('#city').text(" ");
                $('#weather').text(" ");
                $('#temperature').text(" ");
                $('#error').text(" ");
            }
        </script>
    </head>
    <body>
        <input placeholder="enter airport code" style="text-transform:uppercase"/>
        <button>GetInfo</button>
        <p>Airport Name :</p>
        <p id='name' />
        <br />
        <p>City :</p>
        <p id='city' />
        <br />
        <p>Weather :</p>
        <p id='weather' />
        <br />
        <p>Temperature :</p>
        <p id='temperature' />
        <br />
        <p id="error"></p>
    </body>
    </html>
Top

Index

n4jvp.com