Ajax - это не новый язык программирования, а новый подход, который использует существующие стандарты. Ajax может обмениваться данными с сервером без перезагрузки всей страницы. Этот метод асинхронного взаимодействия позволяет пользователям получать новые данные без необходимости обновлять страницу после нажатия.
Xmlhttprequest объект
Ядром Ajax является объект Xmlhttprequest (XHR). XHR предоставляет интерфейс для отправки запросов на сервер и разрешение ответов на сервера. Возможность получать новые данные с сервера асинхронно.
Создайте объекты в браузере (поддерживайте только IE7 и выше):
var xhr = new xmlhttprequest ();
Как использовать XHR
Первое, что нужно ввести, это метод Open (). Он получает 3 параметра:
• Тип запроса на отправку (сообщение, получить и т. Д.)
• Запрашиваемый URL
• Значение Болея, указывающее, отправляется ли запрос асинхронно
Пример вызова open ():
xhr.open ("get", "index.jsp", false);
Получить запрос на index.jsp. URL относится к текущей странице, где выполняется код; Вызов метода Open () на самом деле не отправляет запрос, он просто начинает запрос на отправку.
Вызовите send () для отправки запроса:
xhr.send (null);
Send () получает параметр, то есть данные, которые будут отправлены в качестве запрашивающего органа. Если данные не требуются для отправки через тело запроса, NULL должен быть передан.
Соответствующие данные будут заполнены соответствующими свойствами объекта XHR:
• Ответы: текст возвращается в качестве корпуса ответа
• responsexml: тип контента как ответ «текст/XML» или «Приложение/XML»
• Статус: статус HTTP ответа
• Statustext: описание статуса HTTP
После получения ответа сначала проверьте атрибут состояния и подтвердите, что ответ возвращался, обычно 200 используется в качестве признака успеха. Код состояния 304 указывает, что ресурс не был изменен, а кэшированная версия в браузере может использоваться напрямую.
Чтобы получить подходящий ответ, следует обнаружить два кода статуса:
xhr.open ("get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); xhr.status);}Обнаружая свойство готового штата, может быть определено текущая активная фаза процесса запроса/ответа.
• 0: не инициализировано. Метод Open () не был вызван
• 1: старт. Метод Open () был вызван, и метод Send () не был вызван.
• 2: отправить. Метод send () был вызван, ответа не было
• 3: получить. Некоторые данные были получены
• 4: завершено. Все данные были получены и могут использоваться на стороне клиента
Когда изменение значения свойства готового штата будет запущено. Чтобы обеспечить совместимость браузера, укажите обработчик событий onreadystateChange, прежде чем вызовать Open ().
var xhr = new xmlhttprequest (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status = 304) {alert (xhr.ResteSete); " + xhr.status);}}}; xhr.open (" get "," index.jsp ", true); xhr.send (null);Асинхронный запрос может быть отменен перед получением ответа:
xhr.abort ();
Информация о заголовке HTTP
Объекты XHR предоставляют методы для манипулирования заголовками запросов и ответа на информацию о заголовке.
По умолчанию при отправке запроса XHR также будет отправлена следующая информация заголовка.
• Принять: тип контента, с которым может обработать браузер
• Принять-Чарсет: набор символов, который может отображать браузер
• Принять по кодировке: сжатый кодирование, с которым может обращаться браузер
• Принятие языка: язык, который в настоящее время устанавливается браузером
• Соединение: тип соединения между браузером и сервером
• cookie: любые файлы cookie, установленные на текущей странице
• Хост: домен, где находится страница, на которой был выпущен запрос
• Реферар: URL страницы, которая выпустила запрос
• Пользовательский: строка пользовательского агента браузера
Используйте SetRequestHeader (), чтобы установить пользовательскую информацию заголовка запроса. Вы должны вызвать метод Open () после вызова и перед вызовом Send ()
SetRequestHeader ():
xhr.open ("get", "index.jsp", true); xhr.setrequestheader ("myheader", "myvalue"); xhr.send (null);Вызовите getResponseHeader () и передайте имя поля, чтобы получить соответствующую информацию заголовка ответа. GetallResponseHeader () получает длинную строку, содержащую всю информацию о заголовке.
var myheader = xhr.getResponseHeader ("myheader"); var allheaders = xhr.getallresponseheader ();Получить запрос
GET используется для запроса сервера для определенной информации. Вы можете добавить параметры строки запроса к окончанию URL. Имя и значение каждого параметра в строке запроса должны быть закодированы с использованием encodeuricomponent ():
xhr.open ("get", "login.jsp? name1 = value1 & name2 = value2", false); AddurlParam () получает три параметра: URL -адрес параметра, который будет добавлен, имя параметра и значение параметра. var url = "login.jsp"; // добавить параметр url = addurlparam (url, "username", "xxyh"); url = addurlparam (url, "пароль", "xxyh123"); // инициализируйте запрос xhr.open ("get", url, false);Опубликовать запрос
Запрос POST используется для отправки данных на сервер, который должен быть сохранен. Тело запроса POST может содержать много данных, а формат неограничен.
Запрос на инициализацию:
xhr.open ("post", "login.jsp", true); Сначала установите информацию о заголовке типа контента в Application/XWW-Form-Urlencoded, а затем создайте формат строки. Если вам нужно сериализовать данные формы на странице, а затем отправить его на сервер через XHR, вы можете использовать функцию serialize () для создания этой строки: xhr.open ("get", "login.jsp", false); xhr.setrequesteader ("content-type", "Приложение/xww-form-urlencodencoded"); document.getElementbyId ("user-info"); xhr.send (serialize (form));Вышеуказанное-глубокое понимание Ajax в JavaScript, введенном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!