То, о чем я собираюсь говорить, очень простое, поэтому экспертам не следует это читать. Если вы это читаете, пожалуйста, выскажите свое мнение. Новички или люди, которые мало что знают о знаниях низкого уровня, могут прочитать ее, чтобы улучшить свое понимание и память.
Объект XMLHttpRequest — это ядро функции AJAX. Чтобы разработать программу AJAX, необходимо начать с понимания объекта XMLHttpRequest.
Чтобы понять объект XMLHttpRequest, начните с создания объекта XMLHttpRequest. Для создания объектов XMLHttpRequest в разных браузерах используются разные методы:
сначала посмотрите на метод IE, создающий объект XMLHttpRequest (Метод 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //Используем более новую версию IE для создания IE-совместимого объекта (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Используйте старую версию IE для создания IE-совместимого объекта (Microsoft.XMLHTTP)
Mozilla, Opera, Safari и большинство браузеров, отличных от IE, используют следующий метод (метод 2) для создания объектов XMLHttpRequest:
var xmlhttp = new XMLHttpRequest();
Internet Explorer фактически использует объект XMLHttp вместо объекта XMLHttpRequest, который используют Mozilla, Opera, Safari и большинство браузеров сторонних производителей (далее вместе именуемые объектом XMLHttpRequest). IE7 также начал использовать объект XMLHttpRequest.
Если разные браузеры используют неправильные методы при создании объекта XMLHttpRequest, браузер сообщит об ошибке и объект нельзя будет использовать. Итак, нам нужен метод для создания объекта XMLHttpRequest, совместимого с различными браузерами:
Создайте метод объекта XMLHttpRequest, совместимый с несколькими браузерами.
var xmlhttp = false; //Создаем новый запрос переменной и присваиваем ему значение false. Используйте false в качестве условия оценки, что означает, что объект XMLHttpRequest еще не создан.
функция CreateXMLHttp(){
пытаться{
xmlhttp = new XMLHttpRequest(); //Попытаемся создать объект XMLHttpRequest. Браузеры, за исключением IE, поддерживают этот метод.
}
поймать (е) {
пытаться{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Используйте более новую версию IE для создания IE-совместимого объекта (Msxml2.XMLHTTP)
}
поймать (е) {
пытаться{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Используйте старую версию IE для создания IE-совместимого объекта (Microsoft.XMLHTTP).
}
поймать (не удалось) {
xmlhttp = false; //Если это не удалось, убедитесь, что значение запроса по-прежнему ложно.
}
}
}
вернуть xmlhttp;
}
Судить об успешности создания очень просто,
если (!xmlhttp){
//Не удалось создать объект XMLHttpRequest!
}
еще{
// Создано успешно!
}
После создания объекта XMLHttpRequest давайте посмотрим на методы, свойства и самый важный обработчик событий onreadystatechange этого объекта.
Метод:
open() Описание: Инициализируйте параметры HTTP-запроса, такие как URL-адрес и метод HTTP, но не отправляйте запрос.
abort() Описание: Отменить текущий ответ, закрыть соединение и завершить любую ожидающую сетевую активность.
getAllResponseHeaders() Описание: Возвращает заголовки ответа HTTP в виде непроанализированных строк.
getResponseHeader() Описание: Возвращает значение указанного заголовка ответа HTTP.
send() Описание: Отправляет HTTP-запрос, используя параметры, переданные методу open(), и необязательное тело запроса, переданное этому методу.
setRequestHeader() Описание: Устанавливает или добавляет HTTP-запрос к открытому, но не отправленному запросу.
Атрибуты:
ReadyState Описание: Статус HTTP-запроса.
responseText Описание: тело ответа (исключая заголовки), полученное сервером на данный момент, или пустая строка, если данные не были получены.
responseXML Описание: Ответ на запрос, анализируемый в XML и возвращаемый как объект Document.
status Описание: код состояния HTTP, возвращаемый сервером.
statusText Описание: Этот атрибут определяет код статуса HTTP-запроса, используя имя вместо номера.
onreadystatechange — это функция-обработчик событий, вызываемая каждый раз при изменении свойства ReadyState.
Давайте разберем объект XMLHttpRequest с точки зрения процесса отправки запроса и обработки результатов запроса.
Естественно, объект XMLHttpRequest генерируется перед отправкой запроса. Нет необходимости писать дополнительный код, если он уже существует.
Создайте объект XMLHttpRequest
var xmlhttp = CreateXMLHttp();
После создания объекта XMLHttpRequest на какой веб-сайт мы хотим отправить запрос. Давайте выберем RSS на главной странице блог-парка. Итак, как мне установить адрес веб-сайта, который я хочу запросить, используя метод open()?
open(метод, URL, асинхронный режим, имя пользователя, пароль)
Этот метод имеет 5 параметров. Конкретное значение можно увидеть здесь: http://www.w3school.com.cn/xmldom/dom_http.asp.
Это то, что мы используем.
xmlHttp.open("get"," http://www.cnblogs.com",true );
Параметр get означает использование метода get. Второй, естественно, целевой адрес, домашняя страница парка блогов. Третий параметр означает, является ли он асинхронным. Описания конкретных параметров также можно найти на http://www.w3school.com.cn .
Ладно, цель поставлена, как ее отправить. Используйте метод send().
send(body), метод send() имеет только один параметр, который представляет объект DOM. Этот объект DOM нужно многое объяснить. В следующий раз нам нужно будет только написать.
xmlhttp.send(ноль);
Вот и все. Хорошо, оно отправлено, так что же делать с возвращаемыми результатами? На данный момент используется самое важное из объекта XMLHttpRequest — дескриптор события onreadystatechange. Что это значит? Затем нам нужно объяснить значение ReadyState объекта XMLHttpRequest. Существует 5 состояний ReadyState, представленных числами от 0 до 4 соответственно.
Имя статуса Описание
0 Неинициализированное состояние инициализации. Объект XMLHttpRequest был создан (до вызова open()) или сброшен методом abort().
1 Открыть Был вызван метод open(), но метод send() не был вызван. Запрос еще не отправлен.
2 Вызван метод Sent Send() и HTTP-запрос отправлен на веб-сервер. Ответа не получено.
3 Получение Все заголовки ответа получены. Тело ответа начало приниматься, но не было завершено.
4 Загруженный HTTP-ответ полностью получен.
Однако следует отметить, что состояния, которые разные браузеры могут обрабатывать в дескрипторе события onreadystatechange, несовместимы. IE и FireFox могут обрабатывать состояния с 1 по 4, тогда как Safari может обрабатывать состояния со 2 по 4, а Opera может обрабатывать состояния 3 и 4. . Статус 0 по сути бесполезен, потому что метод open() будет вызван сразу после создания объекта XMLHttpRequest, и статус в это время станет 1, если, конечно, вы не хотите определить, был ли объект отменен путем прерывания (), но такая ситуация пока встречается очень мало. В большинстве случаев достаточно определить, равен ли статус 4 (принято и завершено).
Хорошо, я понимаю, что у ReadyState есть 5 состояний. Затем результат обработки — посмотреть, меняется ли состояние на разные состояния, и мы можем выполнить другую обработку. Как сообщить объекту XMLHttpRequest, кто должен обрабатывать изменение при изменении состояния. Есть два способа написания: один — использовать анонимный метод, другой — указать метод. На самом деле это просто разные методы записи с одним и тем же эффектом. Взгляните на код:
xmlhttp.onReadyStateChange = function (){.
//Код для обработки изменений статуса
}
//или
xmlhttp.onReadyStateChange = getResult;
функция getResult(){
///Код для обработки изменений статуса
}
//Кстати, имя дескриптора относительно длинное. Вы можете запомнить его так: On ReadyState Change означает, что запрос был отправлен при изменении состояния чтения, а также указан метод обработки. content? Есть два атрибута: responseText и responseXML. Для использования, responseXML является возвращаемым объектом, и я расскажу об этом позже, чтобы увидеть, что возвращается.
alert(xmlhttp.responseText); //Проверим, возвращен ли HTML-код домашней страницы. Это ты добиваешься успеха.
Весь процесс таков: создать объект XMLHttpRequest -> указать адрес отправки и метод отправки -> отправить запрос -> указать метод обработки и обработать возвращаемый результат. Но следует отметить, что в нашем обычном понимании это так, но указанный метод обработки дескриптора события onreadystatechange необходимо указать перед отправкой, иначе событие изменения состояния не может быть обработано.
Поэтому мы должны запомнить это в соответствии со следующим процессом: создать объект XMLHttpRequest -> указать адрес отправки и метод отправки -> указать метод обработки изменения статуса -> отправить запрос. После отправки запроса указанный метод обработки будет автоматически применен. вызывается при изменении статуса.
Хорошо, давайте посмотрим на готовый код.
завершенный код
var xmlhttp = false; //Создаем новый запрос переменной и присваиваем ему значение false. Используйте false в качестве условия оценки, что означает, что объект XMLHttpRequest еще не создан.
функция CreateXMLHttp(){
пытаться{
xmlhttp = new XMLHttpRequest(); //Попытаемся создать объект XMLHttpRequest. Браузеры, за исключением IE, поддерживают этот метод.
}
поймать (е) {
пытаться{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Используйте более новую версию IE для создания IE-совместимого объекта (Msxml2.XMLHTTP)
}
поймать (е) {
пытаться{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Используйте старую версию IE для создания IE-совместимого объекта (Microsoft.XMLHTTP).
}
поймать (не удалось) {
xmlhttp = false; //Если это не удалось, убедитесь, что значение запроса по-прежнему ложно.
}
}
}
вернуть xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"," http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(ноль);
функция getResult(){
если (xmlhttp.readyState == 4) {
оповещение (xmlhttp.responseText);
}
}
Вроде бы все в порядке, но задумывались ли вы когда-нибудь о том, что произойдет, если HTML-код пойдет не так во время передачи по сети или указанный нами адрес станет недействительным. На данный момент вам необходимо использовать атрибут статуса, который представляет собой код состояния HTTP, возвращаемый сервером. Когда xmlhttp.status равен 200, это означает, что процесс передачи завершен и не содержит ошибок. Чтобы узнать конкретное значение кода состояния HTTP, вы можете перейти на веб-сайт организации W3C по адресу http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
Я думаю, что вполне нормально написать метод getResult() следующим образом.
функция getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
оповещение (xmlhttp.responseText);
}
}
Ладно, то, что изначально было довольно простым, кажется очень многословным после того, как я так много об этом написал. Однако я считаю очень важным понимать основное содержание программирования. В настоящее время для разработки AJAX-программ используется множество JS-библиотек, и нет необходимости напрямую писать такой базовый код. Например, если мы используем знаменитый jQuery, но если мы хорошо разбираемся в основных вещах, то эти библиотеки сообщают об ошибках, или, если есть проблема, мы можем очень быстро узнать, где ошибка, и быстрее вносить изменения в заставить программу работать нормально.