Пример запроса AJAX JSON - WebDesignStudio1
Per aspera ad astra


Параметры поиска

Выбор рубрики
Поиск по


Сортировать


Порядок отображения



Пример запроса AJAX JSON

Приведен пример запроса AJAX JSON с детальным описанием, описан JSON формат

В предыдущей статье, посвященной AJAX передаче данных в формате XML указывалось, что XML очень удобен для копирования или переноса каких-либо данных со сложной структурой, например, содержимое баз данных. Но за удобство надо платить, в данном случае издержки вызваны тем, что в XML формате довольно высок удельный вес служебной информации, кроме того, тратятся ресурсы сначала на создание XML формата, а затем на его расшифровку. Как говорится, нет в мире совершенства. Но стремится к нему надо. Поэтому был предложен JSON формат для обмена данными, который получился намного эффективнее своего предшественника.

Формат JSON

Еще раз напомню, задача данной статьи полнее рассказать об AJAX запросах, поэтому описание JSON формата будет кратким. Желающим получше с ним познакомиться — милости прошу в Google, тем более, что формат прост, как все гениальное. Но одну ссылку все-таки укажу — уж больно хороша — коротко и внятно, надеюсь указанный источник не грубый плагиат — будет обидно за настоящего автора. А здесь ссылка на описание формата JSON официального сайта.
Формат JSON — это текстовый формат обмена данными, который может использоваться во многих языках программирования. Этот формат считается независимым от языка программирования, но обычно он используется вместе с Javascript, и объяснение этого факта заключается в том, что этот язык позволяет легко взаимодействовать с этим форматом. А главное достоинство JSON формата в том, что он легко читается людьми и имеет предельно мало служебных символов.
Сначала приведем XML формат каких-то данных:


<page>
<type>article</type>
<title>AJAX JSON запрос</title>
<rubric>Примеры AJAX</rubric>
</page>

 
А теперь те же данные в новом JSON формате:


{"type":"article","title":"AJAX JSON запрос","rubric":"Примеры AJAX"}

 
Комментарии, как говорится, излишни.

Взаимодействие Javascript с JSON

Javascript легко взаимодействует с этим форматом, например, вот так происходит присваивание Javascript переменной данных, представленных JSON форматом:


<script type="text/javascript">
var articles =
{ "rubric0": [
{"type":"article","title":"Простой AJAX запрос","author": "Иванов" },
{"type":"article","title":"AJAX XML запрос","author": "Петров" },
{"type":"article","title":"AJAX JSON запрос","author": "Пупкин" },
],
"rubric1": [
{"type":"article","title":"Заказное ПО","author": "Сидоров" },
{"type":"article","title":"Типы сайтов","author": "Скворцов" },
{"type":"article","title":"Виды лицензий ОС Windows","author": "Тяпкин" },
],
"rubric2": [
{"type":"article","title":"Javascript и CSS, введение","author": "Яковлев" },
{"type":"article","title":"Javascript и CSS, поддержка браузерами","author": "Знайкин" },
]
}
</script>

 
Чтобы убедиться в том, что переменная articles теперь содержит присвоенные ей данные, по кнопке "Тест" выведем на экран одно из его свойств, а заодно продемонстрируем, как можно считывать значения из полученной переменной.

Для этого был использован такой скрипт:


