Ajax с помощью jquery. руководство для начинающих. часть 2

Как создать или вставить данные с помощью jQuery AJAX?

5.1 Обработчик нажатия кнопки «Создать товар»

Откройте в папке products файл create-product.js

Следующий код будет обрабатывать нажатие кнопки. Эта кнопка должна иметь класс create-product-button.

5.2 Получение списка категорий из API

Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.

Замените // здесь будет вызов API категорий следующим кодом.

5.3 Создание кнопки выбора категории

Здесь мы создадим тег select с опцией «Categories».

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

5.4 Добавление кнопки «Все товары»

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.

Поместите следующий код после кода предыдущего раздела.

5.5 Создание HTML-формы «Создание товара»

Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.

Поместите следующий код после кода предыдущего раздела.

5.6 Показать форму «Создание товара» и изменить заголовок страницы

Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице. Также изменим заголовок страницы.

Добавьте следующий код после кода предыдущего раздела.

5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер

Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.

Замените комментарий // здесь будет обработчик «создать форму товара» следующим кодом.

jQuery $.post() Method

The method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the
request.

The optional callback parameter is the name of a function to be executed
if the request succeeds.

The following example uses the method to send some data along with the
request:

Example

$(«button»).click(function(){
  $.post(«demo_test_post.asp»,
  {
    name: «Donald Duck»,
    city: «Duckburg»
  },
  function(data, status){
    alert(«Data: » + data + «\nStatus: » + status);
  });
});

The first parameter of is the URL we wish to request («demo_test_post.asp»).

Then we pass in some data to send along with the request (name and city).

The ASP script in «demo_test_post.asp» reads the parameters,
processes them, and returns a result.

The third
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.

Tip: Here is how the ASP file looks like («demo_test_post.asp»):

<%
dim fname,city
fname=Request.Form(«name»)
city=Request.Form(«city»)
Response.Write(«Dear » & fname & «. «)
Response.Write(«Hope you live well in » & city & «.»)
%>

XMLHttpRequest API и его возможности

Хотя помимо XHR существуют и другие подходы для получения данных с сервера, именно XHR остается «ядром» большинства AJAX-приложений. Взаимодействие на основе XHR строится на двух компонентах: запрос и ответ. Ниже будут рассмотрены обе эти составляющие.

Модель безопасности

