Большая часть Web-прибавлений употребляют модель запрос/ответ, в тот или другой зарабатывают от сервера HTML-страничку на сто процентов В итоге зарабатываем службу по виду \”вперед и назад\”, традиционно состоящую из нажатия клавиши, ожидания сервера, нажатия иной клавиши и снова ожидания сервера С помощью Ajax и объекта XMLHttpRequest вы сможете применять модель запрос/ответ, тот или другой никогда не забывает юзеров в ожидании ответа сервера В предоставленной статье Брэт Маклафлин скажет о разработке экземпляров XMLHttpRequest кросс-браузерным методом, теории и передаче запросов и реакции сервера В главной статье данной серии (ссылка приведена в разделе Ресурсы) вы познакомились с Ajax-прибавлениями и некими главными концепциями, присущими Ajax-прибавлениям В центре итого находится максимум технологий, о тот или другой вы, возможно, теснее понимаете: JavaScript, HTML, XHTML, незначительно динамического HTML и даже DOM (Document Object Model) В предоставленной статье я спущусь с вышины 10000 футов и остановлюсь на определенных компонентах Ajax Вы начнете с самого основательного и базисного из целых Ajax-объектов и программных подходов – объекта XMLHttpRequest Он, практически, приходит единственной корпоративной нитью для целых Ajax-прибавлений, и (как можнож ждать) вы захотите кропотливо выучить его для пов ышения вашей квалификации программера до очень вероятных границ По сути иногда-нибудь обнаружится, что для правильного применения XMLHttpRequest вы очевидно не желаете применять XMLHttpRequest Сначала, я сделаю крайний небольшой обзор перед погружением в начальный код, чтоб убедиться, что вы совсем светло доставляете эту идею с Web 2 0 Иногда вы слышите термин Web 2 0, то обязаны сначала потребовать: \”А что этакое Web 1 0?\” Желая вы навряд ли слышали про Web 1 0, этот термин значит ссылку на обычный Web, в тот или другой употребляется совсем точная модель запроса и ответа К примеру, обнаружьте веб-сайт Amazon com и нажмите клавишу либо введите строчку поиска Этот запрос держит существенно преимущественно, чем легко перечень книжек; это практически иная полная HTML-страничка В итоге вы, возможно, увидите некое мигание и сияние во пора перерисовки Web-браузером данной новейшей HTML-странички По сути, можнож светло узреть запрос и ответ, разграниченные каждой новейшей страничкой, тот или другой будет отображена Web 2 0 обходится без данной чрезвычайно приметной процедуры \”вперед и назад\” (в значимой ступени) В качестве образца посетите веб-сайт Google Maps либо Flickr (ссылки на два этих Web 2 0 веб-сайта, действующих на Ajax, приведены в разделе Ресурсы) На Google Maps, к примеру, вы сможете повернуть карту, приблизить либо удалить ее с чрезвычайно маленький перерисовкой Природно, запросы и ответы выполняются и тут, но это происходит в фоновом режиме С точки зрения юзера, воспоминание чрезвычайно не плохое; грызть этакое чувство, что действуешь с настольным прибавлением Это новое чувство (и парадигма) и есть в облика, иногда речь идет о Web 2 0 Единственное, о чем вы обязаны позаботиться, – как сделать вероятными эти новейшие взаимодействия Разумеется, вы все одинаково обязаны делать запросы и зарабатывать ответы, но эта перерисовка HTML для каждой операции запрос/ответ и приносит чувство медлительного, тяжеловесного Web-интерфейса Потому понятно, что нужен новейший подход, дозволяющий делать запросы и зарабатывать ответы, тот или другой держат лишь нужные сведения заместо целой HTML-странички Единый фактор, иногда вы желаете заработать на сто процентов новейшую HTML-страничку, – это… ммм иногда вы желаете, чтоб юзер увидел новейшую страничку Но большая часть взаимодействий прибавляют компонента: меняют текстовое поле либо загораживают сведения на имеющихся страничках Во целых этих вариантах подход Ajax и Web 2 0 мастерят вероятным передачу и прием предоставленных без обновления HTML-странички на сто процентов И для каждого Web-серфер а эта способность вашего прибавления предоставит чувство быстроты, большей чувствительности и будет приводить его к для вас опять и опять Для того чтоб целый этот сияние и волшебство произошли по сути, вы обязаны тесновато познакомиться с объектом JavaScript, именуемым XMLHttpRequest Этот небольшой объект – ключ к Web 2 0, Ajax и, в великий ступени, ко целому иному, что вы узнаете в этом разделе в процесс следующих пары месяцев Чтоб сделать вправду стремительный обзор, остановимся итого только на пары способах и свойствах, тот или другой вы будете применять в этом объекте: open(): Определяет новейший запрос к серверу;
send(): Передает запрос серверу; abort(): Заканчивает текущий запрос; readyState: Бережёт текущее состояние готовности HTML; responseText: Текст, тот или другой сервер передал назад как ответ на запрос Не волнуйтесь, ежели вы не многие осознаете из этого (либо вообщем ничего по данной теме) – вы выучите каждый способ и свойство в последующих пары статьях Что вы обязаны вынести из этого – ясное понятие о том, что мастерить с XMLHttpRequest Обратите интерес, что любой из этих методо в и параметров касается к передаче запроса и действует с ответом По сути, ежели вы лицезрели все способы и характеристики XMLHttpRequest, они все будут обладать отношение к данной чрезвычайно обычный модели запрос/ответ Из этого понятно, что вы не будете учить новейший замечательный GUI-объект либо определенного рода сверхсекретный подход к творению взаимодействия с юзером; вы будете действовать с азбучными запросами и азбучными ответами Это, может быть, звучит не чрезвычайно захватывающе, но усмотрительное внедрение этого единственного объекта может на сто процентов поменять ваши прибавления Во-главных, вы обязаны сделать новейшую переменную и присвоить ей экземпляр объекта XMLHttpRequest Это достаточно легко в JavaScript; вы употребляете ключевое слово new с именованием объекта, как изображено в листинге 1 Помните, что JavaScript не просит типизации собственной переменной, потому для вас не надо ничего из того, что вы видите в листинге 2 (может быть, так бы вы делали этот объект на Java) Итак, вы создаете переменную в JavaScript с помощью var, приносите ей имя (к примеру, \”request\”), и присваиваете ей новейший экземпляр XMLHttpRequest На предоставленном шаге вы готовы применять объект в ваших функциях В настоящей жизни вещи могут портиться, и этот код не обеспечивает никакой обработки ошибок Немного наилучший метод – сделать этот объект и отдать ему изящно потерпеть неудачу, ежели что-или пойдет не так К примеру, почти все старенькые браузеры (веруете либо нет, люди все еще употребляют старенькые версии Netscape Navigator) не поддерживают XMLHttpRequest, и для вас необходимо предупредить таковых юзеров, что что-то не вышло В листинге 3 изображено, как можнож сделать этот объект так, что ежели что-то поломается, он изобразит предостережение на JavaScript Удостоверьтесь, что вы осознаете любой из последующих шагов: Сделайте новейшую переменную с именованием request и присвойте ей значение false Вы будете применять false как договор, значащее, что объект XMLHttpRequest еще не был сотворен Попытайтесь сделать объект XMLHttpRequest Ежели это не удалось (catch (failed)), убедитесь, что request все еще одинаков false Проверьте и узнайте, одинаково ли false значение request (ежели все прошло нормально, этого не случится) Ежели имелась неувязка (и request одинакова false), употребляйте предостережение JavaScript для известия юзеру о появлении трудности Это достаточно легко; у большинства JavaScript- и Web-разрабов преимущественно медли уходит на чтение и написание, чем на осознание Сейчас у вас грызть защищенный от ошибок код, творящий объект XMLHttpRequest и даже предостерегающий вас о том, что что-то прошло не так по последней мере, пока вы не испытаете этот код в Internet Explorer Ежели вы это сделаете, то заработаете что-то, выглядящее так же страшно, как на рисунке 1 Internet Explorer показывает ошибку Понятно, что что-то не действует; Internet Explorer – это тяжкий обветшавший браузер, но около 70% юзеров его употребляют Иными словами, вы не сделаете максимум в Web-мире, ежели не будете поддерживать Microsoft и Internet Explorer! Потому нужен иной способ службы с браузерами Microsoft Оказывается, что Microsoft поддерживает Ajax, но именует близкую версию XMLHttpRequest по-иному Точнее он именует этот объект несколькими различными именами Ежели вы употребляете наиболее новейшую версию Internet Explorer, то обязаны применять объект Msxml2 XMLHTTP; некие старенькые версии Internet Explorer употребляют Microsoft XMLHTTP Вы обязаны поддерживать два вида объектов (без утраты теснее будущей помощи браузеров не от Microsoft) В листинге 4 приведен теснее знакомый код с добавленной поддержкой Microsoft Максимум имелось сочинено о Ajax и усиливающемся интересе Microsoft к пребыванию в данной области Вправду ожидается, что новая версия Internet Explorer (версия 7 0, намеченная к выходу в 2006) будет поддерживать XMLHttpRequest впрямую, дозволяя для вас применять ключевое слово new заместо итого кода сотворения Msxml2 XMLHTTP Но не очень соблазняйтесь; для вас все одинаково нужно поддерживать старенькые браузеры, потому кросс-браузерный код оставит со сцены еще не быстро Прибавление помощи для браузеров Microsoft Просто затеряться в фигурных скобках, потому разглядим поэтапно все деяния: Сделайте новейшую переменную с именовани
ем request и присвойте ей значение false Вы будете применять false как договор, значащее, что объект XMLHttpRequest еще не был сотворен Попытайтесь сделать объект XMLHttpRequest Ежели э то не удалось (catch (trymicrosoft)): Попытайтесь сделать совместимый с Microsoft объект, употребляя наиболее новейшие версии Microsoft (Msxml2 XMLHTTP) Ежели это не удалось (catch (othermicrosoft)), попытайтесь сделать совместимый с Microsoft объект, употребляя старенькые версии Microsoft (Microsoft XMLHTTP) Ежели это не удалось (catch (failed)), убедитесь, что request все еще одинаков false Проверьте и узнайте, одинаково ли еще false значение request (ежели все прошло нормально, этого не случится) Ежели имелась неувязка (и request одинакова false), употребляйте предостережение JavaScript для известия юзеру о появлении трудности Выполните эти конфигурации в собственном коде и попытайтесь опять выполнить его в Internet Explorer; Вы обязаны узреть сделанную вами форму (без известия о ошибке) В моем случае итог смотрелся так, как изображено на рисунке 2 Internet Explorer действует нормально Посмотрите опять на листинги 1, 3 и 4 и обратите интерес, что целый этот код конкретно вложен снутри т егов сценария Иногда JavaScript закодирован схожим образом и не расположен снутри тела способа либо функции, он именуется статическим JavaScript Это значит, что код выполняется в какой-то фактор медли до того, как страничка отобразится юзеру (из спецификации не светло с точностью сто%, иногда этот код выполняется, и браузеры поступают по-различному; но все таки грызть гарантия, что код выполняется до того, как юзеры сумеют взаимодействовать с вашей страничкой) Традиционно большая часть Ajax-программистов конкретно так и делают объект XMLHttpRequest Как говорилось, вы точно сможете поместить этот код в способ в согласовании с листингом 5 Поступив так, вы обязаны вызвать этот способ до начала хоть какой службы с Ajax Другими словами, вы обязаны иметь что-то схожее на листинг 6 Внедрение способа для сотворения XMLHttpRequest request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject(\”Msxml2 XMLHTTP\”); } catch (othermicrosoft) { try { request = new ActiveXObject(\”Microsoft XMLHTTP\”); } catch (failed) { request = false; } } alert(\”Error initializing XMLHttpRequest!\”); // Сделать что-то с переменной request Единственное замечание по предлогу этого кода (и причина того, отчего почти все Ajax-программеры не употребляют таковой подход) – он удерживает решение известия о ошибке Представьте, что у вас имется непростая форма с 10 либо 15 полями, рамками выбора вариантов и т п , и вы активизируете какой-или Ajax-код при вводе юзером текста в поле 14 (внизу формы) Активируется getCustomerInfo(), тот или другой пробует сделать объект XMLHttpRequest, и (для предоставленного образца) терпит неудачу Юзеру выводится предостережение, извещающее о том (во почти всех словах), что он не может применять это прибавление Но юзер теснее издержал пора для наполнения формы! Это достаточно досадно, и эта проблема не заходит в число тех вещей, из-за тот или другой юзер захотел бы возвратиться на ваш веб-сайт В случае применения статического JavaScript, юзер заработает известие о ошибке, как зайдет на вашу страничку Можнож взбесить юзера тем, что ваше Web-прибавление не действует в его браузере Но это точно лучше, чем выдать эту же ошибку опосля 10 минут ввода юзером инфы Лишь по данной причине я рекомендую для вас определять ваш код статически и заблаговременно предостерегать юзеров о вероятных дилеммах Опосля того как вы сделали объект request, сможете начать цикл запрос/ответ Вспомните, что единственной целью объекта XMLHttpRequest приходит предоставление для вас способности высылать запросы и зарабатывать ответы Все другое (изменение пользовательского интерфейса, подмена изображений, даже интерпретация переданных сервером предоставленных) – это служба JavaScript, CSS либо иного кода на ваших страничках С готовым к употреблению XMLHttpRequest вы сможете на данный момент отправить запрос серверу Ajax обладает модель сохранности по виду \”песочницы\” В итоге ваш Ajax-код (и, в частности, объект XMLHttpRequest) может высылать запросы лишь тому домену, на тот или другой выполняется Вы подробнее узнаете о сохранности и Ajax в последующей 100 тье, а сейчас легко запомните, что код, выполняющийся на вашем локальном компе, может делать запросы лишь к серверным сценариям на вашем локальном компе Ежели ваш Ajax-код действует на он обязан высылать запросы к сценариям, действующим на Агрегат URL сервера 1-ое, что для вас нужно найти – это URL сервера для подключения Это не приходит специфическим для Ajax (разумеется вы обязаны знать, как составить URL), но это значительно для исполнения соединения В большинстве прибавлений вы будете сочинять этот URL из некого комплекта статических предоставленных
