Давайте продемонстрируем это на типичном примере проверки входа.
Вообще говоря, использование объекта XMLHttpRequest для проверки входа требует следующих шагов:
1. Используйте метод DOM, чтобы получить значение в поле ввода.
Скопируйте код кода следующим образом:
var userName = document.getElementById("userName").value;
2. Создайте объект XMLHttpRequest. Этот шаг более сложен. Основная причина — учитывать проблемы совместимости браузера.
Скопируйте код кода следующим образом:
если (window.XMLHttpRequest) {
//Для FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = новый XMLHttpRequest();
//Исправление ошибок в некоторых конкретных версиях браузера Mozillar
если (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("текст/xml");
}
} Еще если (window.ActiveXObject) {
//Для IE6, IE5.5, IE5
//Два имени элемента управления, которые можно использовать для создания объектов XMLHTTPRequest, хранящихся в массиве js
//Версия, занимающая первое место, новее
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i <activexName.length; i++) {
пытаться{
//Удаляем имя элемента управления и создаем его. Если создание прошло успешно, завершаем цикл.
//Если создание не удалось, будет выброшено исключение, и тогда цикл сможет продолжить попытку создания
xmlhttp = новый ActiveXObject(activexName[i]);
перерыв;
} поймать(е){
}
}
}
3. Зарегистрируйте функцию обратного вызова объекта XMLHttpRequest. При регистрации функции обратного вызова необходимо указать имя функции и не добавлять круглые скобки.
Скопируйте код кода следующим образом:
//При регистрации функции обратного вызова необходимо указать имя функции, скобки не добавлять
//Нам нужно зарегистрировать имя функции. Если мы добавим круглые скобки, будет зарегистрировано возвращаемое значение функции. Это неправильно.
xmlhttp.onreadystatechange = обратный вызов;
4. Установите (GET) информацию о соединении.
Скопируйте код кода следующим образом:
//Первый параметр указывает метод http-запроса, поддерживает все методы http-запроса, в основном использует get и post
//Второй параметр представляет URL-адрес запроса, и параметры, запрошенные методом get, также находятся в URL-адресе.
//Третий параметр указывает, использовать ли асинхронное или синхронное взаимодействие, true указывает асинхронное
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
5. Отправить запрос
Скопируйте код кода следующим образом:
xmlhttp.send(ноль);
6. (POST), вам необходимо самостоятельно установить заголовок HTTP-запроса, и поскольку его необходимо закодировать, вы не можете напрямую отправлять данные во втором параметре XHR.open. Вместо этого вам следует использовать метод send(). чтобы отправить данные.
Скопируйте код кода следующим образом:
//Код для POST-запроса
//xmlhttp.open("POST","AJAXServer",true);
//Метод POST требует, чтобы вы самостоятельно установили заголовок http-запроса
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Отправляем данные в режиме POST
xmlhttp.send("name=" + имя_пользователя);
Функция обратного вызова:
Скопируйте код кода следующим образом:
//функция обратного вызова
обратный вызов функции() {
//оповещение(xmlhttp.readyState);
//5. Получить данные ответа
//Определяем, является ли статус объекта интерактивным завершением
если (xmlhttp.readyState == 4) {
//Определяем, успешно ли HTTP-взаимодействие
если (xmlhttp.status == 200) {
//Получаем данные, возвращаемые сервером лаковых изделий
//Получаем текстовые данные, выводимые сегментом сервера
вар responseText = xmlhttp.responseText;
//Отображение данных на странице
//Находим узел элемента, соответствующий тегу div, через dom
var divNode = document.getElementById("результат");
//Устанавливаем html-содержимое в узле элемента
divNode.innerHTML = текст ответа;
} еще {
alert("Произошла ошибка!!!");
}
}
}