Как уже говорилось, исходный объект обладает четкой моделью безопасности. Политика «same-origin» (объекты, происходящие из одного места) позволяет взаимодействовать только с тем хостом, протоколом и портом, которые использовались запрошенной страницей. Это означает, что общение между различными доменами (example.com и example2.com), различными хостами (my.example.com и www.example.com) и различными протоколами (http://example.com и https://example.com) запрещено и приводит к возникновению ошибки.

Однако благодаря разработке консорциумом W3C второй версии XHR-объекта и нового протокола Cross-origin Request Protocol и реализации этих концепций в большинстве Web-браузеров, включая InternetExplorer 8+, Mozilla Firefox 3.5+, Apple Safari 4+ и Google Chrome, появилась возможность выполнять запросы между доменами. Хотя для этого и потребовалось время, но теперь, указав в запросе специальный заголовок :

Origin: http://example.com

и настроив сервер отправлять обратно соответствующий заголовок :

				Access-Control-Allow-Origin: :
				http://example.com

стало возможным осуществлять дуплексное взаимодействие между доменами с помощью XHR-объектов.

Запрос (request)

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

  • – открывает подключение к серверу и принимает несколько аргументов:
    • — используемый HTTP-метод (допускается или )
    • — запрошенный URL-адрес.
    • — необязательный -параметр, сигнализирующий о том является ли запрос асинхронным или нет (по умолчанию равен ).
    • – необязательный параметр, содержащий имя пользователя для аутентификации.
    • – необязательный параметр, содержащий пароль, используемый для аутентификации.
  • – устанавливает заголовки запроса и принимает два аргумента: (имя заголовка) и (значение заголовка).
  • – отправляет запрос и может принимать необязательный параметр, содержащий тело -запроса.
  • – прерывает отправку запроса.

Ответ (response)

Объект также обладает определенными атрибутами и методами:

  • – стандартный HTTP-статус запроса (например, в случае успешного выполнения запроса будет возвращено значение ).
  • – строка, содержащая полное описание статуса, возвращенного Web-сервером (например, ).
  • – возвращает значение определенного заголовка ответа; в качестве параметра принимает имя запрашиваемого заголовка.
  • – возвращает текстовое содержание всех заголовков ответа.
  • – атрибут, в котором хранится текстовое представление тела запроса.
  • – атрибут, содержащий XML-представление тела запроса – фрагмент документа с DOM и всеми соответствующими методами.

Состояние readyState

После создания объект может находиться в одном из пяти состояний, перечисленных ниже:

  • 0: UNSENT – объект только что был создан.
  • 1: OPENED – был успешно вызван метод данного объекта.
  • 2: HEADERS_RECEIVED – заголовки ответа были успешно загружены.
  • 3: LOADING – тело ответа загружается.
  • 4: DONE – запрос был выполнен, но неизвестно – успешно или нет (информацию о результате выполнения запроса можно получить с помощью стандартных статусов и заголовков HTTP-ответа).

Как прочитать данные в формате JSON с помощью jQuery

4.1 Показать товары на странице при загрузке

В папке products откройте файл read-products.js

Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.

Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.

4.2 Показать товары при клике на кнопку

Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.

Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.

Поместите следующий код под showProducts(); предыдущего раздела.

4.3 Создание функции showProducts()

Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.

4.4 Получение списка товаров

Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.5 Создание кнопки «Добавить товар»

Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.6 Создание HTML-таблицы

Мы должны начать строить HTML-таблицу, в которой появится список продуктов.

Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.

4.7 Построение строки таблицы для каждой записи

Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.

Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».

Замените комментарий // здесь будут строки следующим кодом.

4.8 Вставка контента на страницу

Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.

Поместите следующий код после закрывающего тега table

4.9 Изменение заголовка страницы

Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.

Поместите следующий код после кода предыдущего раздела.

AJAX Example Explained

HTML Page

<!DOCTYPE html><html>
<body>
<div id=»demo»>  <h2>Let AJAX change this text</h2> 
<button type=»button» onclick=»loadDoc()»>Change Content</button>
</div>
</body>
</html>

The HTML page contains a <div> section and a <button>.

The <div>
section is used to display information from a server.

The <button> calls a function (if it is clicked).

The function requests data from a web
server and displays it:

Function loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {   
if (this.readyState == 4 && this.status == 200) {    
document.getElementById(«demo»).innerHTML = this.responseText;   
}  };  xhttp.open(«GET», «ajax_info.txt», true); 
xhttp.send();
}

«ajax_info.txt» looks like this:

<h1>AJAX</h1><p>AJAX is not a programming language.</p><p>AJAX is a
technique for accessing web servers from a web page.</p><p>AJAX stands for
Asynchronous JavaScript And XML.</p>

Файл ASP — «gethint.asp»

Файл ASP проверяет массив имен и возвращает браузеру соответствующее имя (имена):

<%
response.expires=-1
dim a(30)
‘Fill up array with names
a(1)=»Anna»
a(2)=»Brittany»
a(3)=»Cinderella»
a(4)=»Diana»
a(5)=»Eva»
a(6)=»Fiona»
a(7)=»Gunda»
a(8)=»Hege»
a(9)=»Inga»
a(10)=»Johanna»
a(11)=»Kitty»
a(12)=»Linda»
a(13)=»Nina»
a(14)=»Ophelia»
a(15)=»Petunia»
a(16)=»Amanda»
a(17)=»Raquel»
a(18)=»Cindy»
a(19)=»Doris»
a(20)=»Eve»
a(21)=»Evita»
a(22)=»Sunniva»
a(23)=»Tove»
a(24)=»Unni»
a(25)=»Violet»
a(26)=»Liza»
a(27)=»Elizabeth»
a(28)=»Ellen»
a(29)=»Wenche»
a(30)=»Vicky»
‘get the q parameter from URL
q=ucase(request.querystring(«q»))
‘lookup all hints from array if length of q>0
if len(q)>0 then
 
hint=»»
 
for i=1 to 30
   
if q=ucase(mid(a(i),1,len(q))) then
     
if hint=»» then
       
hint=a(i)
     
else
       
hint=hint & » , » & a(i)
     
end if
   
end if
 
next
end if
‘Output «no suggestion» if no hint were found
‘or output the correct values
if hint=»» then
 
response.write(«no suggestion»)
else
 
response.write(hint)
end if
%>

Example Explained

In the example above, when a user types a character in the input field, a function
called is executed.

The function is triggered by the event.

Here is the HTML code:

Example

<html><body><p><b>Start typing a name in the input field below:</b></p><p>Suggestions: <span id=»txtHint»></span></p><form> First name: <input type=»text» onkeyup=»showHint(this.value)»></form><script>function showHint(str) {  if (str.length == 0) {     document.getElementById(«txtHint»).innerHTML = «»;    return;
  } else {    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {      if (this.readyState == 4 && this.status == 200) {        document.getElementById(«txtHint»).innerHTML = this.responseText;
      }    };    xmlhttp.open(«GET», «gethint.php?q=» + str, true);
    xmlhttp.send();  }}</script>
</body></html>

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the
content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a PHP file (gethint.php) on the server
  • Notice that q parameter is added gethint.php?q=»+str
  • The str variable holds the content of the input field

Объяснение примера

В приведенном выше примере, когда пользователь вводит символ в поле ввода, выполняется вызываемая функция .

Функция запускается событием.

Вот HTML код:

Пример

<html><body><p><b> Начните вводить имя в поле ввода ниже:</b></p><p> Предложения: <span id=»txtHint»></span></p><form> Имя: <input type=»text» onkeyup=»showHint(this.value)»></form><script>function showHint(str) {  if (str.length == 0) {     document.getElementById(«txtHint»).innerHTML = «»;    return;
  } else {    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {      if (this.readyState == 4 && this.status == 200) {        document.getElementById(«txtHint»).innerHTML = this.responseText;
      }    };    xmlhttp.open(«GET», «gethint.php?q=» + str, true);
    xmlhttp.send();  }}</script>
</body></html>

Объяснение кода:

Сначала проверьте, пусто ли поле ввода (str.length == 0). Если это так, очистите содержимое заполнителя txtHint и выйдите из функции.

Однако, если поле ввода не пустое, сделайте следующее:

Создать объект XMLHttpRequest
Создайте функцию, которая будет выполняться, когда будет готов ответ сервера
Отправьте запрос в файл PHP (gethint.php) на сервере
Обратите внимание, что добавлен параметр gethint.php?q=»+str
Переменная str содержит содержимое поля ввода

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR
Свойство/метод Описание
readyState Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status Возвращает код состояния HTTP, отправленный сервером
statusText Возвращает текстовое описание кода состояния
responseXML Возвращает ответ в виде XML (если он является XML-документом)
responseText Возвращает ответ в виде строки
setRequest(имя, значение) Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders() Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя) Возвращает значение указанного заголовка ответа
abort() Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс

Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

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

Использование JavaScript/jQuery

Последнее обновление: 31.10.2015

Современные веб-приложения практически невозможно представить без языка клиентской части — JavaScript. Даже при использовании таких серверных
языков и технологий, как PHP, ASP.NET, трудно обойтись без JavaScript. Однако чистый JavaScript в реальности используется все меньше.
Ему на смену приходят специальные библиотеки, в частности jQuery. Применительно к ASP.NET MVC при создании веб-приложений библиотеки jQuery играют очень большую роль.

Подключение файлов JavaScript/jQuery

По умолчанию все проекты, кроме проектов по шаблону Empty, уже содержат необходимый набор скриптов, в том числе библиотеки jQuery:

