Запрос к удалённому серверу на jQuery

В инструкции будет использоваться бесплатная среда разработки с открытым исходным кодом - NetBeans

Устанавливаем Java (это нужно для работы среды NetBeans): http://java.com/

Скачиваем и устанавливаем среду NetBeans (перед скачиванием выбираем английскую версию и лучше скачать полную версию "All"): https://netbeans.org/downloads/

Нам надо установить и запусить (специально не исправил слово, так как оно смешное!) локальный сервер Apache, для этого скачиваем и устанавливаем XAMPP (при установке оставляем путь поумолчанию C:/xampp): http://www.apachefriends.org/download.html

Запускаем XAMPP

Запускаем локальный сервер Apache, для этого нажимаем "Start" на панели XAMPP, как показано на рисунке:

Запускаем среду NetBeans

Создаём новый проект, для этого выбираем в меню "File" -> "New Project..." -> "PHP" -> "PHP Application" -> "Next", как показано на рисунке:

В текстовом поле "Project Name" вводим имя проекта: jQueryRequest

Выбираем каталог, где будут храниться файлы проекта (наш проект обязательно должен располагаться в каталоге "C:\xampp\htdocs\"), как показано на рисунке:

Добавим главный файл сайта - "index.php", для этого это нажимаем правой кнопкой мыши (ПКМ) по имени проекта (на панели "Projects") и выбираем: "New" -> "PHP Web Page...", как показано на рисунке:

В открывшимся окне в текстовом поле "File Name" вводим имя файла: index -> нажимаем кнопку "Finish", как показано на рисунке:

Теперь наша задача создать кнопку, после нажания на которой наш сайт отправит запрос на удалённый сервер погоды

Примечание. Далее мы будем использовать мой "ключ", который я создал по инструкции "How to get access to free weather API?" на ресурсе: http://www.worldweatheronline.com/free-weather-feed.aspx

Протестируем, что ключ рабочий, для этого скопируем ключ: ca94f06c9f5eedc355a426b72c93b42ab289be22 в текстовое поле "API Key", как показано на рисунке:

Нажимаем кнопку "GET", как показано на рисунке:

Нажимаем кнопку "Try it!", как показано на рисунке:

В поле "Response Body" мы видим ответ в Json-формате, как показано на рисунке:

Примечание. Чтобы создать свой ключ надо выполнить инструкцию "How to get access to free weather API?" http://www.worldweatheronline.com/free-weather-feed.aspx

Перед тем как вернуться к нашей программе скопируем вызов из текстового поля "Call", который мы будем отправлять серверу (а сервер пришлёт нам Json-ответ показанный выше), как показано на ризунке:

И так, в файле "index.php" пишем код кнопки, при нажатии на которую будет отправляться запрос на удалённый сервер. Весь код в файле "index.php" теперь выглядит следующим образом:

index.php


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Запрос к удалённому серверу</title>
    </head>
    <body>
        <input id="requestButton" type="button" value="Показать температуру в Лондоне за 5 дней" />
    </body>
</html>

Ниже кнопки напишем элемент для вывода ответа от сервера:

index.php


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Запрос к удалённому серверу</title>
    </head>
    <body>
        <input id="requestButton" type="button" value="Показать температуру в Лондоне за 5 дней" /><br />
        <span id="output"></span>
    </body>
</html>

Создадим обработчик кнопки в файле "request.js", для этого создадим папку с именем "js", где будет располагаться файл "request.js"

request.js


$( document ).ready( function( ) {
    $( '#requestButton' ).click( function() {
        var city = "London";
        var format = "json";
        var keyValue = "ca94f06c9f5eedc355a426b72c93b42ab289be22";
        $.get( 'https://api.worldweatheronline.com/free/v1/weather.ashx', { q: city, format: format, num_of_days: 5, key: keyValue }, function( data ) {
            $("#output").html("" + JSON.stringify(data, null, 2) + "");
        } );
    } );
} );

Скачиваем библиотеку jQuery: http://jquery.com/ и добавляем её в папку libs, как показано на рисунке:

Подключаем в файле "index.php" скрипты "jquery.min.js" и "request.js"

index.php


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Запрос к удалённому серверу</title>
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/request.js"></script>
    </head>
    <body>
        <input id="requestButton" type="button" value="Показать температуру в Лондоне за 5 дней" /><br />
        <div id="output"></div>
    </body>
</html>

Запускаем приложение (F6)

Нажимаем на кнопку "Показать температуру в Лондоне за 5 дней" и мы видим на экране ответ от сервера: