Ajax означает «Асинхронный JavaScript и XML» и относится к технологии веб-разработки для создания интерактивных веб-приложений. Технология Ajax — это совокупность всех технологий, доступных в настоящее время в браузерах посредством сценариев JavaScript. Ajax использует все эти технологии по-новому, возрождая старый стиль веб-разработки B/S.
Среди технологий Ajax основной технологией является XMLHttpRequest. Ее первоначальное название — XMLHTTP. Впервые она была запущена Microsoft в браузере IE5.0 в 1999 году для удовлетворения потребностей разработчиков. Позже эта технология получила название XMLHttpRequest в приведенной выше спецификации. Именно это делает технологию Ajax уникальной. Короче говоря, XMLHttpRequest предоставляет сценарии JavaScript, выполняемые в браузере, для связи с сервером внутри страницы. JavaScript на странице может получать данные с сервера или отправлять данные на сервер без обновления страницы. Появление XMLHttpRequest открывает новые возможности для веб-разработки и даже полностью меняет представление людей о том, из чего состоят веб-приложения. Это позволяет нам заниматься веб-разработкой совершенно по-новому и предоставлять пользователям лучший интерактивный опыт.
В отличие от традиционной веб-разработки, Ajax не рассматривает веб-приложения в виде статических страниц. С точки зрения Ajax веб-приложение должно состоять из небольшого количества страниц, каждая из которых на самом деле является меньшим Ajax-приложением. Каждая страница включает в себя некоторые компоненты Ajax, разработанные с использованием JavaScript. Эти компоненты используют объект XMLHttpRequest для асинхронной связи с сервером. После получения необходимых данных с сервера они используют DOM API для обновления части контента на странице. Таким образом, существует три основных различия между приложениями Ajax и традиционными веб-приложениями:
1. Общайтесь с сервером внутри страницы, не обновляя всю страницу.
2. Используйте асинхронный режим для связи с сервером, не прерывая работу пользователя, и получите возможность более быстрого реагирования.
3. Приложение состоит всего из нескольких страниц. Большинство взаимодействий выполняются внутри страницы, и нет необходимости переключать всю страницу.
Видно, что Ajax делает веб-приложения более динамичными, повышает интеллект и предоставляет компонентам пользовательского интерфейса Ajax богатые выразительные возможности. Такой новый тип веб-приложений называется приложением RIA (Rich Internet Application).
На лицевой стороне приведена некоторая информация о внедрении AJAX, которую я нашел в Интернете, чтобы помочь читателям, не знакомым с технологией AJAX, как можно скорее понять ее. Далее я познакомлю вас с некоторыми технологиями и методами AJAX, которые я использовал. реальный процесс разработки.
Самое важное при использовании технологии AJAX — создать объект XMLHttpRequest. В Интернете много информации о том, как создать этот объект. Один из моих наиболее часто используемых методов.
функция createXMLHttpRequest() {
вар xmlhttp;
пытаться {
xmlhttp = новый ActiveXObject('Msxml2.XMLHTTP');
} поймать(е) {
пытаться {
xmlhttp = новый ActiveXObject('Microsoft.XMLHTTP');
} поймать(е) {
пытаться {
xmlhttp = новый XMLHttpRequest();
} поймать(е) {
alert("Не удалось создать объект XMLHttpRequest!");
}
}
}
вернуть xmlhttp;
}
Ниже я перечислю несколько примеров и некоторые вещи, которым можно научиться на этих примерах.
Следующий фрагмент кода является примером того, как я проверяю, существует ли элемент в базе данных при добавлении определенного элемента.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
функция do_verify() {
вар сегмент10 = document.mainFrm.segment10.value;
вар InventoryItemId = document.mainFrm.inventoryItemId.value;
// оповещение(сегмент10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + сегмент10 + "&inventoryItemId=" + InventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //Есть также два метода передачи данных: GET и POST, но когда метод POST, необходимо написать следующее предложение
xmlHttp.setRequestHeader('Тип контента', 'application/x-www-form-urlencoded');
xmlHttp.send (нуль);
}
функция handleReadyStateChange() {
если (xmlHttp.readyState == 4) {
если (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("флаг").style.display = "блок"
document.mainFrm.segment10.focus();
} еще {
document.mainFrm.isExist.value = 'N';
document.getElementById("флаг").style.display = "нет"
}
} еще {
оповещение (xmlHttp.status);
}
}
}
Фоновый код:
boolean Success = itemDAO.doVerifyItem(); //doVerifyItem — основной метод проверки существования указанного элемента в базе данных. Если элемент уже существует, этот метод вернет TRUE.
PrintWriter out = res.getWriter();
если (успех) {
out.print("Y");
}
out.flush();
выход.закрыть();
}