Ajax: способ запросить данные без обновления всей страницы;
Техническое ядро Ajax - это объект Xmlhttprequest;
Процесс запроса AJAX: создать объект xmlhttprequest, подключиться к серверу, отправить запросы и получить данные ответа;
/*** Получить ajax object*/function getajaxhttp () {var xmlhttp; Try {// Chrome, Firefox, Opera 8.0+, Safari xmlhttp = new xmlhttprequest (); } catch (e) {// Internet Explorer try {// ie5, 6 xmlhttp = new ActiveXobject ("msxml2.xmlhttp"); } catch (e) {try {// ie7 или выше xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); } catch (e) {alert ("Ваш браузер не поддерживает Ajax!"); вернуть ложь; }}} return xmlhttp;}/** * Отправить запрос ajax * url-url * methodtype (post/get) * con (true (асинхронный) | false (synchronous)) * Параметр (Параметр) * Функциональ (имя метода обращения, не требуется цитаты, это вызывает только тогда, когда он выдерживает) * (Примечание: этот метод имеет два параметра. Другой - это объект, который должен быть обработан) * OBJ должен перейти к объекту, который обрабатывается в методе обратного вызова */Функция AjaxRequest (URL, MethodType, CON, параметр, функция, obj) {var xmlhttp = getajaxhttp (); xmlhttp.onreadyStateChange = function () {// reateState Значение Описание // 0, инициализация, объект XHR был создан, открытый еще не был выполнен // 1, загрузка, открытый метод, но запрос еще не был отправлен // 2, не было выполнено. URL найден // 500: сервер генерирует внутреннюю ошибку, если (xmlhttp.readystate == 4 && xhr.status == 200) {// Ответ http был полностью получен перед вызовом функции (xmlhttp, obj); }}; xmlhttp.open (methodType, url, con); xmlhttp.send (parameter);} // Это функция параметра createxml () {var xml = "<user> <userId> asdfasdfasdf <// user -id> </user>"; // "//" Это не капитал V, но FARATION FARATION (). json = {id: 0, имя пользователя: "хороший человек"}; return json;} function c () {alert ("");}//тест
AjaxRequest ("http://www.baidu.com", "post", true, createxml (), c, document);Давайте посмотрим на другой пример
Ajax ({url: "./testxhr.aspx", // Тип адреса запроса: "post", // Данные метода запроса: {name: "super", возраст: 20}, // запрос параметров параметров данных: "json", успех: функция (ответ, xml) {// code, выполненное после успешного размещения}, выполнено: функция (состояние) {// code refected); Функция ajax (options) {options = options || {}; options.type = (options.type || "get"). touppercase (); Options.datatype = Options.datatype || "Json"; var params = formatparams (options.data); // CREATE - unne EI6 - Шаг 1 if (window.xmlhttprequest) {var xhr = new xmlhttprequest (); } else {// IE6 и ниже браузеры var xhr = new activexObject ('microsoft.xmlhttp'); } // Прием - Шаг 3 xhr.onreadyStateChange = function () {if (xhr.readystate == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.responsetext, xhr.responsexml); } else {options.fail && options.fail (status); }}} // подключить и отправить - Шаг 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (null); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Установить тип контента при отправке формы xhr.setrequestheader ("content-type", "Application/xwww-form-urlencoded"); xhr.send (params); }} // Формат Функции Функции Форматапарамс (DATA) {var arr = []; for (var name in data) {arr.push (encodeuricomponent (name) + "=" + encodeuricomponent (data [name])); } arr.push ("v =" + math.random ()). Заменить (".", ")); return arr.join (" & ");}Давайте посмотрим на принцип
1. Создать
1.1. IE7 и выше версий поддерживают собственные объекты XHR, поэтому вы можете использовать их напрямую: var Oajax = new Xmlhttprequest ();
1.2. В IE6 и его предыдущих версиях объект XHR реализуется через объект ActiveX в библиотеке MSXML. В некоторых книгах усовершенствовали три разные версии таких объектов в IE, а именно MSXML2.xmlhttp, MSXML2.xmlhttp.3.0 и MSXML2.xmlhttp.6.0; Я чувствую, что это слишком хлопотно, поэтому я могу напрямую использовать следующее утверждение для его создания: var oajax = new ActivexObject ('microsoft.xmlhttp');
2. Подключите и отправляйте
2.1. Три параметра функции Open (): метод запроса, адрес запроса и вопрос о том, следует ли запросить асинхронно (очень мало синхронных запросов и еще не использовались);
2.2. Метод запроса GET заключается в том, чтобы отправить данные на сервер через параметры URL, в то время как POST передает данные на сервер как параметр отправки;
2.3. В запросе POST, перед отправкой данных, должен быть установлен тип контента представленной формы;
2.4. Параметры, представленные на сервер, должны быть закодированы методом encodeuricomponent (). Фактически, в форме списка параметров "key = value", как ключ, так и значение должны быть закодированы, потому что они будут содержать специальные символы. Каждый раз, когда вы просите, строка «v = xx» будет записана в список параметров. Это для отклонения кеша, и каждый раз, когда вы просите его непосредственно на сервер.
Encodeuri (): используется для кодирования всего URI, и не будет кодировать специальные символы, которые принадлежат URI, такие как колоны, прямые черты, вопросы вопроса и знаки фунта; его соответствующая функция декодирования decodeuri ();
Encodeuricomponent (): используется для кодирования части URI и кодирования любых нестандартных символов, которые он находит; соответствующая функция декодирования decodeuricomponent ();
3. получить
3.1. После получения ответа данные ответа будут автоматически заполнены объектом XHR. Соответствующие атрибуты следующие
responseText: содержание тела, возвращаемое ответом, типа строки;
responsexml: если тип содержимого ответа - «Text/xml» или «Application/XML», соответствующие данные XML будут храниться в этом свойстве, который является типом документа, соответствующим XML;
Статус: Ответ HTTP Code;
Statustext: описание статуса HTTP;
3.2. Свойство Readystate объекта XHR представляет текущую активную стадию процесса запроса/ответа. Значение этого свойства заключается в следующем
0-uninitialized, метод Open () еще не был вызван;
1-start, open () метод вызывается, метод send () не вызывается;
2-Send, метод Send () был вызван, и ответ не был получен;
3-receive, часть данных ответа была получена;
4 Заполненные, все данные ответа были получены;
До тех пор, пока будет вызвано значение Quarestate Manemes, вы можете называться readystateChange после отправки, потому что сервер запрашивается во время отправки, а сетевая связь будет проведена, что требует времени. Также можно указать обработчик событий BeadyStateChange после того, как я использую, но для того, чтобы это было вновь, но определяет, что это будет лучше.
3.3. В событии BeadyStateChange сначала определите, получен ли ответ, а затем определите, успешно ли сервер обрабатывает запрос. xhr.status - это код состояния. Код состояния начинается с 2 и все добивается успеха. 304 означает получение из кеша. Приведенный выше код добавляет случайное число каждый раз, когда запрос запроса, поэтому значение из кэша не нужно судить.
4. Запросы Ajax не могут быть междоменными!