Ajax и будущее Java Script

AJAX и будущее JavaScript

Константин Кичинский[email protected]

http://zelo-stroi.livejournal.com

JavaScript

AJAX | Asynchronous JavaScript and XML

Ajax

• XMLHttpRequest + XML

Ajax

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

if( !window.XMLHttpRequest ) XMLHttpRequest = function(){

try{

return new ActiveXObject("MSXML3.XMLHTTP")

} catch(e){}

try{

return new ActiveXObject("MSXML2.XMLHTTP.3.0")

}catch(e){}

try{

return new ActiveXObject("Msxml2.XMLHTTP")

}catch(e){}

try{

return new ActiveXObject("Microsoft.XMLHTTP")

}catch(e){}

throw new Error("Could not find an XMLHttpRequest alternative.")

};

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

• DOM описывает способы навигации по документу и методы доступа к значениям элементов и их атрибутам.

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

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);

}

}

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>'';

…

}

• JSON — JavaScript Object Notation, простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером, основанный на подмножестве языка JavaScript.

• var jsObject = eval(' (' + jsonString + ') ');

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

}]

}

function parseFilesJSONDocument(filesJSONDoc) {

var files = filesJSONDoc.parseJSON().files;

for (var iFile = 0; iFile < files.length; iFile++) {

addFile(files[iFile]);

}

}

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

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>'';

…}

• EX4 – начиная с JavaScript 1.7

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

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

JavaScript 2 – ECMAScript 4

ООП

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


ООП• 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)


ООП

• interface I { function meth(int) : int

}

class B implements I {

public function meth(a : int) : int {

return a * a

}

}

JavaScript 2 -- ECMAScript 4

Пакеты

• Модульность приложения поддерживается пакетами (package) и пространствами имен (namespace).


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)


package org.mozilla.venkman {

class Debugger { . . . }

class Inspector { . . . }

class StackWalker { . . . }

}

import org.mozilla.venkman.

// use Debugger, Inspector, etc. freely


Строгие типы данных

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


Оптимизация времени и пространства

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


Данные

• Параметризованные классы,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

}


• Структурные типы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

}


• Групповые присваивания// swap, rotate, permute in general [a, b] = [b, a] [p, q, r] = [q, r, p]

• // destructure a triple into fresh varsvar [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)


• Итераторы

• let it = Iterator(["meow", "oink", "woof"])

• it.next() returns [0, "meow"]

• it.next() returns [1, "oink"]

• it.next() returns [2, "woof"]

• for (let i in it) print(i)


• Генераторы

• 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


• Заполнение массивов

• let squares = [i * i for (i in count(10))] print(squares) => "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)]


• Операторы

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

0.1 + 0.2 === 0.3,

а не 0.30000000000000004

• http://www.ecmascript.org/es4/spec/overview.pdf

Ajax и будущее Java Script

Technology

Transcript of Ajax и будущее Java Script