Связь между JavaScript и PHP через JSON и XMLHttpRequest

👁 266 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми. Формат JSON был разработан и впервые использован Дугласом Крокфордом.
Несмотря на происхождение от JavaScript, формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовые методы для создания и обработки данных в формате JSON.

Предисловие

В данной статье расматриватся способы взаимодействия между сервером на языке PHP и клиентом на JavaSript.  Связующим звеном между двумя языками может выступать очень удобный формат обмена — JSON. Рассмотрим основные методы и принцип передачи.

Передача данных в формате JSON

Для передачи данных из JavaScript в PHP можно использовать 2 подхода:

  1. реализовать весь код на «голом» JavaScript при помощи объекта XMLHttpRequest;
  2. использовать готовую JavaScript — библиотеку, к примеру jQuery.

1. Реализация запроса на XMLHttpRequest. «Голый» подход

При использовании подхода на голом JavaScript необходимо использовать объект XMLHttpRequest.

Объект XMLHttpRequest (или, сокращенно, XHR) дает возможность браузеру делать HTTP-запросы к серверу без перезагрузки страницы. Несмотря на слово XML в названии, XMLHttpRequest может работать с данными в любом текстовом формате, и даже c бинарными данными. Использовать его очень просто. Различают два использования XmlHttpRequest: синхронное и асинхронное.

Кросбраузерный код для получения объекта XMLHTTPRequest. Хоть сейчас и решены большинство не стыковок совместимости одного и того же кода между разными браузерами, но все же остается проблема и главная причина этому Internet Explorer, который «плывет своим течением». Для решения данной проблемы можно создать кроссбраузерный код, который может выглядеть как:

   function getXmlHttpObject(){
        var xmlHttpObject;
        try {
          xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
            xmlHttpObject = false;
          }
        }
        if (!xmlHttpObject && typeof XMLHttpRequest!=='undefined') {
          xmlHttpObject = new XMLHttpRequest();
        }
        return xmlHttpObject;
    }

Выше приведенный код возвратит объект XMLHttpRequest, соответствующий текущему браузеру.
Синхронный режим. Выше мы привели пример функции, который получает объект XMLHttpRequest, теперь давайте будем использовать ее. Синхронный режим означает, что каждая последующая конструкция кода не будет выполнена, до тех пор, пока текущая не будет закончена. Синхронная передача — это false в 3-м параметре метода open(METHOD, URL, false). В этом примере через XMLHTTPRequest с сервера запрашивается страница example.php, и текст ответа сервера показывается через alert():

    var xmlhttp = getXmlHttpObject();
    var getData = "message=Hello! it is my message!&result=ok";
    xmlhttp.open('GET', 'example.php?'+getData, false);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(null);//Используется только для передачи методом POST
    if(xmlhttp.status >= 200 && xmlhttp.status < 400) {
        var data = JSON.parse(xmlhttp.responseText);//Переводим из JSON в Object
        alert(data.message);//Выводим второй параметр
        alert(data.result);//Выводим первый параметр
    }else
    {
       alert("Error!");//Если ошибка
    }

Следующий способ передачи данных и приема — это использование метода get. Использование get — это простейший способ передачи несложного запроса GET на сервер без необходимости использовать более сложную функцию $.ajax. Он допускает возможность использования одной функции, которая может быть вызвана после окончания запроса (только удачного запроса).

  var jsonData = {"message":"Hello! it is my message!", "result":"ok"};
   var jqxhr = $.get( "example.php", jsonData);
        jqxhr.done(function(responseText) {
        var data = JSON.parse(responseText);//Переводим из JSON в Object
        alert(data.message);//Выводим второй параметр
        alert(data.result);//Выводим первый параметр
    });
    jqxhr.fail(function() {
         alert( "Error!" );//Ошибка
    });
    jqxhr.always(function() {
         alert( "Finished!" );//Сеанс закончен
    });

Наиболее гибкий подход передачи данных методом GET и синхронным способом позволяет метод ajax

   var jsonData = {"message":"Hello! it is my message!", "result":"ok"};
   var getData = "message=Hello! it is my message!&result=ok";
   $.ajax({ url: "example.php", 
        method:"GET",
        async: false,
        data: getData,//или jsonData
        success: function(responseText) {
                var data = JSON.parse(responseText);//Переводим из JSON в Object
                alert(data.message);//Выводим второй параметр
                alert(data.result);//Выводим первый параметр
            },
        error:function(){
               alert( "Error!" );//Ошибка 
           },
        complete:function(){
               alert( "Finished!" );//Сеанс закончен
           }
        });

Серверный PHP код принимает GET — данные от клиента и пересылает обратно клиенту в формате JSON:

//Получаем GET - данные
$message = filter_input(INPUT_GET, "message");//$message = $_REQUEST["message"];
$result = filter_input(INPUT_GET, "result");//$message = $_REQUEST["result"];
//Пересылаем данные в формате JSON
echo json_encode(array("result"=>$result, "message"=>$message));