<input id="test" type="button" value="Вывод данных" onclick="test()" />
<script type="text/javascript">
var articles = // присваиваем переменной данные в формате JSON
{ "rubric0": [
{"type":"article","title":"Простой AJAX запрос","age": "Иванов" },
{"type":"article","title":"AJAX XML запрос","age": "Петров" },
{"type":"article","title":"AJAX JSON запрос","age": "Пупкин" },
],
"rubric1": [
{"type":"article","title":"Заказное ПО","age": "Сидоров" },
{"type":"article","title":"Типы сайтов","age": "Скворцов" },
{"type":"article","title":"Виды лицензий ОС Windows","age": "Тяпкин" },
],
"rubric2": [
{"type":"article","title":"Javascript и CSS, введение","age": "Яковлев" },
{"type":"article","title":"Javascript и CSS, поддержка браузерами","age": "Знайкин" },
]
}
function test() { //скрипт для извлечения данных из JSON формата
alert('Значение people.rubric0[0]["family"]='+people.rubric0[0]["family"]);
}
</script>

 
И в этом нет ничего удивительного, т.к. синтаксис этого формата имеет родственные корни с синтаксисом Javascript, поэтому его достаточно просто использовать в сценариях. На это указывает само сокращение JSON (JavaScript Object Notation), которое можно перевести как «запись объектов Javascript». Т.к. синтаксис JSON формата похож на синтаксис Javascript, то для разбора данных в этом формате достаточно использовать встроенную функцию Javascript eval(param), которая предназначена для выполнения выражений Javascript. Но надо заметить, что подобная легкость таит в себе скрытую угрозу. Если на ваш запрос придет вредоносный код, то бесконтрольное использование функции eval() для обработки приходящих данных может обернуться большими неприятностями. Поэтому часто работу с форматом JSON осуществляют в помощью небольших дополнительных библиотек, которые упрощают и делают безопасной работу с форматом. В этих примерах использована утилита json/json2.js, которая подходит для всех браузеров, включая старые. С помощью глобального объекта JSON, во-первых, с помощью метода JSON.stringify(value, replacer, space) обеспечивает преобразование данных Javascript в формат JSON, избавляя нас от этой рутинной работы, а во-вторых, с помощью метода JSON.parse(text, reviver), в отличие от eval(param) обеспечивает безопасное преобразование данных, приходящих с сервера, в объекты Javascript.

Недостатки JSON формата

Несколько слов о недостатках формата. В JSON нельзя сообщить о кодировке текстовой строки. Во-первых, согласно стандарту JSON предлагается кодировать только в UTF-8, допустимы кодировки UTF-16 и UTF-32 с порядком следования байт BE и LE, во-вторых, можно использовать коды ASCI, а другие символы представлять в виде escape-последовательностей: \xXX для 8-битных кодировок и \uXXXX для Юникода, в-третьих, плюнув на стандарт, можно использовать любую кодировку, если у клиента и сервера один "хозяин" и договариваться о кодировке через заголовок HTTP протокола:


xmlHttp.setRequestHeader("Content-Type","application/json;charset=windows-1251")

Остается добавить, что последние версии многих браузеров теперь имеют встроенную поддержку JSON. Но вернемся к основной теме статьи.

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

 Вначале мы отправим серверу запрос в JSON формате через GET запрос, а потом покажем, как это проделать методом POST. Итак. 
Ниже представлены те же строки ввода данных, что и в предыдущей статье, задача та же — отправить запрос и получить данные, только теперь с использованием формата JSON.
 

Укажите свое имя:
Укажите фамилию:
Ваш возраст:
 
Ответ сервера:    

 
Ниже приведен текст использованных в примере скриптов.