Как вы видите, большинство скриптов имеют свои двойники с суффиксом min, например, jquery-1.7.1.js и jquery-1.7.1.min.js.
Оба скрипта представляют одну и ту же функциональность. Но вторая версия представляет минимизированную версию (поэтому и идет с суффиксом min).
Зачем она нужна? Минимизированные скрипты гораздо меньше по объему (иногда даже на 60-70%), поэтому их предпочтительнее использовать в реальных
приложениях, так как пользователь тратит меньше времени и трафика на их загрузку. В то же время их не очень удобно читать. Поэтому для
большего удобства разработчиков полные и минимизированные скрипты идут вместе.

Вкратце посмотрим, зачем нужны большинство скриптов, идущих по умолчанию:

  • jquery-1.7.1.js — базовая библиотека jQuery, на которую опираются большинство других скриптов. В данном случае используется
    версия 1.7.1. Однако библиотека постоянно обновляется, поэтому можно использовать более новые версии.

  • jquery-ui-1.8.20.js — библиотека jQuery UI, которая включает различные виджеты, предназначенные для создания пользовательского интерфейса

  • jquery.unobtrusive-ajax.js — представляет функциональность для ненавязчивого JavaScript

  • jquery.validate.js — представляет функционал для валидации на стороне клиента

  • jquery.validate.unobtrusive.js — предоставляет поддержку ненавязчивой валидации

  • jquery-1.7.1-vsdoc.js и jquery.validate-vsdoc.js — используются для поддержки документации и IntelliSense
    по соответствующим библиотекам в Visual Studio

Чтобы подключить файл javascript используется метод класса :

Этот метод принимает в качестве параметра строку — полный путь к скрипту.

Либо мы можем использовать, например, хелпер :

Если файлы javascript будут использоваться большинством представлений приложения, то удобнее всего добавить их сразу на мастер-страницу.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
	@Scripts.Render("~/scripts/jquery-1.7.1.js")
    @Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

НазадВперед

Axios.js примеры:

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

Сначала сделаем не большую PHP программу.

PHP

1
2
3
4

if($_GET»req»){

header(‘Content-Type: application/json’);

printjson_encode(array(‘data’=>rand(,10)));

}

Тут всё просто, но если что то не понятно, то посмотрите наш учебник по PHP.

Теперь перейдём к самому коду на JavaScript.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13

// Получаем элемент кнопки

let btn=document.getElementById(«btn»);

// Получение элемента для вывода результата

let resElement=document.getElementById(«res»)

 
// Отслеживание события мыши

btn.addEventListener(«click»,()=>{

// Отправка GET запроса

axios.get(«/ajax.php?req=true»).then(res=>{

// Вывод на экран ответа сервера

resElement.innerHTML=res.data.data;

})

})

Как видите код очень простой, в начале мы берём элементы кнопки и блока в который будем выводить ответ сервера.

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

Всё хорошо работает.

Использование вспомогательных методов для работы с конкретными типами данных

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

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:. Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать

Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

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

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

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

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

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Запрос XML-файла и обработка ответа

Теперь, когда мы рассмотрели основные различия между традиционными запросами JavaScript и запросами Ajax jQuery, можно пойти дальше и запросить реальный файл XML.
Запрашиваемый XML-файл – он показан в листинге 4 – включает в себя элементы , и , которые соответствуют этой статье и используются для визуализации простой HTML-страницы с заголовком, описанием и гиперссылкой на .

