Ajax (asynchronousjavascriptandxml) асинхронный javascript и xml.
Он призван устранить недостатки модели «отправить запрос-ожидать ответа» в традиционных веб-приложениях (после отправки запроса браузер может только ждать ответа сервера. Пользователь не может выполнять другие операции. После того, как браузер отправит запрос. запрос, отбросит всю страницу и будет ждать, пока сервер вернет новую page, то есть объем данных, взаимодействующих между браузером и сервером, очень велик, и данные невозможно получить по требованию). Суть этой технологии такова: асинхронно через встроенный в браузер объект (XmlHttpRequest). Отправьте запрос на сервер.
Так называемый асинхронный означает, что браузер не отказывается от всей страницы, то есть не отправляет данные на сервер через отправку формы. После того, как сервер обработает запрос, он возвращает данные объекту XmlHttpRequest и данные. в XmlHttpRequest можно получить через javascript. Затем используйте эти данные для обновления страницы. В течение всего процесса пользователю не нужно ждать ответа от сервера.
Описание: Технология асинхронной передачи веб-страниц. Способ связи с сервером без обновления всей страницы. В ожидании передачи веб-страницы пользователь все равно может взаимодействовать с системой, и страница может обновлять содержимое без обновления. Разумное использование может позволить пользователям чувствовать себя лучше и удобнее, но не злоупотребляйте этим.
Синхронный и асинхронный
Синхронизация относится к методу связи, при котором отправитель отправляет данные и ждет, пока получатель отправит ответ, прежде чем отправлять следующий пакет данных.
Например, синхронизация: отправить запрос -> дождаться обработки сервера -> вернуться после обработки. В течение этого периода клиентский браузер не может ничего делать. Асинхронный означает: после того, как отправитель отправит данные, он не ждет, пока получатель отправит обратно. ответ, а затем отправляет следующий пакет данных методом связи.
Например, асинхронный: запрос запускается событием -> обрабатывается сервером (браузер в это время все еще может делать другие вещи) -> обрабатывается.
Важный объект AjaxXMLHttpRequest.
Важный объект Javascript, через который можно отправлять запросы к серверу. Если необходимо выполнить несколько запросов, требуется несколько объектов XHR. Результат запроса обрабатывается предопределенным методом.
Как создать объект XmlHttpRequest
функция getXmlHttpRequest(){
вар xmlHttpRequest = null;
if ((typeof XMLHttpRequest) != 'не определено') {
//не-ie браузер
xmlHttpRequest = новый XMLHttpRequest();
}еще {
//то есть браузер
xmlHttpRequest = новый ActiveXObject('Microsoft.XMLHttp');
}
вернуть xmlHttpRequest;
}
или
функция createXmlHttpRequest(){
вар xmlHttpRequest = null;
если (window.ActiveXObject) {
xmlHttpRequest = новый AvtiveXObject("Microsoft.XMLHTTP");
}иначе если(window.XMLHttpRequest){
xmlHttpRequest = новый XMLHttpRequest();
}
}
Важные свойства объекта xmlHttpRequest.
responseXml: получить XML-данные ответа сервера.
статус: Получите код состояния, возвращаемый сервером (например, 200).
ReadyState: Получите статус связи между xmlHttpRequest и сервером (0, 1, 2, 3, 4, соответственно, описывающие различные состояния).
(Неинициализированный): объект создан, но не инициализирован (открытый метод еще не вызван).
(Инициализация): объект создан, а метод отправки еще не вызван.
(Отправить данные): метод отправки был вызван, но текущий статус и заголовок http неизвестны.
(Идет передача данных): Частичные данные приняты.
(Конец ответа): на этом этапе данные можно получить через responseText/responseXml.
Пример приложения, реализованный человеком с помощью Ajax
Скриншот системы
Описание системы:
Схема структуры системы
Отображение главной страницы Register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<голова>
<title>Регистрация пользователя</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</голова>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<table bordercolor="gray" cellpadding="6" align="center">
<тр>
<td colspan="2">
>> <font color="red">Регистрация пользователя</font>
<font color="gray">[Описание модуля: проверка имени пользователя, условия обслуживания, использование асинхронной обработки Ajax, генерация сервера кода проверки]</font>
</td>
</tr>
<тр>
<td align="right">
имя пользователя:
</td>
<тд>
<input type="text" name="username" id="username" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * Имя пользователя состоит из букв, цифр и символов подчеркивания.</span>
</td>
</tr>
<тр>
<td align="right">
пароль:
</td>
<тд>
<input type="password" name="password" id="password">
<span style="color:orange" id="pwdMsg" > * Длина пароля составляет 6–8 символов. В целях безопасности следует избегать использования уникальных форматов.</span>
</td>
</tr>
<тр>
<td align="right">
Подтвердите пароль:
</td>
<тд>
<input type="password" name="repassword" id="repassword">
<span style="color:orange" id="repwdMsg" > * Подтвердите пароль, чтобы убедиться, что вы не ошиблись при установке пароля</span>
</td>
</tr>
<тр>
<td align="right">
Почта:
</td>
<тд>
<input type="text" id="email" name="email">
<span style="color:orange" id="emailMsg" > * Введите свой обычный адрес электронной почты, чтобы мы могли связаться с вами.</span>
</td>
</tr>
<тр>
<td align="right">
Проверочный код:
</td>
<тд>
<input type="text" id="checkcode">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- Код проверки-->
<a href="javascript:;" onclick="getCheckcode()">Не вижу ясно, измените другой</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<тр>
<td align="right">
Условия обслуживания:
</td>
<тд>
<textarea rows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<тр>
<td align="right">
</td>
<тд>
<input type="submit" value="Согласитесь с условиями и зарегистрируйтесь"/>
</td>
</tr>
</таблица>
<div align="center">
Авторские права (c) 2013 Су Руонян ( <a href="mailto:[email protected]">Свяжитесь с нами:[email protected]</a>)
корпорация. Все права защищены.
</div>
</форма>
</тело>
</html>
/*
Создайте метод для получения объекта xmlHttpRequest.
*/
функция getXmlHttpRequest(){
вар xmlHttpRequest = null;
if((typeof XMLHttpRequest) != 'не определено'){
/*Браузеры, отличные от IE, создают объекты XMLHttpRequest*/
xmlHttpRequest = новый XMLHttpRequest();
}еще{
/*IE-браузер создает объект XMLHttpRequest*/
xmlHttpRequest = новый ActiveXObject('Microsoft.XMLHttp');
}
вернуть xmlHttpRequest;
}
/*
Событие ответа кода подтверждения
*/
функция getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
вар URL = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
Использование Ajax для получения условий обслуживания
*/
функция getRegistRuleTxt(){
var item = document.getElementById("item");
вар URL = "rulesText.do";
//Решаем проблему с китайской кодировкой при отправке в режиме получения. Используйте encodeURI(url).true, чтобы указать, что запрос отправляется асинхронно, а addTimestamp(url) предотвращает кеширование браузером.
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=функция(){
если (xmlHttpRequest.readyState == 4) {
если (xmlHttpRequest.status == 200) {
вар respText = xmlHttpRequest.responseText;
item.value=respText;
}еще{
//Системная ошибка.
item.value="системная ошибка";
}
}еще{
//Проверка дисплея...
item.value="загрузка...";
}
};
xmlHttpRequest.send(ноль);
}
/*
Используйте метод get для проверки
*/
функция getValidate(){
var имя пользователя = document.getElementById("имя пользователя");
var url = "validatename.do?username=" + username.value;
//Решаем проблему с китайской кодировкой при отправке в режиме получения. Используйте encodeURI(url).true, чтобы указать, что запрос отправляется асинхронно, а addTimestamp(url) предотвращает кеширование браузером.
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
//Вызов метода, чтобы проверить статус возврата
xmlHttpRequest.onreadystatechange=обратный вызов;
xmlHttpRequest.send(ноль);
}
/*
Используйте метод post для проверки
*/
функция postValidate(){
var имя пользователя = document.getElementById("имя пользователя");
вар URL = "validatename.do";
//true означает использование асинхронного метода для отправки запроса. Значение по умолчанию — true, а метод запроса может быть get, post, put, delete.
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=обратный вызов;
//Если имеется несколько параметров, используйте символ & для связи пар ключ-значение, а escape используется для решения китайских проблем
xmlHttpRequest.send('username=' + escape(username.value));
}
/*
Метод возврата статуса мониторинга
*/
обратный вызов функции(){
если (xmlHttpRequest.readyState == 4) {
если (xmlHttpRequest.status == 200) {
вар respText = xmlHttpRequest.responseText;
InnerHtmlMsg (respText);
}еще{
//Системная ошибка.
InnerHtmlMsg("ошибка");
}
}еще{
//Проверка дисплея...
InnerHtmlMsg("проверка");
}
}
/*
Добавьте временную метку, чтобы предотвратить кеширование браузера. Кэширование браузера кэширует только метод get.
*/
функция addTimestamp(url){
if(url.indexOf("?")!=-1){
//Если есть параметры
вернуть URL+"×tamp=" + new Date().valueOf();
}еще{
//нет параметров
return url+"?timestamp=" + new Date().valueOf();
}
}
функция InternalHtmlMsg (сообщение) {
var checkMsg = document.getElementById("checkMsg");
если(сообщение=='существует'){
//Имя пользователя существует
checkMsg.innerHTML="<font color='red'>* Извините, имя пользователя уже существует.</font>";
}
если (сообщение == 'не существует') {
//Имя пользователя можно использовать
checkMsg.innerHTML= "<font color='green'>* Поздравляем, имя пользователя доступно.</font>";
}
если(сообщение=='проверка'){
//Проверка системы
checkMsg.innerHTML= "<font color='#0099aa'>* Система проверяет данные...</font>";
}
если(сообщение=='ошибка'){
//Системная ошибка
checkMsg.innerHTML="<font color='red'>Системный сбой, проверьте сеть или <a href='#'>Свяжитесь с нами</a></font>";
}
}
} /* Определить общую ширину и стиль границ таблицы, а также определить стиль всего текста в таблице */
.левый{
вес шрифта: 500;
цвет: #708899;
отступ справа: 20 пикселей;
цвет фона: #D6ECF5;
}
.inpt {
граница: сплошная #92CEDB 1 пиксель;
ширина: 210 пикселей;
высота: 22 пикселей;
поле слева: 10 пикселей;
}
.rghts{
поле-верх: 20 пикселей;
цвет: #708899;
размер шрифта: 12 пикселей;
}
<сервлет>
<имя-сервлета>Пользовательскийсервлет</имя-сервлета>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<инициализирующий-параметр>
<имя-параметра>путь к файлу правил</имя-параметра>
<param-value>/txt/item.txt</param-value>
</инит-парам>
</сервлет>
<сопоставление сервлетов>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</сервлет-сопоставление>
<список-приветственных-файлов>
<приветственный-файл>regist.jsp</приветственный-файл>
</приветственный-список-файлов>
</веб-приложение>
импортировать java.awt.Color;
импортировать java.awt.Font;
импортировать java.awt.Graphics;
импортировать java.awt.image.BufferedImage;
импортировать java.util.HashMap;
импортировать java.util.Map;
импортировать java.util.Random;
/**
*
* @версия: 1.1
*
* @author: Су Руонян<a href="mailto:[email protected]">Отправить письмо</a>
*
* @since: 1.0 Время создания: 20 января 2013 г., 16:26:52.
*
* @function: TODO
*
*/
общественный класс CheckCodeImageUtil {
Private static Final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
«7», «8», «9», «А», «Б», «С», «D», «Е», «F», «G», «H», «I» };
Private static Final int SIZE = 4 //Количество символов в коде проверки;
Private static Final int LINES = 4 //количество пересекающихся линий;
Private static Final int WIDTH = 110 // Ширина изображения кода проверки;
Private static Final int HEIGHT = 40 //Высота изображения кода проверки;
Private static Final int FONT_SIZE = 21 // Размер шрифта в коде проверки;
/**
* Создать код подтверждения
*
* @return Map<значение проверочного кода, изображение проверочного кода>
*
*/
общедоступная статическая карта<String,BufferedImage> creatCheckImage(){
//Сохраняем строку, генерирующую истинное значение кода проверки
Буфер StringBuffer = новый StringBuffer();
//Пользовательский объект изображения
Изображение BufferedImage = новое BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
Графика Graphics = image.getGraphics();
графики.setColor(Цвет.БЕЛЫЙ);
графики.fillRect(0, 0, ШИРИНА, ВЫСОТА);
Случайный случайный = новый случайный();
//Рисуем случайные символы
for(int i=0; i<SIZE; i++){
//Получаем элемент из определенного набора символов
int rand = random.nextInt(chars.length);
графики.setColor(случайныйцвет());
Graphics.setFont(новый шрифт(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
Graphics.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
uffer.append(chars[rand]); //Сохраняем сгенерированную строку в буфер и используем ее для сравнения со значением, введенным пользователем, когда оно будет получено в будущем.
}
//Рисуем линии пересечения
for(int i=1;i<=LINES;i++){
графики.setColor(случайныйцвет());
графики.drawLine(random.nextInt(ШИРИНА), случайный.nextInt(ВЫСОТА), случайный.nextInt(ШИРИНА),random.nextInt(ВЫСОТА));
если (я == ЛИНИИ) {
Graphics.setFont(новый шрифт(null,Font.ITALIC,13));
графики.setColor(Цвет.СЕРЫЙ);
графики.drawString("Su Ruonian Studio", 5,15);
}
}
map.put(buffer.toString(), изображение);
карта возврата;
}
/**
* Цвет будет сгенерирован немедленно
* @возвращаться
*/
публичный статический цвет randomColor(){
Случайный случайный = новый случайный();
Цвет color = новый цвет(random.nextInt(256),random.nextInt(256),random.nextInt(256));
вернуть цвет;
}
}
импортировать java.awt.image.BufferedImage;
импортировать java.io.BufferedReader;
импортировать java.io.ByteArrayInputStream;
импортировать java.io.ByteArrayOutputStream;
импортировать java.io.File;
импортировать java.io.FileReader;
импортировать java.io.FileWriter;
импортировать java.io.IOException;
импортировать java.io.InputStream;
импортировать java.io.PrintWriter;
импортировать java.util.List;
импортировать java.util.Map;
импортировать java.util.Vector;
импортировать javax.imageio.ImageIO;
импортировать javax.servlet.ServletException;
импортировать javax.servlet.ServletOutputStream;
импортировать javax.servlet.http.HttpServlet;
импортировать javax.servlet.http.HttpServletRequest;
импортировать javax.servlet.http.HttpServletResponse;
импортировать com.sun.image.codec.jpeg.JPEGCodec;
импортировать com.sun.image.codec.jpeg.JPEGImageEncoder;
импортировать com.sun.imageio.plugins.common.ImageUtil;
импортировать com.webapp.util.CheckCodeImageUtil;
публичный класс UserServlet расширяет HttpServlet {
частный список<String> userList;
частная строка txtFilePath = null;
public void init() выдает ServletException {
txtFilePath = this.getInitParameter("rulesfilepath");
//Моделируем базу данных
userList = новый Vector<String>();
userList.add("Чжансан");
userList.add("Лиси");
userList.add("ванву");
userList.add("чжаолиу");
}
public void doGet (запрос HttpServletRequest, ответ HttpServletResponse)
выдает ServletException, IOException {
doPost (запрос, ответ);
}
public void doPost (запрос HttpServletRequest, ответ HttpServletResponse)
выдает ServletException, IOException {
Строка uri = request.getRequestURI();
Строковый путь = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
пытаться {
Thread.sleep(3000);
} catch (InterruptedException e) {
е.printStackTrace();
}
//Система моделирования генерирует тест исключения
/*если(1==2){
выдать новое исключение ServletException («некоторая ошибка»);
}*/
Строка username = request.getParameter("username");
System.out.println("имя пользователя:" + имя пользователя);
//Имитируем запрос пользовательских данных
логическое существование = userList.contains(имя пользователя);
если (существуют) {
response.getWriter().print("существует");
}еще{
response.getWriter().print("noexists");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
Строка filePath = this.getServletContext().getRealPath(txtFilePath);
Файл файл = новый файл (filePath);
Буфер StringBuffer = новый StringBuffer();
пытаться {
Читатель BufferedReader = новый BufferedReader (новый FileReader (файл));
Строка tmp = "";
while((tmp = readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
читатель.закрыть();
} catch (Исключение е) {
е.printStackTrace();
}
if(buffer.toString().trim()!=null){
response.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
response.setContentType("изображение/jpeg");
Map<String, BufferedImage> map = CheckCodeImageUtil.creatCheckImage();
Строковый ключ = (String)map.keySet().iterator().next();
request.getSession().setAttribute("код",ключ);
System.out.println("checkcode = " + request.getSession().getAttribute("код"));
Изображение BufferedImage = map.get(ключ);
ImageIO.write(изображение, "jpeg", response.getOutputStream());
}
}
}