<script type="text/javascript">
var human = new Object();
var jstr="";
var xmlHttp = new XMLHttpRequest();
var addr = "script/getJSON.php";
function sendData(){
human = getInput();
if ( !checkInputs())return;
xmlHttp = createAjax();
if(xmlHttp){
try{
xmlHttp.open("GET",addr,true);
addr=addr + '?human=' + JSON.stringify(human);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Accept-Charset", "windows-1251");
xmlHttp.onreadystatechange = updPage;
xmlHttp.send(null);
}catch(e){
alert("Невозможно соединиться с сервером:\n"+e.toString()+ "\n"+e.description);
}
}else {alert('xmlHttp undefined');} // xmlHttp did not create
}
function getInput(){
var obj=new Object();
obj.name=document.getElementById("name").value;
obj.family=document.getElementById("family").value;
obj.age=document.getElementById("age").value;
return obj;
}
function checkInputs(){ // check input form
var ret=true;
if(human.name==""||human.family==""||human.age==""){
alert('Вы заполнили не все поля!');
ret=false;
}
return ret ;
}
function createAjax(){
var obj;
try{
obj=new XMLHttpRequest();
}catch(e){alert('e: '+e.toString());
try{
obj=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e1){alert('e1: '+e1.toString());
try{
obj=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2){alert('e2: '+e2.toString());
obj=false;
}
}
}
if(!obj) alert("Объект xmlHttp не создан");
else return obj;
}
function updPage() {
var response=document.getElementById("response");
if (xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
try{response.innerHTML+=xmlHttp.responseText;}
catch(e4){alert("Ошибка доступа к содержимому страницы");}
}
else if(xmlHttp.status==404){alert("Requested URL is not found.");}
else if(request.status==403){alert("Access denied.");};
}
}
</script>

Изменений по сравнению с примером предыдущей статьи немного. В функции sendData() добавилась строка, где к адресу обработки запроса добавлены текстовые параметры в формате JSON с помощью метода JSON.stringify(human) подключенной библиотеки "json2.js". Вот собственно и все, отличий от обычного GET запроса мало.

Но, конечно, более актуальными являются POST запросы в формате JSON, чем мы далее и займемся.
Будем отправлять на сервер следующую строку в формате JSON


{ "mans": [
{"firstName":"Иван","family":"Иванов","age": "33" },
{"firstName":"Семен","family":"Петров","age": "43" },
{"firstName":"Петр","family":"Сидоров","age": "19" },
],
"womans": [
{"firstName":"Вера","family":"Иванова","age": "29" },
{"firstName":"Надежда","family":"Петрова","age": "40" },
{"firstName":"Любовь","family":"Сидорова","age": "15" },
],
"children": [
{"firstName":"Сергей","family":"Высоцкий","age": "7" },
{"firstName":"Саша","family":"Трофимов","age": "8" },
]
}

 
А получив от сервера ту же JSON строку, выведем на экран первые значения всех трех свойств объекта.

Ответ сервера:     

Поскольку изменений в скрипте немного, приведем тексты только измененных функций.


<script type="text/javascript">
var url = "script/php/postJSON.php?timeStamp="+new Date().getTime();
function sendtxt(){
xmlHttp=createAjax();
if( xmlHttp ) {
try{
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Accept-Charset", "windows-1251");
xmlHttp.onreadystatechange=getData;
xmlHttp.send("info="+JSON.stringify(people));
}catch(e){
alert("Невозможно соединиться с сервером:\n"+e.toString()+"\n"+e.description);
}
} else {alert('xmlHttp undefined');}
}
function getData() {
var resp_json;
var resp_obj;
if (xmlHttp.readyState==4){
if(xmlHttp.status==200){
try {
document.getElementById("status").innerHTML = "Данные сервера приняты! ";
resp_obj=JSON.parse(xmlHttp.responseText);
alert("mans[0].family = "+resp_obj.mans[0].family + "\n" +
"womans[0].family = "+resp_obj.womans[0].family + "\n" +
"children[0].family = "+resp_obj.children[0].family
);
}
catch(e4){alert("Ошибка доступа к содержимому страницы");}
}
else if (xmlHttp.status==404) { alert ("Requested URL is not found."); }
else if (request.status == 403) { alert("Access denied."); };
}
}
</script>


Надеюсь все достаточно прозрачно, единственное хочется обратить ваше внимание, что к адресной строке обработчика запроса на сервере url добавлено время формирования запроса. Это сделано для того, чтобы строки запросов отличались друг от друга. Таким способом, если в этом есть необходимость, обычно добиваются того, чтобы сервер не выдавал кешированные запросы, а формировал их каждый раз заново.