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

1. AJAX и будущее JavaScript
Константин Кичинский
kichinsky@mainfo.ru
http://zelo-stroi.livejournal.com

2. JavaScript

6. AJAX | Asynchronous
JavaScript and XML

7. Ajax
• XMLHttpRequest + XML

8. Ajax
• XMLHttpRequest — API, предоставляемое
браузером и доступное через JavaScript,
позволяющее передавать XML и другие
текстовые данные между клиентом и
сервером посредством протокола HTTP
путем установления независимых и
асинхронных соединений между веб-
страницей на клиенте и веб-сервером.

9. 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);
}

10. 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;)
};

12. • DOM — Document Object Model, способ
представления html- или xml-документа в
виде объектной модели, не зависящий от
платформы и языка реализации.
• DOM описывает способы навигации по
документу и методы доступа к значениям
элементов и их атрибутам.

13. <?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>

14. 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);
}
}

15. 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>'';
…
}

16. • JSON — JavaScript Object Notation, простой
формат обмена данными, удобный для
чтения и написания как человеком, так и
компьютером, основанный на
подмножестве языка JavaScript.
• var jsObject = eval(' (' + jsonString + ') ');

17. { 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 по информатике';
}
]
}

18. function parseFilesJSONDocument(filesJSONDoc)
{
var files = filesJSONDoc.parseJSON().files;
for (var iFile = 0; iFile < files.length; iFile++) {
addFile(files[iFile]);
}
}

19. • E4X — ECMAScript for XML, расширение
языков семества ECMASCript (включая
JavaScript) для нативной (встроенной)
поддержки работы с XML, позволяющей
работать с XML документами, учитывая их
семантику.

20. 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>'';
…
}

21. • EX4 – начиная с JavaScript 1.7
• JSON – скоро непосредственно в JavaScript,
сейчас – json.org

22. Каким он будет?

23. JavaScript 2 – ECMAScript 4
ООП
• ECMASript4 поддерживает объектно-
ориентированное программирование
введением таких структур, как классы (class)
и интерфейсы (interface) — подобно языку
Java.

24. 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)

25. JavaScript 2 – ECMAScript 4
ООП
• interface I {
function meth(int) : int
}
class B implements I {
public function meth(a : int) : int {
return a * a
}
}

26. JavaScript 2 -- ECMAScript 4
Пакеты
• Модульность приложения поддерживается
пакетами (package) и пространствами имен
(namespace).

27. 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)

28. JavaScript 2 -- ECMAScript 4
package org.mozilla.venkman {
class Debugger { . . . }
class Inspector { . . . }
class StackWalker { . . . }
}
import org.mozilla.venkman.
// use Debugger, Inspector, etc. freely

29. JavaScript 2 -- ECMAScript 4
Строгие типы данных
• Программирование больших проектов
упрощается за счет введения строгих типов
данных, определяемых классами и
интерфейсами.

30. JavaScript 2 -- ECMAScript 4
Оптимизация времени и пространства
• Строгая типизация облегчает раннее
связывание точек вызова и вызываемых из
них методов, что потенциально уменьшает
стоимость вызова методов по сравнению с
ES3.

31. 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
}

32. 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
}

33. 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)

34. 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)

35. 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

36. 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)]

37. 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) } . . . }

38. 0.1 + 0.2 === 0.3,
а не 0.30000000000000004

39. • http://www.ecmascript.org/es4/spec/overvie
w.pdf