Jquery описание примеры. JQuery - Использование сокращённых AJAX методов (с примерами). Вставка новых и удаление существующих элементов

10.03.17 14K

Функция each jQuery используется для перебора элементов объекта jQuery . Он содержит один или несколько элементов DOM и предоставляет все функции jQuery . Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM . Давайте узнаем об этом более подробно.

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “div0:header ”, “div1:body ”, “div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:

// Элементы DOM $("div").each(function (index, value) { console.log("div" + index + ":" + $(this).attr("id")); });

В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function :

// Массивы var arr = [ "один", "два", "три", "четыре", "пять" ]; $.each(arr, function (index, value) { console.log(value); // Выполнение останавливается после "три" return (value !== "три"); }); // Результат: один два три

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function (index, value) { console.log(value); }); // Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть «обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой (для объектов ).

  • Основной пример использования функции jQuery .each ()
  • Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :

    $("a").each(function (index, value){ console.log($(this).attr("href")); });

    Во втором примере использования jQuery each object выводятся все внешние href на веб-странице (при условии, что используется протокол HTTP ):

    $("a").each(function (index, value){ var link = $(this).attr("href"); if (link.indexOf("http://") === 0) { console.log(link); } });

    Предположим, что на странице есть следующие ссылки:

    JQUERY4U PHP4U BLOGOOLA

    Второй код выдаст:

    http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

    Элементы DOM из объекта jQuery при использовании внутри each() необходимо снова «обернуть ». Потому что сам jQuery — это фактически контейнер для массива элементов DOM . С помощью jQuery each function этот массив обрабатывается так же, как и обычный. Поэтому мы не получаем обернутые элементы сразу после обработки.

  • Пример массива jQuery.each()
  • Еще раз рассмотрим, как можно обрабатывать обычный массив:

    var numbers = ; $.each(numbers , function (index, value){ console.log(index + ":" + value); });

    Результат выполнения кода: 0:1, 1:2, 2:3, 3:4, 4:5 и 5:6.

    Массив содержит числовые индексы, поэтому мы получаем числа, начиная с 0 и до N — 1 , где N — количество элементов в массиве.

  • Пример JSON JQuery.each()
  • У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

    var json = [ { "red": "#f00" }, { "green": "#0f0" }, { "blue": "#00f" } ]; $.each(json, function () { $.each(this, function (name, value) { console.log(name + "=" + value); }); });

    Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

    Мы обрабатываем структуру с помощью вложенного вызова each() . Внешний вызов обрабатывает массив переменной JSON , внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

  • Пример класса jQuery.each()
  • В этом примере показано, как перебрать каждый элемент с классом productDescription :

    Красный Розовый Оранжевый Синевато-зеленый Зеленый

    Вместе с селектором мы используем вспомогательную функцию each() вместо метода each() :

    $.each($(".productDescription"), function (index, value) { console.log(index + ":" + $(value).text()); });

    Результат использования jQuery each function будет следующим: 0:Красный , 1: Оранжевый , 2:Зеленый .

    Нам не нужно использовать индекс и значение. Это параметры, которые помогают определить, какой элемент DOM в настоящее время обрабатывается циклом. Кроме этого в сценарии можно использовать более удобный метод each() :

    $(".productDescription").each(function () { console.log($(this).text()); });

    Результат .

    С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.

    Эффект увеличительного стекла

    Хорошо организованный эффект, позволяющий увеличивать ту часть изображения, над которой будет находиться курсор. В браузерах, незнакомых с CSS3 увеличительное стекло будет квадратным.

    Aviaslider

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

    Широкомасштабная навигация
    Слайдшоу больших изображений
    Навигация, основанная на кругах

    Не так часто можно встретить сайт, на котором было бы много круглых элементов. Плагин Bubble Navigation позволяет сделать динамичную навигацию, построенную исключительно на кругах.

    Выпадающая панель входа на сайт
    Circulate

    Позволяет запускать элементы страницы по окружности, причем в различных плоскостях пространства.

    Flip box

    Плагин Flip позволяет переворачивать элементы так, как будто это карточки.

    Hovering gallery

    Неформальная галерея изображений. Предпросмотр содержимого представляет из себя группу разбросанных фотографий, сделанных на фотоаппарат полароид.

    icarousel

    Простой, но очень приятный слайдер изображений.

    Imageflow

    Слайдшоу, с перемещением изображений в пространстве.

    Interactive picture

    Очень интересный способ сделать интерактивный каталог товаров.

    Jqfancy transitions
    Photo shoot

    Позволяет делать снимки отдельных частей изображения на странице. Нажмите кнопкой мыши на нужную часть изображения и увидите результат на экране.

    Quick sand

    Плагин Quicksand позволит вам сортировать и фильтровать набор элементов, используя для этого очень качественные эффекты.

    Slideout context tips

    Этот плагин будет очень полезен для создания детального описания сложных объектов и интерактивных туров, когда требуется, занимая как можно меньше места предоставить большое количество информации.

    Sliding boxes

    Плагин Sliding boxes поможет сделать необычную динамичную галерею изображений с заголовками к ним.

    zoomer gallery

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

    jQuery — это библиотека JavaScript, которая позволяет веб-разработчикам добавлять дополнительные функции на свои веб-сайты. Она доступна с и предоставляется бесплатно по лицензии MIT. В последние годы jQuery стала самой востребованной библиотекой JavaScript, используемой в веб-разработке.

    Пример jQuery

    Чтобы реализовать jQuery, веб-разработчику нужно сослаться на JavaScript-файл в HTML-коде веб-страницы. На некоторых веб-сайтах размещается собственная локальная копия, в то время как другие просто ссылаются на библиотеку, размещенную Google или сервером. Например, веб-страница может загружать библиотеку jQuery, используя следующую строку в разделе HTML (пример jQuery и cookie):

    Примеры jQuery и Ajax

    После загрузки библиотеки веб-страница может вызывать любую функцию, поддерживаемую библиотекой. Общие примеры включают в себя изменение текста, обработку данных формы, перемещение элементов на странице и выполнение анимаций. jQuery также может работать с Ajax-кодом и такими как PHP и ASP, для доступа к данным из базы данных. Поскольку jQuery выполняется на стороне клиента (а не на веб-сервере), она может обновлять информацию на веб-странице в реальном времени, не перезагружая страницу. Общим примером является автозаполнение, в котором форма поиска автоматически отображает общие данные при вводе запроса.

    Преимущества библиотеки

    Помимо бесплатной лицензии, другой основной причиной, по которой jQuery завоевала такую ​​популярность, является ее кросс-браузерная совместимость. Поскольку каждый браузер отображает и JavaScript по-разному, веб-разработчику может быть сложно сделать веб-сайт одинаковым во всех браузерах. Вместо того, чтобы писать пользовательские функции для каждого браузера, веб-разработчик может использовать одну функцию jQuery, которая будет работать в Chrome, Safari, Firefox и Internet Explorer. Поддержка нескольких браузеров заставила многих разработчиков перейти от стандартного JavaScript к jQuery, поскольку это значительно упрощает процесс кодирования.

    Описание

    Синтаксис jQuery используется для упрощения навигации по документу, выбора элементов DOM, создания анимаций, обработки событий и разработки приложений Ajax. jQuery также предоставляет разработчикам возможность создавать плагины поверх библиотеки JavaScript. Это позволяет программистам создавать абстрактные конструкции для взаимодействия и анимации на низком уровне, расширенные эффекты и высокоуровневые, тематические виджеты. Модульный подход к библиотеке jQuery позволяет создавать мощные динамические веб-страницы и веб-приложения.

    Набор основных функций:

    • выбор элементов DOM;
    • обход и манипуляция с помощью механизма выбора;
    • новый стиль программирования;
    • алгоритмы слияния и структуры данных DOM.

    Стиль повлиял на архитектуру других фреймворков JavaScript, таких как YUI v3 и Dojo, а также стимулировал создание стандартного API Selectors.

    Microsoft и Nokia поставляют jQuery на своих платформах. Microsoft включает его с Visual Studio для использования в рамках ASP.NET AJAX и ASP.NET MVC, а Nokia интегрировала его в платформу разработки виджета веб-времени.

    Обзор

    jQuery представляет собой библиотеку элементов с объектной моделью документов (DOM). DOM представляет собой представление древовидной структуры всех элементов веб-страницы. jQuery упрощает синтаксис для поиска, выбора и управления этими элементами DOM. Библиотека может использоваться для поиска элемента в документе с определенным свойством (например, всех элементов с тегом h1), изменения одного или нескольких его атрибутов (цвета, видимости) или принятия ответа на событие (например, щелчком мыши).

    Разработка

    Библиотека использует такие востребованные функции JavaScript, как fade ins и fade outs при скрытии элементов, анимации и работе с элементами jQuery CSS. jQuery также предоставляет парадигму для обработки событий, которая выходит за рамки выбора и манипуляции элементами DOM. Назначение события и определение функции обратного вызова выполняются одним шагом в одном месте в коде.

    Принципы разработки с помощью jQuery (примеры):

    • Разделение JavaScript и HTML — библиотека предоставляет простой синтаксис для добавления обработчиков событий в DOM с использованием JavaScript, вместо добавления атрибутов событий HTML для вызова функций JS. Таким образом, он поощряет разработчиков полностью отделять код JavaScript от разметки HTML.
    • Краткость и ясность — способствует краткости и ясности с такими инструментами, как цепочки и сокращенные имена функций.
    • Устранение кросс-браузерных несовместимостей — JavaScript-движки разных браузеров немного отличаются, поэтому код JS, который работает для одного браузера, может не работать для другого. Подобно другим инструментариям JavaScript, jQuery обрабатывает все эти кросс-браузерные несоответствия и обеспечивает согласованный интерфейс, который работает в разных браузерах.
    • Расширяемость — новые события, элементы и методы могут быть легко добавлены, а затем повторно использованы как плагин.
    История

    jQuery был первоначально выпущен в январе 2006 года в BarCamp NYC Джоном Ресигом и находился под влиянием ранней библиотеки cssQuery Дина Эдвардса. В настоящее время он поддерживается командой разработчиков под руководством Тимми Уиллисона (с движком селектора jQuery — Sizzle, которым руководит Ричард Гибсон).

    Особенности

    Библиотека включает в себя следующие функции:

    • выбор элементов DOM с использованием многосерверного механизма селектора с открытым исходным кодом Sizzle;
    • выделение проекта DOM-манипуляции на основе селекторов CSS, которая использует имена и атрибуты элементов, такие как id и class, как критерии для выбора узлов в DOM;
    • мероприятия;
    • эффекты и анимации;
    • ajax;
    • объекты отложенных и обещающих для контроля асинхронной обработки;
    • разбор JSON;
    • расширяемость через плагины;
    • утилиты, такие как обнаружение функций;
    • способы совместимости, которые изначально доступны в современных браузерах, но нуждаются в более ранних версиях, таких как inArray () и each (), мульти-браузер (не путать с кросс-браузером).
    Использование

    Библиотека jQuery представляет собой один файл JavaScript, содержащий все его общие функции DOM, события, эффекты и Ajax. Он может быть включен в веб-страницу путем ссылки на локальную копию или на одну из многочисленных копий, доступных на общедоступных серверах. Библиотека имеет сеть доставки контента (CDN), размещенную MaxCDN.

    Пример jQuery в PHP:

    Стили

    jQuery имеет два стиля использования:

  • Через функцию $, которая является фабричным методом для объекта jQuery. Эти функции, часто называемые командами, являются целыми, поскольку все они возвращают объекты jQuery.
  • Через $ — префиксные функции. Это служебные функции, которые напрямую не действуют на объект.
  • Доступ к JQuery и управлеие несколькими узлами DOM обычно начинается с вызова функции $ с помощью строки Это возвращает объект jQuery, ссылающийся на все соответствующие элементы на странице HTML.

    Бесконфликтный режим

    jQuery включает режим.noConflict (), который освобождает управление функцией $. Это полезно, если jQuery используется с другими библиотеками, которые также используют $ в качестве идентификатора. В режиме без конфликтов разработчики могут использовать библиотеки в качестве замены $ без потери функциональности.

    Расширенный функционал

    Функции обратного вызова для обработки событий на элементах, которые еще не загружены, могут быть зарегистрированы внутри.ready () как анонимные функции. Эти обработчики будут вызываться только при срабатывании события. Например, следующий код добавляет обработчик для щелчка мыши на элемент изображения img:

    $("img").on("click",function(){

    //обрабатываем событие click на любом элементе img на странице

    Некоторые функции возвращают определенные значения (например, $("#input-user-email").Val()). В этих случаях цепочка не работает, поскольку значение не ссылается на объект jQuery.

    Создание новых элементов

    Помимо доступа к узлам DOM через иерархию объектов, также возможно создавать новые элементы, если строка, переданная как аргумент в $ (), выглядит как HTML. Например, строка находит элемент выбора HTML с идентификационными картами и добавляет элемент опции со значением VAG и текст Volkswagen:

    $("# выберите carmakes")

    Append($("")

    Attr({значение:VAG})

    Append (Volkswagen)).

    Утилиты

    Функции jQuery с префиксом $ являются функциями полезности, которые влияют на глобальные свойства и поведение. В следующем примере используется функция each (), которая выполняет итерацию через массивы:

    $.each(,function(){

    console.log(это+1);

    Данный пример post jQuery записывает 2, 3, 4 на консоль.

    Ajax

    Можно выполнять Ajax с использованием $ .ajax () jQuery, примером которого могут служить связанные методы для загрузки и обработки удаленных данных:

    url: "/process/submit.php",

    имя: Джон,

    местоположение: "Бостон",

    }).done(function(msg){

    alert("Data Saved:"+msg);

    }).fail(function(xmlHttpRequest, statusText, errorThrown){

    оповещение(

    "Не удалось отправить ваше сообщение.\N\n"

    +"XML Http Request:"+JSON.stringify(xmlHttpRequest)

    + ",\nStatus Текст:"+statusText

    + ",\nError Thrown:"+errorThrown);

    В этом примере на сервере указано имя данных=John и location=Boston для /process/submit.php. Когда этот запрос завершается, функция вызывается, чтобы предупредить пользователя. Если запрос не удался, он предупредит пользователя об ошибке, состоянии запроса и конкретной ошибке.

    Плагины

    Архитектура jQuery позволяет разработчикам создавать подключаемый код для расширения различных функций. В интернете доступны тысячи подключаемых модулей, которые охватывают целый ряд функций, таких как помощники Ajax, веб-службы, динамические списки, инструменты XML и XSLT, перетаскивание, события, обработка файлов cookie и модальные окна.

    Существуют альтернативные плагины для поисковых систем, такие как jquer.in, которые используют более специализированные подходы, такие как перечисление только плагинов, соответствующих определенным критериям (например, те, у которых есть общедоступный репозиторий кода). Разработчик предоставляет «Центр обучения» — ресурс jQuery для начинающих, который может помочь пользователям понять JavaScript и приступить к разработке плагинов.

    jQuery UI

    jQuery UI представляет собой набор виджетов GUI, анимированных визуальных эффектов и тем, реализованных с помощью jQuery CSS (библиотеки JavaScript), каскадных таблиц стилей и HTML. Согласно службе аналитики JavaScript, Libscore, пользовательский интерфейс jQuery используется на более чем 197000 лучших веб-сайтах, что делает его второй по популярности библиотекой JS. Самые известные из них: Pinterest, PayPal, IMDb, The Huffington Post и Netflix.

    jQuery UI являются бесплатным и открытым исходным кодом, распространяемым Foundation под лицензией MIT. Был впервые опубликован в сентябре 2007 года.

    jQuery Mobile

    jQuery Mobile — это веб-инфраструктура с сенсорной оптимизацией (также известная как мобильная инфраструктура). Основное внимание в разработке уделяется созданию инфраструктуры, совместимой с широким спектром смартфонов и планшетных компьютеров, необходимой для растущего рынка диджитал-техники. Совместим с другими платформами мобильных приложений такими, как PhoneGap, Worklight и многими другими.

    → Примеры jQuery для начинающих

    jQuery - javascript библиотека, состоящая из кроссбраузерных функций - оплеток для манипулирования элементами DOM (Document Object Model - Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

    Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }

    Чтобы это же действие совершить в jquery, достаточно сделать так:

    $("#objID") или jQuery("#objID")

    Обращение к функции $() равносильно jQuery() , так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта - jQuery. Далее, считаем что нет других библиотек.

    Начало работы с jQuery

    Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

    После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $("#objID") . Где objID - ID объекта.

    jQuery и CSS

    В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css() . Выглядит в теории это примерно так:

    $("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })

    Пример изменения одного атрибута CSS

    Пример изменения одного атрибута удался!

    Исходный код:

    Пример изменения одного атрибута удался!

    Пример изменения нескольких атрибутов CSS

    Пример изменения нескольких атрибутов!

    Исходный код:

    function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!

    Изменение текста и html

    Для изменения текста или html кода существуют функции text() и html() .

    $("#objID").text("Тру ля ля") $("#objID").html("

    Тру ля ля

    Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

    Пример использования text()

    Исходный код:

    function set_text(){ $("#span3").text("Спасибо!"); }

    Пример использования html()

    Исходный код:

    function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }

    Управление атрибутами с помощью jQuery

    Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

    Пример использования attr()

    Исходный код:

    function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }

    Обработчики событий в jQuery

    Полный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .

    Пример использования click()

    Исходный код:

    $("#butt").click(function(){ alert("Решили проверить?"); });

    Пример использования keyup()

    Введите что-нибудь:

    Вы ввели:

    Исходный код:

    Введите что-нибудь:
    Вы ввели: $("#text2").keyup(function(){ if ($("#text2").val()){ $("#text2_target").css({background:"#980000"}); } else { $("#text2_target").css({background:"#ffffff"}); } $("#text2_target").text($("#text2").val()); });

    Пример использования bind()

    Кликни по мне!


    Исходный код:

    div#log{ background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; } Кликни по мне!
    $(document).ready(function() { $("#log").bind("click", function(e) { $("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + ""); }); });

    AJAX - группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.

    Для реализации технологии используется метод $.ajax или jQuery.ajax :

    $.ajax(свойства) или $.ajax(url [, свойства])

    Второй параметр был добавлен в версии 1.5 jQuery.

    url - адрес запрашиваемой страницы;

    properties - свойства запроса.

    Полный список параметров приведен в документации jQuery.

    В уроке мы используем несколько наиболее часто используемых параметров.

    success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

    data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

    dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

    type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

    url (строка) - адрес URL для запроса.

    Пример 1

    Простая передача текста.

    $.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

    Для ответа имеется элемент div .result .

    Ждем ответа

    Сервер просто возвращает строку:

    Echo "Пример 1 - передача завершилась успешно";

    Пример 2

    Передаем пользовательские данные PHP скрипту.

    $.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

    Сервер возвращает строку со вставленными в нее переданными данными:

    Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

    Пример 3

    Передача и выполнение кода JavaScript

    $.ajax({ dataType: "script", url: "response.php?action=sample3", })

    Сервер выполняет код:

    Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

    Пример 4

    Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

    $.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

    Сервер должен возвращать XML код:

    Header ("Content-Type: application/xml; charset=UTF-8"); echo