1. Ajax (асинхронный JavaScript + XML) может запросить дополнительные данные, такие как сервер, без удаления страницы, то есть технологии локальной обновления
2. Создать объект XHR
function createxhr () {if (typeof xmlhttprequest! = "undefined") {return new xmlhttprequest (); } else if (typeof activexObject! = "undefined") {// <ie7 if (typeof arguments.callee.activexstring! = "string") {var version = ["msxml2.xmlhttp.6.0", "msxml2.xmlhttp.3.0", "msxml2.xmlhtp. for (i = 0, len = version.length; i <len; i ++) {try {new activexObject (version [i]); Arguments.callee.activexstring = version [i]; перерыв; } catch (ex) {}}} return new activexObject (arguments.callee.activexstring); } else {бросить новую ошибку ("нет поддержки XHR"); }} var xhr = createxhr (); предупреждение (xhr); // [объект xmlhttprequest]3. Использование Примечание: все примеры в этом разделе применяются на стороне сервера
1. Вызовите метод Open (). Он принимает 3 параметры: тип запроса, который будет отправлен («Get», «post» и т. Д.), URL -адрес запроса и логическое значение, указывающее, отправляется ли запрос асинхронно.
2. Чтобы отправить запрос, вызовите метод Send () и примите параметр, то есть он должен быть предметом запроса. нулевой, если не требуется
3. Возвращенные данные будут автоматически заполнены в свойствам объекта XHR.
var xhr = createxhr (); // Откройте файл example.txt в Get Synchrony // Синхронизация: код JavaScript будет ждать, пока сервер ответит и выполнит xhr.open ("get", "example.txt", false); xhr.send (null); // Статус представляет состояние HTTP ответа // 200 представляет OK, 304 представляет кэш if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ressonsextextext); // возвращать текст ответа, 123456} else {alert ("запрос был неудачным:" + xhr.status); }4.Example.Text File Содержание - это строка: 123456
4. Конечно, не будет проблем с методом синхронизации, используемом в предыдущем процессе. Мы должны бросить вызов асинхронному методу.
var xhr = createxhr ();// xhr.readystate представляет текущее состояние запроса/ответа, и 4 представляет, что все данные ответа были приняты // Кроме того, до тех пор, пока значение xhr.readystate событие xhr.onreadystatechange будет инициировать xhr.onstatechange = function () {if (xhr.readyState == 4) {if.Shr.STAT> stateChange = staTechange = stateChange = function () {if (xhr.ReadyState == 4) xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); } else {alert ("запрос был неудачным:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); xhr.send (null);
5. Каждый HTTP -запрос и ответ будут иметь соответствующую информацию заголовка.
1. По умолчанию, при отправке запроса XHR также будет отправлена следующая информация заголовка.
①accept: тип контента, с которым может обработать браузер.
②accept-charset: набор символов, который может отображать браузер.
③accecepting-coding: сжатый кодирование, с которым может обработать браузер.
④accept-Language: язык, в настоящее время устанавливаемый браузером.
⑤connection: тип соединения между браузером и сервером.
⑥cookies: любые файлы cookie, установленные на текущей странице.
⑦host: домен, где расположена страница, в которой была выдана запрос.
⑧Reerer: URI страницы, которая выпустила запрос.
⑨user-Agent: строка пользовательского агента браузера.
2. Используйте метод SetRequestHeader () для установки пользовательской информации заголовка запроса. Примите два параметра: имя поля заголовка и значение поля заголовка
var xhr = createxhr (); // xhr.readystate представляет текущее состояние запроса/ответа, и 4 представляет, что все данные ответа были приняты // Кроме того, до тех пор, пока значение xhr.readystate событие xhr.onreadystatechange будет инициировать xhr.onstatechange = function () {if (xhr.readyState == 4) {if.Shr.STAT> stateChange = staTechange = stateChange = function () {if (xhr.ReadyState == 4) xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); } else {alert ("запрос был неудачным:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); // xhr.setrequestheader ("name", "Zhang"); // Принятое «имя» можно увидеть в http of asment.txt: "zhang" xhr.send (null);3. Получить информацию о заголовке запроса и соответствующую информацию, вызовите метод getResponseHeader () getAllResponseHeaders ()
var xhr = createxhr (); // xhr.readystate представляет текущее состояние запроса/ответа, и 4 представляет, что все данные ответа были приняты // Кроме того, до тех пор, пока значение xhr.readystate событие xhr.onreadystatechange будет инициировать xhr.onstatechange = function () {if (xhr.readyState == 4) {if.Shr.STAT> stateChange = staTechange = stateChange = function () {if (xhr.ReadyState == 4) xhr.status <300) || xhr.status == 304) {// Получить контент // предупреждение (соединение); // Text/Plain // Получить всю информацию о ответе var all = xhr.getallresponseHeaders (); предупреждение (все); } else {alert ("запрос был неудачным:" + xhr.status); }}}}; xhr.open ("get", "example.txt", true); xhr.send (null);6. Получить запрос. Мы уже обсуждали метод запроса GET. Теперь давайте расширим его и добавим некоторые параметры в запрос GET.
/ ** URL: URL без запроса Имя: Значение ключа запроса: Значение запроса возврат: URL с помощью строки запроса*/ function addurlParam (url, name, value) {url += (url.indexof ("?") == -1? "?": "&"); url + = encodeuricomponent (name) + "=" + encodeuricomponent (значение); вернуть URL; } var xhr = createxhr (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ressontextext); } else {alert ("запрос был неудачным:" + xhr.status); }}}}; var url = "example.txt"; url = addurlparam (url, "name", "Zhang"); url = addurlparam (url, "age", "23"); // Запрашиваемый URL становится: example.txt? Name = zhang & age = 23 xhr.open ("Get", url, true); xhr.send (null);7. POST запрос
1. Анализ случаев: Далее, давайте обсудим приложение Ajax, которое отправляет запросы в методе POST, то есть регистрация пользователя, и подсказка будет возвращена на основе вашего зарегистрированного имени пользователя.
2. Шаги реализации
1) Во -первых, должна быть зарегистрированная страница (конечно, это очень просто здесь) ajax.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Untitled Document</title> <style> </style> </head> <body> <form name="myForm" method="post"> Name: <input type="text" name="username" /><label id = "userlabel"> Пожалуйста, введите имя пользователя </label> <br/> пароль: <input type = "password" name = "password"/> <br/> <input type = "отправить" value = "login"/> <br/> </form> <script src = "evenuut.js" src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) Тогда, конечно, часть JavaScript
①eventutil.js, вот лишь список частей прослушивания событий
var EventUtil = {addEvent: function (element, type, handler) {if (element.addeventListener) {element.AddeventListener (type, Handler, false); } else if (element.attachevent) {element.attachevent ("on" + type, Handler); }}}}②serialize.js: Форма сериализации
функция serialize (form) {var parts = [], field = null, i, len, j, optlen, option, optvalue; for (i = 0, len = form.elements.length; i <len; i ++) {field = form.elements [i]; switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.length; j <optlen; j ++) {option = field.options [j]; if (option.selected) {optValue = ""; if (option.hasattribute) {optvalue = (option.hasattribute ("value")? Option.value: Option.Text); } else {optValue = (option.attributes ["value"]. Указано? Option.value: Option.Text); } parts.push (encodeuricomponent (field.name) + "=" + encodeuricomponent (optValue)); } } } перерыв; case undefined: // Поле набор корпуса «файл»: // file ввод Case "Отправить": // Отправить кнопку "Сброс": // кнопка сброса "Кнопка": // Custom Blove Break; Case "Radio": // радиопроизводственная кнопка "Флажок": // флажок if (! field.Checked) {break; } /* Выполнить операцию по умолчанию* /default: // Отказ от форм поля без имен if (field.name.length) {parts.push (encodeuricomponent (field.name) + "=" + encodeuricomponent (field.value)); }}} return parts.join ("&"); }③ajax.js - это функция Createxhr () выше, и она не будет указана здесь.
④ajaxdo.js, основной файл, является операцией часть нашего имени, которая написана случайным образом.
var form = document.forms [0]; // Получить форму var username = form.elements ['username']; // имя пользователя var userlabel = document.queryselector ("#userlabel"); // Приглашение tag eventutil.addevent (имя пользователя, "blur", function () {var xhr = createxhr (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr.status> = 200 && xhr.status <300) || xhr.status> = 200 && xhr.status <300) xhr.responsetext; userlabel.firstchild.data = "Извините, этот пользователь уже существует"; «Приложение/X-WWW-FORM-URLENCODED»);3. Улучшение Часть: все видели это. Когда мы отправили форму только сейчас, мы сериализовали форму. Тип FormData определяется для этого на уровне 2 xmlhttprequest, который автоматически будет сериализовать форму для нас, и нам не нужно писать ее сами.
Мы перемещаем только часть кода
// ... пропущенный код здесь согласуется с вышеуказанным // post refsure xhr.open ("post", "dome.php", true); // здесь нужно изменить только для замены предыдущей функции xhr.send (new FormData (form));8. Другие части (понимайте, потому что совместимость недостаточно)
1. Настройка тайм -аута
xhr.open ("get", "example.txt", true); xhr.timeout = 1000; // Установить тайм -аут на 1 секунду (только для IE8+) xhr.ontimeout = function () {alert («Запрос не вернулся через секунду.»); }; xhr.send (null);2. Метод overdemiMeType (), тип, возвращаемый сервером
var xhr = createxhr (); xhr.open ("get", "example.txt", true); xhr.overridemimeType ("text/xml"); // предыдущий был Text/plain xhr.send (null);3. Прогрессные события
1. Скачать событие, запускаемое до тех пор, пока браузер получает информацию сервера.
var xhr = createxhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); } else {alert ("запрос был неудачным:" + xhr.status); }}; xhr.open ("get", "example.txt", true); xhr.send (null);2. Событие прогресса, периодически запускаемое во время браузера, получающего новые данные
var xhr = createxhr (); xhr.onprogress = function (event) {var divstatus = document.getElementbyId ("status"); // Рассчитайте процент данных, которые были получены из ответа if (event.lengthcompable) {divstatus.innerhtml = "получен" + event.position + "из" + event.totalsize + "байты"; }}; xhr.open ("Get", "altevents.php", True); xhr.send (null);Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.