Ajax и будущее Java Script

2,814 views
2,721 views

Published on

Ajax и будущее Java Script, Константин Кичинский, Клуб MAInfo.ru

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,814
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax и будущее Java Script

  1. 1. AJAX и будущее JavaScript Константин Кичинский kichinsky@mainfo.ru http://zelo-stroi.livejournal.com
  2. 2. JavaScript
  3. 3. AJAX | Asynchronous JavaScript and XML
  4. 4. Ajax • XMLHttpRequest + XML
  5. 5. Ajax • XMLHttpRequest — API, предоставляемое браузером и доступное через JavaScript, позволяющее передавать XML и другие текстовые данные между клиентом и сервером посредством протокола HTTP путем установления независимых и асинхронных соединений между веб- страницей на клиенте и веб-сервером.
  6. 6. function ajax(url, vars, callbackFunction){ var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(quot;MSXML2.XMLHTTP.3.0quot;); request.open(quot;POSTquot;, url, true); request.setRequestHeader(quot;Content-Typequot;, quot;application/x-www-form-urlencodedquot;); request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200) { if (request.responseText){ ext); callbackFunction(request.responseT } } } request.send(vars); }
  7. 7. if( !window.XMLHttpRequest ) XMLHttpRequest = function(){ try{ return new ActiveXObject(quot;MSXML3.XMLHTTPquot;) } catch(e){} try{ return new ActiveXObject(quot;MSXML2.XMLHTTP.3.0quot;) }catch(e){} try{ return new ActiveXObject(quot;Msxml2.XMLHTTPquot;) }catch(e){} try{ return new ActiveXObject(quot;Microsoft.XMLHTTPquot;) }catch(e){} throw new Error(quot;Could not find an XMLHttpRequest alternative.quot;) };
  8. 8. • DOM — Document Object Model, способ представления html- или xml-документа в виде объектной модели, не зависящий от платформы и языка реализации. • DOM описывает способы навигации по документу и методы доступа к значениям элементов и их атрибутам.
  9. 9. <?xml version=”1.0” ?> <files> <file author='Constantin'> <address>http://files.mainfo.ru/infa_labs1.zip</address> <description>Задания на лабораторную работу №1 по информатике</description> </file> … <file author='Constantin'> <address>http://files.mainfo.ru/infa_labs10.zip</address> <description>Задания на лабораторную работу №10 по информатике</description> </file> </files>
  10. 10. function parseFilesXMLDocument(filesXMLDoc) { var files = filesXMLDoc.getElementsByTagName('files').item(0); for (var iFile = 0; iFile < files.childNodes.length; iFile++) { var file = files.childNodes.item(iFile); file.author = file.getAttribute('author'); file.address = file.getElementsByTagName(' address').item(0).data; file.description = file.getElementsByTagName('description').item(0).data; addFile(file); } }
  11. 11. function addFile(file) { var fileHTML = ''<div class='file'>'' + ''<span class='description'>'' + file. description + ''</span'' + ''<span class='author'>'' + file.author + ''</span>'' + ''<span class='download'>'' + ''<a href=' '' + file.address + '''>скачать</a>''; … }
  12. 12. • JSON — JavaScript Object Notation, простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером, основанный на подмножестве языка JavaScript. • var jsObject = eval(' (' + jsonString + ') ');
  13. 13. { files: [ { author: 'Constantin', address: 'http://files.mainfo.ru/infa_labs1.zip', description: 'Задания на лабораторную работу №1 по информатике'; }, … { author: 'Constantin', address: 'http://files.mainfo.ru/infa_labs10.zip', description: 'Задания на лабораторную работу №10 по информатике'; } ] }
  14. 14. function parseFilesJSONDocument(filesJSONDoc) { var files = filesJSONDoc.parseJSON().files; for (var iFile = 0; iFile < files.length; iFile++) { addFile(files[iFile]); } }
  15. 15. • E4X — ECMAScript for XML, расширение языков семества ECMASCript (включая JavaScript) для нативной (встроенной) поддержки работы с XML, позволяющей работать с XML документами, учитывая их семантику.
  16. 16. function parseFilesE4XDocument(filesE4XDoc) { for each (var file in filesE4XDoc.files) { addFile(file); } } function addFile(file) { var fileHTML = ''<div class='file'>'' + ''<span class='description'>'' + file.description + ''</span'' + ''<span class='author'>'' + file.@author + ''</span>'' + ''<span class='download'>'' + ''<a href=' '' + file.address + '''>скачать</a>''; … }
  17. 17. • EX4 – начиная с JavaScript 1.7 • JSON – скоро непосредственно в JavaScript, сейчас – json.org
  18. 18. Каким он будет?
  19. 19. JavaScript 2 – ECMAScript 4 ООП • ECMASript4 поддерживает объектно- ориентированное программирование введением таких структур, как классы (class) и интерфейсы (interface) — подобно языку Java.
  20. 20. JavaScript 2 – ECMAScript 4 ООП • class C extends B { function C(m) { mem = m } public function getmem() { return mem } private var mem : Object } var c : C = new C(new Date)
  21. 21. JavaScript 2 – ECMAScript 4 ООП • interface I { function meth(int) : int } class B implements I { public function meth(a : int) : int { return a * a } }
  22. 22. JavaScript 2 -- ECMAScript 4 Пакеты • Модульность приложения поддерживается пакетами (package) и пространствами имен (namespace).
  23. 23. JavaScript 2 -- ECMAScript 4 namespace improved { class C { public function frob(): int {...} public improved function frob(alpha: double): double { ... } } } c.improved::frob(1.2) use namespace improved . . . c.frob(alpha)
  24. 24. JavaScript 2 -- ECMAScript 4 package org.mozilla.venkman { class Debugger { . . . } class Inspector { . . . } class StackWalker { . . . } } import org.mozilla.venkman. // use Debugger, Inspector, etc. freely
  25. 25. JavaScript 2 -- ECMAScript 4 Строгие типы данных • Программирование больших проектов упрощается за счет введения строгих типов данных, определяемых классами и интерфейсами.
  26. 26. JavaScript 2 -- ECMAScript 4 Оптимизация времени и пространства • Строгая типизация облегчает раннее связывание точек вызова и вызываемых из них методов, что потенциально уменьшает стоимость вызова методов по сравнению с ES3.
  27. 27. JavaScript 2 -- ECMAScript 4 Данные • Параметризованные классы, Array[[T]] для Array типа T • объекты с геттер и сеттер-методами, • Типизация функций function f(a : int, b : String, c : Object) : RetType { // arguments are guaranteed to match types // return value must convert to or match RetType }
  28. 28. JavaScript 2 -- ECMAScript 4 • Структурные типы type Q = {p: int, q: String} type R = {p: int, q: String, r: Boolean} type A = [int, String, Boolean, Object] • Функциональный тип данных type F = function (int, String, Boolean): Object type G = function (int, Object, Object): Number Объединения type U = (R, A, F) • function f(a : int, b : String, ...rest) { // rest is of type Array, contains actual trailing arguments }
  29. 29. JavaScript 2 -- ECMAScript 4 • Групповые присваивания // swap, rotate, permute in general [a, b] = [b, a] [p, q, r] = [q, r, p] • // destructure a triple into fresh vars var [s, v, o] = db.getTriple() • let {'Title': title, 'Height': height, 'Width': width} = jsonResult • for (let [key, {'Title':title, 'FileSize':size}] in dict) print(key, title, size)
  30. 30. JavaScript 2 -- ECMAScript 4 • Итераторы • let it = Iterator([quot;meowquot;, quot;oinkquot;, quot;woofquot;]) • it.next() returns [0, quot;meowquot;] • it.next() returns [1, quot;oinkquot;] • it.next() returns [2, quot;woofquot;] • for (let i in it) print(i)
  31. 31. JavaScript 2 -- ECMAScript 4 • Генераторы • function count(n : int) { for (let i = 0; i < n; i++) yield i } • var gen = count(10) • gen.next() returns 0; . . .; gen.next() returns 9 gen.next() throws StopIteration
  32. 32. JavaScript 2 -- ECMAScript 4 • Заполнение массивов • let squares = [i * i for (i in count(10))] print(squares) => quot;0,1,4,9,...,81« • let odd_squares = [i * i for (i in count(10)) if (i % 2)] • return [i * j for (i in it1) for (j in it2) if (i != j)]
  33. 33. JavaScript 2 -- ECMAScript 4 • Операторы • class Complex { var real:Number, imag:Number; public static function +(a:Object, b:Object):Complex { if (a is Complex && b is Complex) return new Complex(a.real + b.real, a.imag + b.imag) if (b == null) return (a is Complex) ? a : new Complex(a) return intrinsic::+(a, b) } . . . }
  34. 34. 0.1 + 0.2 === 0.3, а не 0.30000000000000004
  35. 35. • http://www.ecmascript.org/es4/spec/overvie w.pdf

×