lab_9js.htm 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Лабораторная работа 18 (9 JavaScript): Технология AJAX</TITLE>
  4. <LINK REL=STYLESHEET TYPE="text/css" HREF="heads.css">
  5. </HEAD>
  6. <BODY>
  7. <H1> ЛАБОРАТОРНАЯ РАБОТА № 18 (9 JavaScript)</H1>
  8. <H2> <SPAN CLASS="beg" >Тема: </SPAN>Технология AJAX</H2>
  9. <H2> <SPAN CLASS="beg" >Цель: </SPAN>
  10. Изучение особенностей технологии AJAX для получения данных с сервера</H2>
  11. <A NAME="beg"></A>
  12. <H3>ОГЛАВЛЕНИЕ</H3>
  13. <A CLASS="com" HREF="#2">1 Технология AJAX <BR>
  14. <A CLASS="com" HREF="#2">1.1 Особенности технологии AJAX<BR>
  15. <A CLASS="com" HREF="#1.2">1.2 Использование объекта XMLHttpRequest<BR>
  16. <A CLASS="com" HREF="#1.2.1">1.2.1 Создание объекта xmlHttp<BR>
  17. <A CLASS="com" HREF="#1.2.2">1.2.2 Формирование запроса к серверу<BR>
  18. <A CLASS="com" HREF="#1.2.3">1.2.3 Получение данных из сервера<BR>
  19. <A CLASS="com" HREF="#prim1">Пример 1<BR>
  20. <A CLASS="com" HREF="#prim2">Пример 2<BR>
  21. <A CLASS="com" HREF="#ind">Индивидуальные задания<BR>
  22. <A NAME="1"></A>
  23. <H4>1 Технология AJAX</H4>
  24. <H4 CLASS="pod">1.1 Особенности технологии AJAX</H4>
  25. <P>AJAX (Asynchronous JavaScript And XML - асинхронный JavaScript и XML)
  26. представляет собой технологию, позволяющую при необходимости в фоновом режиме
  27. (не прерывая работы пользователя и незаметно для него) выполнять запросы к
  28. серверу и получать дополнительные данные для обновления отдельных частей
  29. Web-страницы, тем самым исключая необходимость повторной загрузки страницы.
  30. Например, выполнять на стороне сервера проверку правильности заполнения данных
  31. пользоваетелем по мере их ввода.<BR>
  32. <SPAN CLASS="txt_abz">Без </SPAN>использования технологии AJAX для решения этой
  33. задачи имеются такие возможности:
  34. <UL CLASS="list">
  35. <LI>выполнять проверку на стороне сервера, но в этом случае необходимо
  36. формировать новую Web-страниц, что увеличивает загрузку сети и увеличивает
  37. время ожидания клиента;
  38. <LI>выполнять проверку на стороне клиенте, но при этом зачастую необходимо
  39. хранить большой объем информации на компьютере клиента.
  40. </UL>
  41. <P>Для применения AJAX необходимы следующие компоненты:<BR>
  42. <UL CLASS="list">
  43. <LI>JavaScript (основной компонент);
  44. <LI>объект XMLHttpRequest;
  45. <LI>серверные технологии (например, PHP).
  46. </UL>
  47. <P>Первоначально технологию AJAX разработала фирма Microsoft как объект ActiveX
  48. для браузера Internet Explorer. Затем фирма Mozilla создала объект
  49. XMLHttpRequest с (почти) идентичными API, который в настоящее время
  50. поддерживается всеми современными браузерами.<BR>
  51. <SPAN CLASS="txt_abz">Рекомендации </SPAN>организации W3C аналогичной
  52. функциональности пока не применены ни в одном браузере.
  53. <A NAME="1.2"></A>
  54. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  55. <TR><TD ALIGN=right>
  56. <A CLASS="out" HREF="#beg">Оглавление</A>
  57. </TABLE>
  58. <H4 CLASS="pod">1.2 Использование объекта XMLHttpRequest</H4>
  59. <P>Объект <SPAN CLASS="svoj">XMLHttpRequest</SPAN> дает возможность отправлять
  60. асинхронные HTTP-запросы из кода JavaScript серверу, принимать от него ответы и
  61. обновлять отдельные части Web-страницы, не прерывая работу пользователя. Имеет
  62. следующие методы и свойства:
  63. <UL CLASS="list">
  64. <LI>abort() - останавливает выполнение текущего запроса;
  65. <LI>getAllResponseHeaders() - возвращает все HTTP-заголовки ответа в виде
  66. строки;
  67. <LI>getResponseHeader(header) - возвращает указанный HTTP-заголовок ответа в
  68. виде строки;
  69. <LI>open(method, URL [, async_flag [, userName [. password ]]]) -
  70. инициализирует параметры запроса, где:
  71. <UL CLASS="list2">
  72. <LI>method - один из методов обмена данными с сервером: наиболее часто
  73. используются GET и POST, но разрешены также методы HEAD, PUT или DELETE;
  74. <LI>URL - абсолютный или относительный URL-адрес сервера;
  75. <LI>async_flag (необязательнлый параметр) - значение true означает асинхронный режим работы с сервером:
  76. скрипт, послав запрос серверу, продолжает свою работу (значение по умолчанию),
  77. значение false означает синхронный режим работы с сервером: скрипт, послав
  78. запрос серверу, приостанавливает свою работу, ожидая ответа от сервера;
  79. <LI>userName (необязательнлый параметр) - имя пользователя для аутентификации,
  80. если параметр равен Null или "" и сайт требует аутентификации, то появляется
  81. окно login;
  82. <LI>password (необязательнлый параметр) - пароль пользователя для
  83. аутентификации, если равен Null или "", то игнорируется;
  84. </UL>
  85. <LI>send(data) - выполняет запрос, данные указываются только для методов POST
  86. или PUT;
  87. <LI>setRequestHeader(level, value) - указывает имя и значение HTTP-заголовка в
  88. запросе;
  89. <LI>onreadystatechange - используется для установки функции обратного вызова,
  90. которая будет обслуживать изменения состояния запроса;
  91. <LI>readyState - возвращает состояние запроса:
  92. <UL CLASS="list2">
  93. <LI>0 - не инициализирован;
  94. <LI>1 - выполняется подготовка запроса;
  95. <LI>2 - запрос отправлен;
  96. <LI>3 - выполняется обмен;
  97. <LI>4 - обмен завершен.
  98. </UL>
  99. <LI>responseText - возвращает ответ сервера в виде строки;
  100. <LI>responseXML - возвращает ответ сервера в формате XML;
  101. <LI>responseStream - возвращает ответ сервера в виде двоичных данных;
  102. <LI>status - возвращает HTTP-код состояния запроса;
  103. <LI>statusText - возвращает сообщение о состоянии запроса.
  104. </UL>
  105. <P>Использование методов и свойств объекта <SPAN CLASS="svoj">XMLHttpRequest</SPAN>
  106. приведено в примере </SPAN><A CLASS="pri" HREF=#prim1>№ 1</A></SPAN>, в котором
  107. выполняется получение текстовых данных из локального сервера, и в примере
  108. </SPAN><A CLASS="pri" HREF=#prim2>№ 2</A></SPAN>, в котором выполняется
  109. получение случайных чисел из удаленного сервера. В этих примерах осуществляется:
  110. <UL CLASS="list">
  111. <LI>создание объекта xmlHttp;
  112. <LI>формирование запроса к серверу;
  113. <LI>получение данных из сервера.
  114. </UL>
  115. <P>
  116. <A NAME="1.2.1"></A>
  117. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  118. <TR><TD ALIGN=right>
  119. <A CLASS="out" HREF="#beg">Оглавление</A>
  120. </TABLE>
  121. <H4 CLASS="pod">1.2.1 Создание объекта xmlHttp</H4>
  122. <P>Создание объекта <SPAN CLASS="svoj">xmlHttp</SPAN> осуществляется с помощью
  123. функции <SPAN CLASS="svoj">createxmlHttp()</SPAN>.
  124. Поскольку объект <SPAN CLASS="svoj">xmlHttp</SPAN> создается в обоих примерах
  125. (</SPAN><A CLASS="pri" HREF=#prim1>№ 1</A></SPAN> и
  126. </SPAN><A CLASS="pri" HREF=#prim2>№ 2</A></SPAN>), оператор присвоения,
  127. вызывающий функцию <SPAN CLASS="svoj">createxmlHttp()</SPAN> и сама функция
  128. описаны во внешнем файле <SPAN CLASS="svoj">ajax.js</SPAN>:<BR><BR>
  129. <SPAN CLASS="html">xmlHttp=createxmlHttp();<BR>
  130. <SPAN CLASS="html">function createxmlHttp()<BR>
  131. <SPAN CLASS="html">{<BR>
  132. <SPAN CLASS="html">try<BR>
  133. <SPAN CLASS="html">{<BR>
  134. <SPAN CLASS="html">var xmlHttp=new XMLHttpRequest(); //var делает переменную локальльной<BR>
  135. <SPAN CLASS="html">}<BR>
  136. <SPAN CLASS="html">catch(e)<BR>
  137. <SPAN CLASS="html">{<BR>
  138. <SPAN CLASS="html">xmlHttp=new ActiveXObject("Microsoft.XMLHttp");<BR>
  139. <SPAN CLASS="html">}<BR>
  140. <SPAN CLASS="html">if(!xmlHttp) alert("Объект xmlHttp не создан");<BR>
  141. <SPAN CLASS="html">else return xmlHttp;<BR>
  142. <SPAN CLASS="html">}<BR>
  143. <P> Функция <SPAN CLASS="svoj">createxmlHttp()</SPAN> содержит конструкцию
  144. <SPAN CLASS="svoj">try/catch</SPAN>, которая используется для проверки того,
  145. выполняется ли некоторый код JavaScpipt без ошибок:<BR>
  146. <SPAN CLASS="html">try<BR>
  147. <SPAN CLASS="html">{<BR>
  148. <SPAN CLASS="html">// Проверяемый код<BR>
  149. <SPAN CLASS="html">}<BR>
  150. <SPAN CLASS="html">catch(e)<BR>
  151. <SPAN CLASS="html">{<BR>
  152. <SPAN CLASS="html">// Обработка ошибки<BR>
  153. <SPAN CLASS="html">}<BR>
  154. <P>Проверяемый код помещается в блок <SPAN CLASS="svoj">try{}</SPAN>. Если при
  155. выполнении кода произошла ошибка (возникла исключительная ситуация), то
  156. управление передается блоку <SPAN CLASS="svoj">catch(e){}</SPAN>, который
  157. перехватывает возникшее исключение и обрабатывает ошибку. При этом исключение
  158. не доходит до интерпретатора JavaScpipt и поэтому не сообщается пользователю.
  159. Если в блоке <SPAN CLASS="svoj">try{}</SPAN> код выполняется без ошибок, то
  160. блок <SPAN CLASS="svoj">catch(e){}</SPAN> управление не получает вовсе.<BR>
  161. <SPAN CLASS="txt_abz">Как </SPAN>отмечалось выше, современные браузеры
  162. поддерживают работу с <SPAN CLASS="svoj">XMLHttpRequest</SPAN>. Однако это не
  163. относится к браузерам IE версии 6 и ниже. Поэтому функция
  164. <SPAN CLASS="svoj">createxnlHttp()</SPAN> сначала пытается создать объект
  165. <SPAN CLASS="svoj">xmlHttp</SPAN> с помощью класса
  166. <SPAN CLASS="svoj">XMLHttpRequest</SPAN> (блок <SPAN CLASS="svoj">try{}</SPAN>).
  167. Если при этом возникает исключительлная ситуация, управление передается в блок
  168. <SPAN CLASS="svoj">catch(e){}</SPAN>, где делается попытка создать объект
  169. <SPAN CLASS="svoj">xmlHttp</SPAN> уже с помощью объекта
  170. <SPAN CLASS="svoj">ActiveXObject</SPAN>.<BR>
  171. <SPAN CLASS="txt_abz">Если </SPAN>объект и при этом создать не удается, то
  172. выводится сообщение о том, что объект <SPAN CLASS="svoj">xmlHttp</SPAN> не
  173. создан.
  174. <A NAME="1.2.2"></A>
  175. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  176. <TR><TD ALIGN=right>
  177. <A CLASS="out" HREF="#beg">Оглавление</A>
  178. </TABLE>
  179. <H4 CLASS="pod">1.2.2 Формирование запроса к серверу</H4>
  180. <P>После создания объекта <SPAN CLASS="svoj">xmlHttp</SPAN> можно использовать
  181. его методы и свойства для организации запроса к серверу. Это делается с помощью
  182. функции <SPAN CLASS="svoj">process()</SPAN>, которая как и функция
  183. <SPAN CLASS="svoj">createxnlHttp()</SPAN> используется в примерах
  184. </SPAN><A CLASS="pri" HREF=#prim1>№ 1</A></SPAN> и
  185. </SPAN><A CLASS="pri" HREF=#prim2>№ 2</A></SPAN> и хранится в файле
  186. <SPAN CLASS="svoj">ajax.js</SPAN>:<BR><BR>
  187. <SPAN CLASS="html">function process()<BR>
  188. <SPAN CLASS="html">{<BR>
  189. <SPAN CLASS="html">if(xmlHttp)<BR>
  190. <SPAN CLASS="html">{<BR>
  191. <SPAN CLASS="html">try<BR>
  192. <SPAN CLASS="html">{<BR>
  193. <SPAN CLASS="html">xmlHttp.open("GET",serverAddr+serverPar,true);<BR>
  194. <SPAN CLASS="html">xmlHttp.onreadystatechange=handleStateChange;<BR>
  195. <SPAN CLASS="html">xmlHttp.send(null);<BR>
  196. <SPAN CLASS="html">}<BR>
  197. <SPAN CLASS="html">catch(e)<BR>
  198. <SPAN CLASS="html">{<BR>
  199. <SPAN CLASS="html">alert("Невозможно соединится с сервером:\n"+e.toString()+
  200. "\n"+e.description);<BR>
  201. <SPAN CLASS="html">}<BR>
  202. <SPAN CLASS="html">}<BR>
  203. <SPAN CLASS="html">}<BR>
  204. <P>Функция <SPAN CLASS="svoj">process()</SPAN> сначала проверяет, создан ли
  205. объект <SPAN CLASS="svoj">xmlHttp</SPAN>. Если создан, то выполняются следующие
  206. действия:
  207. <UL CLASS="list">
  208. <LI>С помощью метода <SPAN CLASS="svoj">open()</SPAN> задаются значения
  209. параметров соединения с сервером:
  210. <UL CLASS="list2">
  211. <LI>метод - GET;
  212. <LI>адрес сервера и передаваемые параметры указываются с помощью переменных
  213. serverAddr и serverPar;
  214. <LI>режим обмена - асинхронный.
  215. </UL>
  216. <LI>С помощью свойства <SPAN CLASS="svoj">onreadystatechange</SPAN> указывается
  217. обработчик изменений состояния запроса - функция handleStateChange;
  218. <LI>С помощью метода send() посылается запрос на сервер;
  219. <LI>С помощью конструкции try{}/catch(e){} проверяется, не возникла ли ошибка
  220. при выполнении вышеописанных действий по созданию и отправлению запроса на
  221. сервер.
  222. </UL>
  223. <P> При возникновении исключительной ситуации на экран выводится сообщение
  224. о невозможности соединения с сервером, к которому добавляется перехваченное
  225. сообщение <SPAN CLASS="svoj">e</SPAN>, преобразованное в строку.<BR>
  226. <SPAN CLASS="txt_abz">Имеется </SPAN>две возможности преобразования
  227. <SPAN CLASS="svoj">e</SPAN>:
  228. <UL CLASS="list">
  229. <LI>с помощью метода toString();
  230. <LI>с помощью свойства description.
  231. </UL>
  232. <P>Функция <SPAN CLASS="svoj">process()</SPAN> использует обе эти возможности.
  233. При этом в случае, например, неправильного задания URL-адреса сервера на экране появляются
  234. следующие сообщения:
  235. <P CLASS="ba"><I>Невозможно соединится с сервером<BR>
  236. [object Error]<BR>
  237. Отказано в доступе</I>
  238. <A NAME="1.2.3"></A>
  239. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  240. <TR><TD ALIGN=right>
  241. <A CLASS="out" HREF="#beg">Оглавление</A>
  242. </TABLE>
  243. <H4 CLASS="pod">1.2.3 Получение данных из сервера</H4>
  244. <P>Получение данных из сервера выполняется по разному в примере
  245. <SPAN><A CLASS="pri" HREF=#prim1>№ 1</A></SPAN> и в примере
  246. <SPAN><A CLASS="pri" HREF=#prim2>№ 2</A></SPAN>, поэтому будет рассмотрено
  247. отдельно.
  248. <A NAME="prim1"></A><BR>
  249. <P><A CLASS="out" HREF="js_pr8-1.htm">Пример 1</A><BR><BR>
  250. <SPAN CLASS="html">&lt;HTML&gt;<BR>
  251. <SPAN CLASS="html">&lt;HEAD&gt;<BR>
  252. <SPAN CLASS="html">&lt;TITLE&gt;Чтение текста из сервера с помощью AJAX&lt;/TITLE&gt;<BR>
  253. <SPAN CLASS="html">&lt;SCRIPT SRC="ajax.js"&gt;&lt;/SCRIPT&gt;<BR>
  254. <SPAN CLASS="html">&lt;SCRIPT&gt;<BR>
  255. <SPAN CLASS="html">serverAddr="http://zykov/data.txt";<BR>
  256. <SPAN CLASS="html">serverPar="";<BR>
  257. <SPAN CLASS="html">function handleStateChange()<BR>
  258. <SPAN CLASS="html">{<BR>
  259. <SPAN CLASS="html">myDiv=document.getElementById("div");<BR>
  260. <SPAN CLASS="html">if(xmlHttp.readyState==1)<BR>
  261. <SPAN CLASS="html">{<BR>
  262. <SPAN CLASS="html">myDiv.innerHTML+="Состояние запроса:1 (подготовка к отправлению)";<BR>
  263. <SPAN CLASS="html">try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"&lt;BR/&gt;"; }<BR>
  264. <SPAN CLASS="html">catch(e) { myDiv.innerHTML+="&lt;BR/&gt;"; }<BR>
  265. <SPAN CLASS="html">}<BR>
  266. <SPAN CLASS="html">else<BR>
  267. <SPAN CLASS="html">{<BR>
  268. <SPAN CLASS="html">if(xmlHttp.readyState==2)<BR>
  269. <SPAN CLASS="html">{<BR>
  270. <SPAN CLASS="html">myDiv.innerHTML+="Состояние запроса:2 (отправлен)";<BR>
  271. <SPAN CLASS="html">try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"&lt;BR/&gt;"; }<BR>
  272. <SPAN CLASS="html">catch(e) { myDiv.innerHTML+="&lt;BR/&gt;"; }<BR>
  273. <SPAN CLASS="html">}<BR>
  274. <SPAN CLASS="html">else<BR>
  275. <SPAN CLASS="html">{<BR>
  276. <SPAN CLASS="html">if(xmlHttp.readyState==3)<BR>
  277. <SPAN CLASS="html">{ <BR>
  278. <SPAN CLASS="html">myDiv.innerHTML+="Состояние запроса:3 (идет обмен)";<BR>
  279. <SPAN CLASS="html">try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"&lt;BR/&gt;"; }<BR>
  280. <SPAN CLASS="html">catch(e) { myDiv.innerHTML+="&lt;BR/&gt;"; }<BR>
  281. <SPAN CLASS="html">}<BR>
  282. <SPAN CLASS="html">else <BR>
  283. <SPAN CLASS="html">{<BR>
  284. <SPAN CLASS="html">if(xmlHttp.readyState==4)<BR>
  285. <SPAN CLASS="html">{<BR>
  286. <SPAN CLASS="html">myDiv.innerHTML+="Состояние запроса:4 (обмен завершен)";<BR>
  287. <SPAN CLASS="html">try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"&lt;BR/&gt;"; }<BR>
  288. <SPAN CLASS="html">catch(e) { myDiv.innerHTML+="&lt;BR/&gt;"; }<BR>
  289. <SPAN CLASS="html">if(xmlHttp.status==200)<BR>
  290. <SPAN CLASS="html">{<BR>
  291. <SPAN CLASS="html">try<BR>
  292. <SPAN CLASS="html">{<BR>
  293. <SPAN CLASS="html">resp=xmlHttp.responseText;<BR>
  294. <SPAN CLASS="html">myDiv.innerHTML+="&lt;P>Сервер передал:"+resp;<BR>
  295. <SPAN CLASS="html">}<BR>
  296. <SPAN CLASS="html">catch(e) { alert("Ошибка чтения ответа: "+e.description); }<BR>
  297. <SPAN CLASS="html">}<BR>
  298. <SPAN CLASS="html">else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}<BR>
  299. <SPAN CLASS="html">}<BR>
  300. <SPAN CLASS="html">}<BR>
  301. <SPAN CLASS="html">}<BR>
  302. <SPAN CLASS="html">}<BR>
  303. <SPAN CLASS="html">}<BR>
  304. <SPAN CLASS="html">&lt;/SCRIPT&gt;<BR>
  305. <SPAN CLASS="html">&lt;/HEAD&gt;<BR>
  306. <SPAN CLASS="html">&lt;BODY onLoad="process()"&gt;<BR>
  307. <SPAN CLASS="html">&lt;DIV ID="div" /&gt;<BR>
  308. <SPAN CLASS="html">&lt;/BODY&gt;<BR>
  309. <SPAN CLASS="html">&lt;/HTML&gt;<BR>
  310. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  311. <TR><TD ALIGN=right>
  312. <A CLASS="out" HREF="#beg">Оглавление</A>
  313. </TABLE>
  314. <P>В примере 1 осуществляется чтение текстовых данных с локального сервера с
  315. помощью технологии <SPAN CLASS="svoj">AJAX</SPAN>: в переменную
  316. <SPAN CLASS="svoj">serverAddr</SPAN> заносится URL-адрес файла
  317. локального сервера ("http://zykov/data.txt"), который содержит строку "Привет,
  318. клиент!", а в переменную <SPAN CLASS="svoj">serverPar</SPAN> - пустая строка, поскольку в этом примере
  319. данные на сервер не передаются.<BR>
  320. <SPAN CLASS="txt_abz">Поскольку </SPAN>технология <SPAN CLASS="svoj">AJAX</SPAN>
  321. требует использования Web-сервера, он должен быть запущен до выполнения примера.<BR>
  322. <SPAN CLASS="txt_abz">Необходимо </SPAN>также отметить, что текстовые данные, если
  323. они являются кириллицей, должны быть сохранены на сервере в кодировке UTF-8.<BR>
  324. <SPAN CLASS="txt_abz">Фукция <SPAN CLASS="svoj">handleStateChange()
  325. </SPAN></SPAN> с помощью свойства <SPAN CLASS="svoj">readyState</SPAN> проверяет
  326. текущее состояние запроса и при его изменении выводит на экран в тэг &lt;DIV&gt;
  327. с помощью свойства <SPAN CLASS="svoj">innerHTML</SPAN> такие данные: номер
  328. состояния, его текстовое значение и статус. Текстовое значение статуса
  329. определяется с помощью свойства <SPAN CLASS="svoj">statusText</SPAN> объекта
  330. <SPAN CLASS="svoj">xmlHttp</SPAN>. Поскольку не для всех состояний запроса оно
  331. доступно, применяется конструкция <SPAN CLASS="svoj">try/catch(e)</SPAN>.<BR>
  332. <SPAN CLASS="txt_abz">Вывод </SPAN>всех состояний запроса сделан с учебной
  333. целью. Для получения данных достаточно проанализировать состояние 4 ("обемен
  334. данными завершен"), что и сделано в примере
  335. <SPAN><A CLASS="pri" HREF=#prim2>№ 2</A></SPAN>.<BR>
  336. <SPAN CLASS="txt_abz">Затем </SPAN>в состоянии 4 с помощью свойства
  337. <SPAN CLASS="svoj">status</SPAN> определяется, нормально ли закончился обмен
  338. данными с сервером. Если статус равен 200 (текстовое значение "OK"), что
  339. означает, что операции с сервером закончились успешно, делается попытка чтение
  340. данных, возвращенных сервером. Если ошибки нет - данные выводятся на экран, в
  341. виде свойства <SPAN CLASS="svoj">innerText</SPAN> тэга &lt;DIV>.<BR>
  342. <SPAN CLASS="txt_abz">В </SPAN>случае возникновения ошибки на экран выводится
  343. сообщение "Ошибка чтения ответа" с указанием дополнительных данных с помощью
  344. свойства <SPAN CLASS="svoj">e.description</SPAN>.<BR>
  345. <SPAN CLASS="txt_abz">Если </SPAN>сервер передает другое значение статуса, что
  346. означает, что обмен произошел с ошибками, на экран выводится соответствующее
  347. сообщение с указанием статуса ошибки в текстовом виде.<BR>
  348. <SPAN CLASS="txt_abz">При </SPAN>выполнении всех операций в примере 1 без
  349. ошибок на экран будут выведены следующие данные:<BR><BR>
  350. <SPAN CLASS="htmlp">Состояние запроса:1 (подготовка к отправлению)<BR>
  351. Состояние запроса:2 (отправлен), статус: OK<BR>
  352. Состояние запроса:3 (идет обмен), статус: OK<BR>
  353. Состояние запроса:4 (обмен завершен), статус: OK<BR>
  354. <P CLASS="ba"><SPAN CLASS="htmlp">Сервер передал: Привет, клиент!</SPAN><BR>
  355. <P>Если необходимо осуществить чтение данных, находящихся на сервере в
  356. формате XML, например, из файла data.xml содержащего такие данные:
  357. <P CLASS="ba">
  358. <SPAN CLASS="html">&lt;?xml version="1.0" ?><BR>
  359. <SPAN CLASS="html"><SPAN CLASS="htmlp">&lt;name>Robert Sheckly&lt;/name>,<BR>
  360. <P CLASS="ba">необходимо, помимо указания нового адреса файла -
  361. <SPAN CLASS="svoj">serverAddr</SPAN>="http://zykov/data.xml", заменить в
  362. функции <SPAN CLASS="svoj">handleStateChange() строку
  363. <P CLASS="ba"><SPAN CLASS="html">resp=xmlHttp.responseText;<BR>
  364. <P CLASS="ba">строкой<P CLASS="ba">
  365. <SPAN CLASS="html">resp=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
  366. <P CLASS="ba">Тогда вместо сообщения
  367. <P CLASS="ba"><SPAN CLASS="htmlp">Сервер передал: Привет, клиент!</SPAN><BR>
  368. <P CLASS="ba">появится сообщение
  369. <P CLASS="ba"><SPAN CLASS="htmlp">Сервер передал: Robert Sheckly</SPAN><BR>
  370. <A NAME="prim2"></A><BR>
  371. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  372. <TR><TD ALIGN=right>
  373. <A CLASS="out" HREF="#beg">Оглавление</A>
  374. </TABLE>
  375. <P><A CLASS="out" HREF="js_pr8-2.htm">Пример 2</A><BR><BR>
  376. <SPAN CLASS="html">&lt;HTML&gt;<BR>
  377. <SPAN CLASS="html">&lt;HEAD&gt;<BR>
  378. <SPAN CLASS="html">&lt;TITLE&gt;Чтение случайных чисел из удаленного сервера с помощью AJAX/TITLE&gt;<BR>
  379. <SPAN CLASS="html">&lt;SCRIPT&gt;<BR>
  380. <SPAN CLASS="html">serverAddr="http://www.random.org/integers/";<BR>
  381. <SPAN CLASS="html">serverPar="?num=1&min=1&max=25&col=1&base=10&format=plain";<BR>
  382. <SPAN CLASS="html">function handleStateChange()<BR>
  383. <SPAN CLASS="html">{<BR>
  384. <SPAN CLASS="html">myDiv=document.getElementById("div");<BR>
  385. <SPAN CLASS="html">if(xmlHttp.readyState==4)<BR>
  386. <SPAN CLASS="html">{<BR>
  387. <SPAN CLASS="html">if(xmlHttp.status==200)<BR>
  388. <SPAN CLASS="html">{<BR>
  389. <SPAN CLASS="html">try { myDiv.innerHTML+=xmlHttp.responseText; }<BR>
  390. <SPAN CLASS="html">catch(e) { alert("Ошибка чтения ответа: "+e.toStrintg()); }<BR>
  391. <SPAN CLASS="html">}<BR>
  392. <SPAN CLASS="html">else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}<BR>
  393. <SPAN CLASS="html">}<BR>
  394. <SPAN CLASS="html">}<BR>
  395. <SPAN CLASS="html">&lt;/SCRIPT&gt;<BR>
  396. <SPAN CLASS="html">&lt;SCRIPT SRC="ajax.js"&gt;&lt;/SCRIPT&gt;<BR>
  397. <SPAN CLASS="html">&lt;/HEAD&gt;<BR>
  398. <SPAN CLASS="html">&lt;BODY onLoad="process()"&gt;<BR>
  399. <SPAN CLASS="html">&lt;DIV ID="div" /&gt;<BR>
  400. <SPAN CLASS="html">&lt;/BODY&gt;<BR>
  401. <SPAN CLASS="html">&lt;/HTML&gt;<BR>
  402. <P>В примере 2 осуществляется получение случайных чисел с удаленного сервера с
  403. помощью технологии <SPAN CLASS="svoj">AJAX</SPAN>: в переменную
  404. <SPAN CLASS="svoj">serverAddr</SPAN> заносится URL-адрес удаленного сервера
  405. ("http://www.random.org/integers/"), который снабжает клиентов настоящими
  406. случайными числами, а в переменную <SPAN CLASS="svoj">serverPar</SPAN> - строку
  407. "?num=1&min=1&max=20&col=1&base=10&format=plain", задающую значения следующих
  408. параметров запроса на получение случайных чисел:
  409. <UL CLASS="list">
  410. <LI>num - количество получаемых чисел;
  411. <LI>min - минимальное число диапазона;
  412. <LI>max - максимальное число диапазона;
  413. <LI>col - количество столбцов для вывода случайных чисел на экран;
  414. <LI>base - основание системы счисления случайных чисел;
  415. <LI>format - формат представления случайных чисел:
  416. <UL CLASS="list2">
  417. <LI>plain - в виде простого текста;
  418. <LI>html - в виде HTML-документа.
  419. </UL>
  420. </UL>
  421. <P>В отличии от примера <SPAN><A CLASS="pri" HREF=#prim1>№ 1</A></SPAN>
  422. функция <SPAN CLASS="svoj">handleStateChange()</SPAN> не содержит кода,
  423. осуществляющего вывод на экран названия и статус различных состояний запроса.<BR>
  424. <SPAN CLASS="txt_abz">В </SPAN>результате работы скрипта при каждом запросе на
  425. экран выводится одно случайное число в диапазоне от 1 до 25.
  426. <A NAME="ind"></A>
  427. <TABLE WIDTH=70% ALIGN=CENTER BORDER=0>
  428. <TR><TD ALIGN=right>
  429. <A CLASS="out" HREF="#beg">Оглавление</A>
  430. </TABLE>
  431. <H4>Индивидуальные задания </H4>
  432. <P>Отметить указанный в таблице объект и осуществить из заданной точки его движение
  433. с заданной функцией по указанному событию.
  434. <p> <table border=1 align=center width="100%" style="font:5mm;color:#00a">
  435. <tr><th>№<th>Объект<th>(X,Y)<th>Фукция F(x)<th>Куда<th>Отметка<th>Движение
  436. <tr><td>1<td>Слово<td>X=0;Y=450<td>2x+5<td>Вправо/вверх<td>onDblclick<td>onKeydown/Alt-1
  437. <tr><td>2<td>Рисунок<td>X=300;Y=400<td>25cos(x)<td>Вверх<td>onClick<td>onDblclick
  438. <tr><td>3<td>Ссылка<td>X=450;Y=220<td>40sin(3x)<td>Влево<td>onMouseover<td>onKeydown/ShiftLeft
  439. <tr><td>4<td>Таблица<td>X=600;Y=400<td>x*x/500<td>Влево/вверх<td>onMousemove><td>onKeydown/Shift-Z
  440. <tr><td>5<td>Буква<td>X=200;Y=0<td>exp(x/100)<td>Вниз<td>onContextmenu<td>onKeydown/Ctrl-5
  441. <tr><td>6<td>Рисунок<td>X=10;Y=300<td>30log(x+10)<td>Вправо<td>onClick<td>onContextmenu
  442. <tr><td>7<td>Ссылка<td>X=600;Y=200<td>10tan(x)<td>Влево<td>onDblclick<td>onKeydown/Tab-2
  443. <tr><td>8<td>Слово<td>X=50;Y=50<td>0.001x*x+x<td>Вправо/вниз<td>onMousemove<td>onKeydown/W
  444. <tr><td>9<td>Кнопка <td>X=500;Y=5<td>60sin(x*x)<td>Влево/вниз<td>onContextmenu<td>onClick<td>
  445. <tr><td>10<td>Буква<td>X=250;Y=450<td>25cos(2x+1)<td>Вверх<td>onClick<td>onContextmenu
  446. <tr><td>11<td>Кнопка<td>X=350;Y=0<td>0.5exp(x/250)<td>Вниз<td>onDblclick<td>onKeydown/1
  447. <tr><td>12<td>Ссылка <td>X=75;Y=175<td>50log(x+5)-50<td>Вправо<td>onMousemove<td>onContextmenu
  448. <tr><td>13<td>Таблица<td>X=20;Y=420<td>0.2x+45<td>Вправо/вверх<td>onMousemover<td>onKeydown/Atd>
  449. </table>