Листинг 4.
Пример XML-файла для Ajax-запроса с применением jQuery
<?xml version="1.0" encoding="UTF-8"?>
<content>
     <header>Improving Ajax Development with jQuery</header>
     <description>It's no surprise that Ajax is a great way to enhance a web 
     application. However, sometimes the code that needs to be written can take more 
     time than traditional development techniques, especially when you're interacting 
     with dynamic server-side data sets. Luckily, with the introduction of jQuery there's 
     now a quicker and more robust way to write JavaScript and Ajax. The suite of Ajax 
     functionality available through jQuery makes Ajax development much easier than the 
     past by allowing you to write less code and by lending additional methods and event 
     handlers to cover any situation. The amount of code that needs to be written with 
     jQuery is very minimal, even when developing complex functionality, so development 
     is a lot faster. With these tools Ajax is becoming a more viable option when 
     developing a website or application, even on a tight deadline.</description>
     <sourceUrl>
     http://articles.studiosedition.com/ibm/improving_ajax/ImprovingAjaxDevWithJQuery.zip
     </sourceUrl>
</content>

Первое, что нужно сделать, чтобы запросить и разобрать этот XML-файл, – это внедрение библиотеки jQuery.
В идеале нужно включить в свой специальный код отдельный файл JavaScript, но для целей данной статьи код JavaScript содержится в примере HTML.
Чтобы все элементы страницы полностью загрузились и были доступны для языка JavaScript, сделаем запрос Ajax тогда, когда страница будет полностью загружена.
В jQuery есть простое событие , которое можно использовать для этой функции:
применим его к объекту document.
При запуске события вызывается соответствующая функция, и можно приступать к запросу Ajax.
Этот процесс используется во всех примерах из этой статьи, чтобы гарантировать доступность всего, что находится в пределах страницы.

Когда страница готова, можно сформировать Ajax-запрос с помощью jQuery.
Как видно из листинга 5, запрос похож на тот, что мы уже видели, но теперь обрабатываются успешные и ошибочные ответы.

Листинг 5.
Запрос и разбор XML-файла с помощью Ajax и jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Improving Ajax Development with jQuery</title>
     <script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
     </script>
     <script type="text/javascript">
     $(document).ready(function(){
     $.ajax({
          url: 'data/content.xml',
          success: function(xml) {
          var header = description = sourceUrl = '';
          var content = xml.getElementsByTagName('content');
          for(var i=0; i<content.length; i++) {
               for(var j=0; j<content.childNodes.length; j++) {
                    switch(content.childNodes.nodeName) {
                    case 'header':
                         header = content.childNodes.firstChild.data;
                         break;
                    case 'description':
                         description = content.childNodes.firstChild.data;
                         break;
                    case 'sourceUrl':
                         sourceUrl = content.childNodes.firstChild.data;
                         break;
                    default:
                         //
                    }
               }
          }
     $("body").append('<h1>'+header+'</h1>');
     $("body").append('<p>'+description+'</p>');
     $("body").append('<a href="'+sourceUrl+'">Download the source</a>');
     },
     error: function(xhr, status, err) {

         // Обработка ошибок
     }
     });
     });
     </script>
</head>

<body>
</body>
</html>

Событие получает три аргумента: , и .
Единственный параметр, который используются в этой статье ― .
В примере он назван , чтобы было легко определить, что в качестве ответа возвращаются XML-данные.
По файлу XML мы знаем, что можно ожидать , и , поэтому пройдемся по параметрам в файле и присвоим эти значения соответствующим переменным.
Когда все переменные получили значения, можно обработать данные как HTML, добавив каждый элемент к телу HTML-страницы и применив базовое форматирование.
Если запрос оказался неудачным, будет запущено событие , которое представлено тремя аргументами:
, и .
Параметр должен быть фактическим объектом; – это строка, которая описывает тип ошибки, а параметр – это необязательный объект исключения.

jQuery $.get() Method

The method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

The required URL parameter specifies the URL you wish to request.

The optional callback parameter is the name of a function to be executed
if the request succeeds.

The following example uses the method to retrieve data from a file on
the server:

Example

$(«button»).click(function(){
  $.get(«demo_test.asp», function(data, status){
    alert(«Data: » + data + «\nStatus: » + status);
  });
});

The first parameter of is the URL we wish to request («demo_test.asp»).

The second
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.

Tip: Here is how the ASP file looks like («demo_test.asp»):

<%
response.write(«This is some text from an external ASP file.»)
%>

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий