Javascript XMLHttpRequest, история на създаването, стандарти, примери

XMLHttpRequest (XHR) е API под формата на обект, предоставен от JavaScript браузърната среда. По-специално, търсенето на данни от XHR за постоянно модифициране на изтеглена уеб страница е основна концепция за дизайна на Ajax. Въпреки името XHR може да се използва с протоколи, различни от HTTP, а данните могат да бъдат под формата не само на XML, но и на JSON, HTML или обикновен текст. WHATWG поддържа стандарта XHR. Сегашната работа в W3C за създаване на стабилна спецификация се основава на моментни снимки на стандарта WHATWG.

[thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_261.jpeg
Първоначално javascript беше XMLHttpRequest като обект на ActiveX, неговото използване е ограничено до интранет базирани на Microsoft и не е подходящо за други сайтове. Екипът на Mozilla се интересуваше от реализацията на JScript еквивалента и го разпространяваше до всички браузъри, включително тези, които работят с Gecko /KHTML и Opera. Дори IE7 вече не изисква инсталирането на ActiveX за използване с XHR.


История XMLHttpRequest

Концепцията на javascript XMLHttpRequest е създадена от експерти на Outlook Web Access за използване на сървъра на Microsoft Exchange 2000. Версии 5 и 6 не определят XHR идентификатора на обекта в техните скриптови езици, тъй като Самият идентификатор на заявката не е бил стандартен към момента на освобождаването. Microsoft добави идентификатора на обекта към скриптовите си езици в Internet Explorer 7.0, издаден през октомври 2006 г. В проекта на браузъра интерфейсът на JavaScript XMLHttpRequest бе разработен и внедрен в механизма за оформление на Gecko. Той е моделиран така, че да бъде възможно най-близо до интерфейса Microsoft Request. Mozillaсъздаде черупка, за да използва този интерфейс чрез обект JS, наречен XMLHttpRequest. Обектът вече е станал достъпен за версия Gecko 0.6, издадена на 6 декември 2000 г., но не беше напълно функционална до 5 юни 2002 г., версия 1.0 Gecko бе пусната, след което идентификаторът на обекта стана стандартен други основни уеб системи:


  • Safari 1.2, издаден през февруари 2004 г.
  • Опера 8.0, издадена през април 2005 г.
  • iCab 3.0b352, издаден през септември 2005 г.
  • С появата на крос-браузерни JavaScript библиотеки, като jQuery, разработчиците могат да извикат функцията javascript XMLHttpRequest, без да кодират директно в API. Консорциумът World Wide Web публикува проект на спецификация за XMLHttpRequest на 5 април 2006 г., за да документира минимален набор от съвместими функции на базата на съществуващите реализации, позволявайки на разработчиците да ги използват без код, специфичен за платформата. На 25 февруари 2008 г. W3C публикува и друга спецификация на работния проект - XMLHttpRequest Level 2. Ниво 2 се състои от разширена функционалност, включително поддръжка на заявки и обработка на байта.

    Стандарти за идентификатори на обекти

    Тъй като стандартът W3C за обект на JavaScript на XMLHttpRequest е предишен, потребителските агенти може да не са в състояние да наблюдават всички характеристики на дефиницията и всяко от следните действия може да бъде променено. Трябва да се вземе под внимание изключителната грижа при писане на сценарий с обект XMLHttpRequest за няколко потребителски агенти.
    HTTP и HTTPS заявки XMLHttpRequest обекти се инициализират от отворенначин. Извиква се преди изпращането на действителната заявка за проверка. Този метод не гарантира, че URL адресът съществува и информацията е правилна. Той може да приеме до пет параметъра, но само две ще изискват инициализиране на заявката. Първият параметър е текстов низ. Въвеждаме методи за заявки, които трябва да бъдат поддържани от съответния потребителски агент, специфичен W3C проект за XMLHttpRequest javascript. Примери:
  • GET се поддържа от Mozilla Internet Explorer 7.
  • POST се поддържа от IE7 Mozilla.
  • HEAD се поддържа от IE7.
  • Методите на заявката не са ограничени до изброените по-горе. Проектът W3C казва, че браузърът може да ги поддържа по свое усмотрение. Вторият параметър е друг текстов низ, който указва URL адреса на HTTP заявка. Третият параметър е логическа стойност, която показва дали заявката ще бъде асинхронна. Това не се изисква от проекта W3C. Неговата стойност по подразбиране трябва да се счита за вярна, използвайки подходящия интерфейс на агента W3C. Асинхронната "истина" заявка няма да чака сървъра да отговори преди да продължи изпълнението на текущия скрипт. Вместо това, той ще извика слушателя на събитие onreadystatechange на JavaScript post на XMLHttpRequest на различни етапи от заявката. Четвъртият и петият параметър са потребителското име и паролата. Тези параметри могат да бъдат предоставени за удостоверяване и оторизация, ако се изисква от сървъра.

    Метод SetRequestHeader

    След успешна инициализация можете да извикате метода Header на отворения обект на XMLHttpRequest, за да изпратите HTTP заглавки към заявката. Първият параметър на метода е името на заглавието. Вторият параметър е стойността на низ. Този метод трябвада се използва за всяка заглавка, изпратена с искането.
    Скритият "камък" в стандарта XMLHttpRequest, който опростява процеса на вземане на проби и анализиране на JSON данни чрез Ajax, е JSON & amp; JSON-P. Обичайният начин за предоставяне на сървърни данни за браузъри, така че те да могат да бъдат използвани на javascript на клиента е да се форматират данни като JSON и да имат достъп до него чрез собствения си URL. Например: XMLHttpRequest javascript Json За да изпратите HTTP заявка, трябва да извикате метода на изпращане XMLHttpRequest. Firefox 3.0.x и предишните версии издават изключение, ако send се извиква без аргументи. Ако тази опция е обект на DOM документ, потребителският агент трябва да се увери, че той се преобразува в добре оформен XML. Ако заглавието Content-Type все още не е добавено чрез SetRequestHeader, то трябва да бъде автоматично добавено от съответния агент към потребителя със следното действие: "application /xml; charset = charset ", където charset е кодирането, използвано за документа. Ако потребителският агент е конфигуриран да използва прокси сървър, обектът XMLHttpRequest ще промени заявката, за да прехвърли конфигурираните заглавия на Proxy-Authorization.

    Промени в XHR

    Ако методът беше успешно задействан, на свойствата на обекта XMLHttpRequest ще бъде присвоена стойност 1 (Open). След получаване на заглавията на HTTP отговор, стойността на 2 (HEADERS_RECEIVED) се присвоява на свойството readyState на обекта на XHR. След зареждане на съдържанието на HTTP отговора, свойството readyState на обекта XHR трябва да бъде зададено на 3 (зареждане). Когато HTTP отговорът е завършен, свойството readyState на обекта XHR трябва да бъде зададено на 4 (Готово). Слушателят ще бъдереагират на промени в състоянието, които се появяват след определянето му. За да се открият условия 1 и 2, слушателят трябва да бъде дефиниран преди да се отвори. Отвореният метод трябва да се приложи преди изпращането на повикването. Този метод прекъсва заявката, ако обектът readyState на XHR обекта все още не е станал 4 (Готово). Методът abort гарантира, че манипулаторът за обратно извикване няма да бъде извикан по време на асинхронна заявка. Някои AJAX библиотеки използват прекъсвания, за да анулират потенциални дублиращи се или повредени заявки.

    Вътрешно-домейн заявки

    В историята на ранното развитие на интернет беше установено, че е възможно да се наруши сигурността на потребителите, които използват javascript, за да обменят информация от един уебсайт към друг, по-малко авторитетен. По този начин всички съвременни браузъри прилагат една и съща политика на произход, която предотвратява много атаки, като например скриптове между сайтове.
    javascript XMLHttpRequest onload данните са склонни към тази политика за сигурност, но понякога уеб разработчиците искат съзнателно да заобиколят ограниченията. Това се дължи на законното използване на поддомейни, тъй като създаването на XHR от страница, генерирана от foo.example.com за получаване на информация от bar.example.com от нея, обикновено се проваля. Има различни алтернативи за заобикаляне на тази защитна функция, включително използването на JSONP, споделяне на ресурси (CORS) или алтернативи на приставки като Flash и Silverlight.

    Браузърни приложения

    Инициализацията на обекта XHR всъщност е доста проста в повечето браузъри, но за да поддържа MSIE 5 и 6, е необходимо да се обслужват няколко различни метода, така че процесът изглежда толкова сложен. По принцип,скриптът се опитва да използва три различни метода последователно, докато успее или не свършва дотук.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_412.jpeg
    Функцията loadXMLDoc отнема две настройки. Първият е местоположението на скрипта на сървърната страна, а второто са променливите, които трябва да бъдат предадени на този скрипт. Това е кратък пример за това как можете да извикате скрипт. Той използва скрипт, намиращ се в /scripts/myscript.php с два параметъра GET (q и target). Препоръчително е да се кодират стойности с помощта на encodeURIComponent.

    POST вместо GET

    За да прехвърлите на сървър за данни повече от 512 байта по размер, трябва да използвате POST нов XMLHttpRequest javascript 34 javascript xml вместо GET. Ако искате да получавате POST данни, трябва да промените типа на MIME заявката, като използвате заглавието Content-Type и да прехвърлите променливите към изпращащото повикване. Последната част от функцията loadXMLDoc се променя, както е показано на снимката по-долу.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_143.jpeg
    параметърът за отваряне може да бъде спрян. Стойността true означава, че повикването трябва да е асинхронно - скриптът продължава без да чака отговор XML, който вече е по подразбиране. Предаването на стойността false води до спиране на скрипта преди получаване на отговора. Скриптът, към който се отнася URL адресът, ще бъде скрипт на сървърната страна (PHP, Perl или подобен). Тя връща добре оформен XML документ. За да се избегне предупреждението за сигурността на браузъра, то трябва да се намира в същия домейн, което води до достъпност на страницата.чрез HTTP или HTTPS.

    Предаване от javascript на скрипта на сървъра

    Функцията, която обработва отговора (например, processReqChange), трябва да може да декомпресира и обработи получения XML. Тази диаграма показва как данните се предават от javascript на скрипта на сървъра и обратно. Принципът е съвсем прост. Върнат XML документ ще съдържа една или повече команди, които се изпълняват последователно - за генериране на сигнали, за промяна на стойностите на формуляра или за управление на DOM. Това се прави чрез функцията processReqChange.

    Налични команди

    В общо седем различни команди, които могат да бъдат извикани от библиотеката на обекта:
  • сигнал (съобщение) - показване на JavaScript предупреждението.
  • setvalue (target, value) - задаване на стойността на полето за формуляр с идентификатора на целта.
  • setdefault (target) - нулиране на стойността на полето за формуляр.
  • focus (target) - задаване на фокуса в полето за формуляр.
  • setcontent (цел, съдържание) - задайте вътрешния HTML елемент на HTML.
  • setstyle (target, property value) - задаване на стила на HTML елемент.
  • setproperty (target, property value) - задайте свойството на HTML елемент.
  • Във всеки случай целта е идентификатор, който се отнася до елемент от HTML страница. Други стойности са текст или HTML за добавяне на допълнителни параметри към функцията processReqChange.

    Генериране на XML отговор, използвайки PHP

    Характеристиките, описани тук, са предназначени за PHP програмисти, които не искат да знаят прекалено много за javascript, защото след изпращането на първата заявка не се изисква допълнителен JScript. XML файл (той генерира предупреждение, например, за случай, когато кликнете върху връзката по-долу създава прозорецпредупреждение JS с текста "здравей свят!") е важна първа стъпка във всеки програмен език.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_604.jpeg
    текст в елемента на страницата. В този случай, изходът с идентификатор 2 ще бъде показан в div. Вместо div, можете лесно да зададете съдържанието на заглавието, абзаца или клетката на таблицата: example2 hello world.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_855.jpeg
    Както беше споменато по-рано, можете да вмъкнете HTML, а не текст и да върнете динамични, а не статични данни. Следната XML заявка се генерира с помощта на PHP, за да вмъкнете текущата дата и час.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_676.jpeg
    Internet Explorer ще бъде кеширан Отговорете на XML и го използвайте за бъдещи заявки. Това означава, че изходът никога няма да се промени. Други браузъри всеки път предизвикват нова заявка. Всички браузъри, поддържащи DOM, приемат backgroundColor, защото името на стила има цвят на фона, който е по-правилен и работи само в някои от тях. Стойностите могат да се генерират "в движение" чрез PHP или друг сървър. Първата команда задава свойството фон-цвят в полето hello world на жълто (# ff0), а второто на случайно (червено, зелено или синьо). Екипите са свързани най-вече с формирането на полета - настройка /нулиране на стойности в полето и настройка на фокуса. Те са полезни при проверка на формата на сървъра в реално време, когато трябва да прегледате данните без рестартиране.текущата страница.

    Създаване на XML чрез javascript

    Съществуват няколко различни начина за извикване на функцията loadXMLDoc. Например, позоваването на формата се приема като първи параметър, а след това две допълнителни променливи. Успешното повикване до loadXMLDoc връща стойността "да". onsubmit handler ще върне "лъжа". Като анулира действието по подразбиране, то ще представи събитие, което иначе би причинило формуляр. Последващото изпълнение се извършва с помощта на Ajax, така че браузърът не трябва да зарежда нова страница. Неуспешното повикване до loadXMLDoc връща стойност "на лъжа". манипулаторът onsubmit ще върне "true", което ще доведе до представяне на формуляра в нормален режим. По-нататъшното изпълнение се извършва с помощта на nonAjaxTarget.html.
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest-storya-stvorennya-standarti-prikladi_567.jpeg
    Предотвратява кеширането стойностите на отговор на бисквитката на javascript xmlhttprequest. Някои браузъри ще кешират GET заявки, направени с помощта на XHR, така че след първото извикване следното от същия скрипт да рестартира първия отговор. За да заобиколите това, трябва да добавите произволен низ или временен етикет към искането, както е показано на снимката по-долу:
    [thumb] http://hi-news.pp.ua/uploads/posts/2018-12/javascript-xmlhttprequest- storya-stvorennya-standarti-prikladi_288.jpeg
    Ако скриптът винаги връща един и същ отговор за дадените параметри, тогава няма нужда да се притеснявате за това, тъй като кеширането се използва за ускоряване на програмата. Обобщавайки колко лесно е да се работи с Ajax с помощта на тази структура, трябва само да завършите следнотоДействия:
  • Създайте скрипт от страна на сървъра, за да приеме GET или POST или COOKIE параметри и да върнете валиден XML файл.
  • Определете JS файла xmlhttp.js на страницата.
  • Използвайте javascript, за да се обадите.
  • Обратните повиквания на Ajax могат да бъдат направени чрез създаване на инстанция на XHR обект в JScript клиент. javascript XMLHttpRequest get може да се използва за директно извикване на сървърни обекти, като страници и уеб услуги. Те ще съхраняват или завъртат данните. Ajax първоначално е акроним за асинхронни JS и XML. "Асинхронно" означава, че няколко събития се случват абсолютно независимо един от друг. Веднага след като клиентът направи обратно извикване на Ajax към сървъра, той не трябва да чака отговор, тъй като може да продължи да използва уеб приложението, докато обработва заявката. След това сървърът ще отговори на клиента и той ще го обработи според нуждите.

    Свързани публикации