Вы находитесь на странице: 1из 135

1

AJAX

AJAX

AJAX

AJAX

AJAX

AJAX

AJAX

AJAX

0:

labsetup.exe.
.

,
C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\

[]

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\lab1

[Start]Run

cmd[Ok]

:
netstartapache

http://localhost/ajax/labs/lab1

Apache.

AJAX
1:
XmlHttpRequest

Windows

lab11index.html

EditwithNotepad++

/*
** 1: XmlHttpRequest
**
function getXmlHttpRequest()
*/

getXmlHttpRequest(),
XmlHttpRequest,

,
.alert()

!,,
http://localhost/ajax/...,!

.:
C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

AJAX
2:

index.htmllab1

/*
** 2: ()
*/

10

getBookByNumber(bookNum),

divResultHTML

http://localhost/ajax/labs/lab1/getbooktxt.phpPHPGET
num,:

http://localhost/AJAX/labs/lab1/getbooktxt.php?num=1

<divid="divResult">&nbsp;</div>
HTML

,
:

http://localhost/AJAX/labs/lab1/index.html

AJAX
3:
AJAX

index.htmllab1

/*
** 3:
*/

showBook(),
HTML<inputid="txtNum"type="text"/>,
getBookByNumber(bookNum),

11

AJAX

12

14

15

16

17

18

2.1
1:

GET

Windowslab2.11

index.htmlEditwith
Notepad++

:
/*
** 1
*/

fillCategories(),
getcategories.php

,,

::,1:Web

optionsHTML
<selectid="selCategory"></select>

window.onload,
:
//
window.onload = function()
{
fillCategories();
}

,:
C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

19

20

21

2.2
1:

POST

Windowslab2.2

index.htmlEditwith
Notepad++

:
/*
** 2
*/

22

showBooks(),selCategory
POSTpostbooksbycat.php

cat,
.
2.1

postbooksbycat.php:
||

HTML
<tableid="tableBooks"></table>

showBooks()onckick
<buttononclick=""></button>

,
2:

HEAD

index.html

img:
<div id="divBookInfo">
<img src="" alt="" />
</div>

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\images

HEAD

,,alt
,
ContentLengthHEAD

23

24

.
JSON

JSON

26

JSON

27

JSON

28

JSON

29

JSON

30

JSON

31

JSON

32

JSON

3.1
1:

Windowslab31

index.html,
EditwithNotepad++

HTML

<form id="frmLogin" onsubmit="return false" class="block">


,
visibility:hidden

[](HTML),
,
visibility:visible

showLoginForm()
/*
** 1. frmLogin
** "" divUsers.
*/

[]

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

33

JSON
2:

UserInfo()Ticket()
UserInfo,
loginpasswordJSON
user_auth.php.
Ticket(),idvalid
,true,.

.,
.

/*
** 2. ...
*/

34

validateUser()

UserInfologinpassword

JSONPOST
user_auth.php.Contenttype:text/plainContent
length,

.
valid.true
.

valid=false,.
.visibility:visibleHTML
<div id="divMessage" class="block">

[]

(Ticket)varticket

.:
vasyap,fedias,vovam,galp,svetao
password

JSON

35

JSON

36

JSON

3.2
4:

Notepad++index.html

,Windowslab32

index.html,
EditwithNotepad++

/*
** 4. ,
** online
*/

showOnLineUsers()

UL,
<div id="divUsers" class="block">

JSONticket

(get_online_users.php),
(Contenttype:text/plain)

UL,

,UL

5:

PHPAJAX
,online.

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

37

JSON

38

XML
XMLRPC

XML. XML-RPC

40

XML. XML-RPC

41

XML. XML-RPC

42

XML. XML-RPC

43

XML. XML-RPC

44

XML. XML-RPC

45

XML. XML-RPC

46

XML. XML-RPC

47

XML. XML-RPC

48

XML. XML-RPC

49

XML. XML-RPC

50

XML. XML-RPC

51

XML. XML-RPC

52

XML. XML-RPC

53

XML. XML-RPC

54

XML. XML-RPC

55

XML. XML-RPC

4
1:

Windowslab41

index.html,
EditwithNotepad++

HTML.
:
<script type="text/javascript" src="xslt.js"></script>
<script type="text/javascript" src="xmlrpc.js"></script>

/*
1.
...
*/

getDeliveryMethods()
.XMLRPClab4server.php,
eshop.getDeliveryMethods().XMLRPC
(messages/getDeliveryMethods.xml).
showXML(),
XML.

,getDeliveryMethods(),
window.onload()

POSTContenttype:text/xml

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

56

XML. XML-RPC
2:

Windowslab42

delivery.xsl,
EditwithNotepad++

XSLT.,
<select><option>.,
.

index.html
/*
2.
...
*/

showDelivery().xmlDOM,
xsltTransform()(.xslt.js),
xslDelivery
delivery.xsl

HTML
<div id="divDelivery">...

,<label>,
,
HTML.

showDelivery()window.onload

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

57

XML. XML-RPC
3:

index.html
/*
3.
...
*/

58

calculateOrder(),XMLRPC
eshop.calculateOrder,:
o

sum

deviveryId

(value)

.sum
deviveryIdtxtOrderSum(<input
id="txtOrderSum" type="text" value="1000" />)
selDelivery(.2)

XMLRPCPOST(
Contenttype!)lab4server.php

alert()

showXML()

XML. XML-RPC
4:

index.html
/*
4.
...
*/

showOder(),dom(XMLRPC),
:
// ,
if (!isError(dom)) showOder(dom);

,XSLT(
xslOrder),XML()
domdivOrder
<div id="divOrder"></div>

59

XML. XML-RPC

60

XMLWeb
SOAP

XML Web-. SOAP

62

XML Web-. SOAP

63

XML Web-. SOAP

64

XML Web-. SOAP

65

XML Web-. SOAP

66

XML Web-. SOAP

67

XML Web-. SOAP

68

XML Web-. SOAP

69

XML Web-. SOAP

70

XML Web-. SOAP

71

XML Web-. SOAP

72

XML Web-. SOAP

73

XML Web-. SOAP

74

XML Web-. SOAP

75

XML Web-. SOAP

5
1:

XMLSOAP

LiquidXMLStudio2008
StartAllProgramsLiquidXMLStudio2008LiquidXMLStudio2008(Freeware)

ToolsBrowseWebService

WebServiceUrlURL:
http://localhost/AJAX/labs/lab5/server/bookservice.wsdl

76

[OK]

,ConnectedOK,

[Next>>]

XML Web-. SOAP

registerSession

[Finish]

SOAPserver/messages
"_request.xml","registerSessionrequest.xml"

,.
,,

SOAP
server/messages"_response.xml",
"registerSessionresponse.xml"

[Next>>]

addToBasket
[Finish]

SOAP

SOAP
:addToBasket,getBasket,emptyBasket

server/messages18
.

77

XML Web-. SOAP


2:

Windowslab51

index.html,
EditwithNotepad++

HTML.
:
<script type="text/javascript" src="xslt.js"></script>
<script type="text/javascript" src="xmltools.js"></script>

xmltools.js

/*
2.
...
*/

registerSession(),SOAPregisterSession,
.URI
urn:SampleServer2registerSession

loadXML()
server/messages/registerSessionrequest.xml

SOAPregisterSession(.uri)
sendMessage().
showBooks()

server/server.php

registerSessionCallack(req),

SOAP(req.responseXML)
registerSessionResponse(.registerSessionresponse.xml).
ID.
sessionId.

IDHTML<divid="sessId"></div>

window.onload

C:\ProgramFiles\ApacheGroup\Apache\htdocs\ajax\labs\

78

XML Web-. SOAP


3:

/*
3.
...
*/

addToBasket(bookId),SOAPaddToBasket,
.URI
urn:SampleServer2addToBasket

addToBasketrequest.xml,loadXML()

sessionId,bookId,sessionId
,bookId
,,.
setParameter().
showBooks()

,SOAP.
server/server.php

addToBasketCallback(req),

(req.responseXML).

addToBasketResponse,"true"
.

.
.

79

XML Web-. SOAP


4:

/*
4.
...
*/

80

showBasket(),SOAPgetBasket,
.URI
urn:SampleServer2getBasket

getBasketrequest.xml,loadXML()

sessionId.
setParameter().
showBooks()

,SOAP.
server/server.php

showBasketCallback(req),

(req.responseXML)

server/xslt/getBasket.xsl
loadXML()

XSLTxsltTransform(),
SOAP.

HTML<divid="basketPlaceholder"></div>

.
.

XML Web-. SOAP


5:

/*
5.
...
*/

emptyBasket(),SOAPemptyBasket,
.URI
urn:SampleServer2emptyBasket

emptyBasketrequest.xml,loadXML()

sessionId.
setParameter().

,SOAP.
server/server.php

emptyBasketCallback(req),

(req.responseXML)

(.emptyBasketresponse.xml)
emptyBasketResponse."true".
,<divid="basketPlaceholder"></div>

.
.
[]

6:

,XSLT
,.
,.

.,
,.

81

XML Web-. SOAP

82

AJAX

AJAX

84

AJAX

85

AJAX

86

AJAX

87

AJAX

88

AJAX

89

AJAX

90

AJAX

6.1
1:

.
"".
,"",
.Email
User.User,
,"".:,
,,
.""
user.dbEntropy.salt(user.dbEntropy.iterationCount)
""user.transferEntropy.salt
(user.transferEntropy.iterationCount).
user.password.
,,
user.name,.
.

loginUser()."//User"
User,emailemail

(
server),JSON.

(User)

sendPassword,

alert

Email:
vasyap@mail.ru,fedyas@mail.ru,masha@mail.ru
password

91

AJAX
2:

92

/*
** 2.
*/

"//"
(user.password)getSaltedHash().
""user.dbEntropy.saltuser.dbEntropy.iterationCount

user.password

,""user.transferEntropy.salt
user.transferEntropy.iterationCount

user.password

userJSON(URL
server)

JSON.

showUserData,

alert

user.name

AJAX
3:

/*
** 3.
*/

user.name

HTML<divid="divResult"></div>

93

AJAX

94

AJAX

95

AJAX

6.2
()
1:

.
...
XMLFB2(http://www.fictionbook.org).
.XML,
XSLTHTML.

,.

lab2.6/index.html

/*
** 1
*/

96

.
divMessageLoaddisplay="block"

GETserverXml(
),no()

XMLshowChapter,
DOM

AJAX
2:

/*
** 2
*/

showChapter.currentChapter
"""",.
getChapter(no).

divChapters

XSLT(xmlDOM)
fb2html.
xsltTransform(xmlDOM,fb2html)

divResult

,display=
"none"divMessageLoad

97

AJAX

98

AJAX

99

AJAX

100

AJAX

XMLXSLT.Web
Office2007
XML ,
,
XML .
, -.
XML . XML
: XML
( , , , .), XML
,
.
XML,
, XML-, XML , XSL XSLT ( XML
), XML, Microsoft Office 2003/2007
,
-.

PHP AJAX
, ,
,
.
:

XML
XML
XML
DTD
XML
XSLT
XSLT
XML
Microsoft Office 2003/2007

http://www.specialist.ru/programs/course.asp?idc=1424

101

AJAX

M2524XMLWebMicrosoft
ASP.NET

, XML Web Services


.
Web-
. ,
, , Web-.
, ,
,
.
:

XML Web Services



XML Web Services
XML Web Services Microsoft
.NET Framework
XML Web Service consumer Microsoft Visual Studio
.NET
XML Web Service Visual Studio .NET
XML Web Service
XML Web Service
XML Web Service
, XML
Web Service
XML Web Services, , HTML screen scraping
XML Web Services.

102

http://www.specialist.ru/programs/course.asp?idc=325

AJAX

PHP5

PHP, ZCE.
-
ZCE (Zend Certified Engineer).
, PHP,
.
, , XML, -,
PHP,
, .
, ,
,
.
:

- PHP
SQLite
SAX DOM XML PHP
SimpleXML
XSLT PHP
XML Web SOAP
GD2

http://www.specialist.ru/programs/course.asp?idc=1382

103

AJAX

104

105

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<script type="text/javascript">
/*
** 1: XmlHttpRequest
**
function getXmlHttpRequest()
*/
function getXmlHttpRequest()
{
if (window.XMLHttpRequest)
{
try
{
return new XMLHttpRequest();
}
catch (e){}
}
else if (window.ActiveXObject)
{
try
{
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){}
try
{
return new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e){}
}
return null;
}
/*
** 2
**
function getBookByNumber(number)
*/
function getBookByNumber(number)
{
var request = getXmlHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState != 4) return;
//
var divResult = document.getElementById("divResult");
divResult.firstChild.nodeValue = request.responseText;
}
//
request.open("GET", "getbooktxt.php?num=" + number, true);
request.send(null);
}
/*

106


** 3:
** txtNum
** getBookByNumber(value)
**
function showBook()
*/
function showBook()
{
var txtNum = document.getElementById("txtNum");
getBookByNumber(txtNum.value);
}
</script>
</head>
<body>
<h1> 1</h1>
<form onsubmit="return false">
<label for="txtNum"> :</label>
<input id="txtNum" type="text" />
<!-- 4: -->
<button onclick="showBook()"></button>
</form>
<div id="divResult">&nbsp;</div>
</body>
</html>

107

2.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" type="text/css" href="mod_2_1.css" />
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript">
/*
** 1: selCategory .
** fillCategories
** window.onload.
** getcategories.php
** \n -
** : ":", "1:Web"
*/
function fillCategories()
{
//
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
// selCategory
var selCategory =
document.getElementById("selCategory");
//
var responseText = new String(req.responseText);
//
var cats = responseText.split("\n");
//
// option
for (var i = 0; i < cats.length; i++)
{
if (cats[i] == '') continue;
// ":"
var parts = cats[i].split(":");
// option
var option =
document.createElement("option");
option.setAttribute("value", parts[0]);
var optionText =
document.createTextNode(parts[1]);
option.appendChild(optionText);
selCategory.appendChild(option);
}
//
//
selCategory.size = selCategory.options.length;
}
// GET
req.open("GET", "getcategories.php", true);
req.send(null);
}
//
window.onload = function()
{

108


fillCategories();
}
</script>
</head>
<body>
<h1> </h1>
<form onsubmit="return false">
<div>
<label for="selCategory"></label>
<select id="selCategory"></select>
<button onclick="alert('
')"></button>
</div>
</form>
</body>
</html>

109

2.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" type="text/css" href="mod_2_2.css" />
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript">
/*
** 1: selCategory .
** fillCategories
** window.onload.
** getcategories.php ,
** \n -
** : ":", "1:Web"
*/
function fillCategories()
{
//
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
// selCategory
var selCategory =
document.getElementById("selCategory");
//
var responseText = new String(req.responseText);
//
var cats = responseText.split("\n");
//
// option
for (var i = 0; i < cats.length; i++)
{
if (cats[i] == '') continue;
// ":"
var parts = cats[i].split(":");
// option
var option = document.createElement("option");
option.setAttribute("value", parts[0]);
var optionText =
document.createTextNode(parts[1]);
option.appendChild(optionText);
selCategory.appendChild(option);
}
//
selCategory.size = selCategory.options.length;
}
// GET
req.open("GET", "getcategories.php", true);
req.send(null);
}
//
window.onload = function()
{
fillCategories();
}
/*
** 2: showBooks,
**

110


**
**
**
**
**
**
*/

tableBooks.
postbooksbycat.php
POST .

||
""

//
function Book(author, title, image)
{
this.author = author;
this.title = title;
this.image = image;
}
//
var books = new Array();
function showBooks()
{
//
var selCategory = document.getElementById("selCategory");
if (selCategory.selectedIndex < 0)
{
alert(" ");
return;
}
var catId = selCategory.options[selCategory.selectedIndex].value;
//
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
//
var responseText = new String(req.responseText);
//
var bookStrings = responseText.split("\n");
// books
books = new Array();
for (var i = 0; i < bookStrings.length; i++)
{
if (bookStrings[i] == "") continue;
var parts = bookStrings[i].split("|");
books[books.length] = new Book(parts[0],
parts[1], parts[2]);
}
// tableBooks
var tableBooks =
document.getElementById("tableBooks");
//
while (tableBooks.hasChildNodes())
tableBooks.removeChild(tableBooks.lastChild);
//
for (var i = 0; i < books.length; i++)
{
//
var tr =
tableBooks.insertRow(tableBooks.rows.length);
//
var tdAuthor = tr.insertCell(tr.cells.length);
tdAuthor.appendChild(document.createTextNode(books[i].author));
var tdTitle = tr.insertCell(tr.cells.length);
tdTitle.appendChild(document.createTextNode(books[i].title));

111


//
tr.onmouseover = new
Function("trHighLight(this, '#fcc')");
tr.onmouseout = new
Function("trHighLight(this, '')");
//
// title TR
tr.title = books[i].image;
//
tr.onclick = new Function("showImage(this)");
}
}
// POST
var postData = "cat=" + catId;
req.open("POST", "postbooksbycat.php", true);
req.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
req.setRequestHeader("Content-Length", postData.length);
req.send(postData);
}
/*
**
**
**
**
**
**
*/

3 ()
,

,

//
function trHighLight(trObject, color)
{
if (color != "")
trObject.style.backgroundColor = color;
else
trObject.style.backgroundColor = "";
}
//
function isExists(url)
{
//
var req = getXmlHttpRequest();
// URL HEAD
req.open("HEAD", url, false);
req.send(null);
// - == 200
return (req.status == 200);
}

//
function showImage(trObject)
{
//
var imagePath = "../../images/";
var image = imagePath + trObject.title;
var divBookInfo = document.getElementById("divBookInfo");
var img = divBookInfo.getElementsByTagName("img")[0];

if (isExists(image))
{
// ,
img.src = image;

112


divBookInfo.style.display = "block";
}
else
{
// ,
img.src = "";
divBookInfo.style.display = "";
}
}
</script>
</head>
<body>
<h1> </h1>
<form onsubmit="return false">
<div>
<label for="selCategory"></label>
<select id="selCategory"></select>
<button onclick="showBooks()"></button>
</div>
<div id="divBookInfo">
<img src="" alt="" />
</div>
</form>
<table id="tableBooks"></table>

</body>
</html>

113

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" type="text/css" href="mod_3.css" />
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
// UserInfo
function UserInfo()
{
this.name = "";
this.login = "";
this.password = "";
}
//
function Ticket()
{
this.id = "";
this.valid = false;
}
/*
** 1.
** frmLogin
** "" divUsers.
*/
function showLoginForm()
{
document.body.style.backgroundColor = "gray";
var frmLogin = document.getElementById("frmLogin");
frmLogin.style.display = "block";
}

/*
**
**
**
**
**
**
**
**
*/

2.

onclick .
UserInfo
JSON user_auth.php
Ticket.
Ticket.valid
(Ticket)

//
var ticket;
//
function validateUser()
{
// UserInfo
var txtLogin = document.getElementById("txtLogin");

114


var txtPassword = document.getElementById("txtPassword");
var userInfo = new UserInfo();
userInfo.login = txtLogin.value;
userInfo.password = txtPassword.value;
//
var jsonUserInfo = JSON.stringify(userInfo);
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
//
ticket = JSON.parse(req.responseText);
//
if (ticket.valid)
{
//
var frmLogin =
document.getElementById("frmLogin");
frmLogin.style.display = "";
document.body.style.backgroundColor = "";
//
var btnEnter =
document.getElementById("divUsers").getElementsByTagName("button")[0];
btnEnter.style.display = "none";
// online
showOnLineUsers();
}
else
{
//
var divMessage =
document.getElementById("divMessage");
divMessage.style.display = "block";
}
}
req.open("POST", "user_auth.php", true);
req.setRequestHeader("Content-Type", "text/plain");
req.setRequestHeader("Content-Length", jsonUserInfo.length);
req.send(jsonUserInfo);
}
/*
**
**
**
**
**
**
**
**
**
**
**
*/

3.
(Ticket)
, CSS
display = "block"
divMessage (
,
CSS display!
divMessage)
,
4
divUsers

//
function hideErrorMessage()
{

115


var divMessage = document.getElementById("divMessage");
divMessage.style.display = "";
}
/*
**
**
**
**
**
**
**
**
60 ...

4. ,
online
get_online_users.php
UserInfo

online
divUsers.
30 -

*/
function showOnLineUsers()
{
var divUsers = document.getElementById("divUsers");
var ul = divUsers.getElementsByTagName("ul")[0];
// ONLINE
var jsonTicket = JSON.stringify(ticket);
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
//
users = JSON.parse(req.responseText);
//
while (ul.hasChildNodes())
ul.removeChild(ul.lastChild);
//
for (var i = 0; i < users.length; i++)
{
var li = document.createElement("li");
li.id = users[i].id;
var liText =
document.createTextNode(users[i].name);
li.appendChild(liText);
ul.appendChild(li);
}
//
window.setTimeout("showOnLineUsers()", 3000);
}
req.open("POST", "get_online_users.php", true);
req.setRequestHeader("Content-Type", "text/plain");
req.setRequestHeader("Content-Length", jsonTicket.length);
req.send(jsonTicket);
}

</script>
</head>
<body>
<h1> </h1>
<!-- -->

116


<form id="frmLogin" onsubmit="return false" class="block">
<h2> </h2>
<div>
<label for="txtLogin"></label>
<input id="txtLogin" type="text" />
</div>
<div>
<label for="txtPassword"></label>
<input id="txtPassword" type="password" />
</div>
<button onclick="validateUser()"></button>
<div id="divMessage" class="block">
<h2></h2>
<div> !</div>
<button onclick="hideErrorMessage()"></button>
</div>
</form>
<!-- -->
<div id="divUsers" class="block">
<h2> </h2>
<button onclick="showLoginForm()"></button>
<ul></ul>
</div>
</body>
</html>

117

4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" type="text/css" href="lab4.css" />
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript" src="xslt.js"></script>
<script type="text/javascript" src="xmlrpc.js"></script>
<script type="text/javascript">
// XSLT
var xslDelivery, xslOrder;
// xml DOM
function showXML(xml)
{
if (window.XMLSerializer)
{
// Mozilla
var serializer = new XMLSerializer();
return serializer.serializeToString(xml);
}
else if (window.ActiveXObject)
{
// Internet Explorer
return xml.xml;
}
else
{
return " !";
}
}
//
function isError(xmlDOM)
{
try
{
if (xmlDOM.getElementsByTagName("fault").length > 0)
{
var errorString =
xmlDOM.getElementsByTagName("string")[0].firstChild.nodeValue;
alert("!\n" + errorString);
return true;
}
else return false;
}
catch (e)
{
alert(" XML!\n" + xmlDOM);
return true;
}
}
/*
1. getDeliveryMethods()

118


XML-RPC lab4-server.php
eshop.getDeliveryMethods ( )
XML-RPC
( - messages/getDeliveryMethods.xml)
showXML()
window.onload
*/
function getDeliveryMethods()
{
//
var msg =
new XMLRPCMessage("eshop.getDeliveryMethods", "utf-8");
var rawData = msg.xml();
//alert(rawData);
//
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
// DOM
var dom = req.responseXML;
// ...
if (!isError(dom)) showDelivery(dom);
}
req.open("POST", "lab4-server.php", true);
req.setRequestHeader("Content-Type", "text/xml");
req.setRequestHeader("Content-Length", rawData.length);
req.send(rawData);
}

/*
2. showDelivery(), ,
delivery.xsl,

divDelivery
*/
function showDelivery(xmlDOM)
{
var html = xsltTransform(xmlDOM, xslDelivery);
//alert(html);
var divDelivery = document.getElementById("divDelivery");
divDelivery.innerHTML += html;
}

/*
3. calculateOrder(),
XML-PRC eshop.calculateOrder,
:
sum
- ,
deviveryId - ( value
)
.

showXML()
*/
function calculateOrder()
{
//
var sum, deviveryId;

119


try
{
sum = document.getElementById("txtOrderSum").value;
selDelivery = document.getElementById("selDelivery");
deviveryId =
selDelivery.options[selDelivery.selectedIndex].value;
}
catch (e)
{
alert(" !\n" + e);
return false;
}
//
var msg = new
XMLRPCMessage("eshop.calculateOrder", "utf-8");
msg.addParameter(sum);
msg.addParameter(deviveryId);
var rawData = msg.xml();
//alert(rawData);
//
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
// DOM
var dom = req.responseXML;
// ...
if (!isError(dom)) showOder(dom);
}
req.open("POST", "lab4-server.php", true);
req.setRequestHeader("Content-Type", "text/xml");
req.setRequestHeader("Content-Length", rawData.length);
req.send(rawData);
}
/*
4. showOder(), ,

order.xsl, .
divOrder
*/
function showOder(xmlDOM)
{
var html = xsltTransform(xmlDOM, xslOrder);
//alert(html);
var divOrder = document.getElementById("divOrder");
divOrder.innerHTML = html;
}
//
window.onload = function()
{
//
var req = getXmlHttpRequest();
req.open("GET", "delivery.xsl", false);
req.send(null);
xslDelivery = req.responseXML;
req.open("GET", "order.xsl", false);
req.send(null);

120


xslOrder = req.responseXML;
//
getDeliveryMethods();
}
</script>
</head>
<body>
<h1> </h1>
<form onsubmit="return false">
<!-- -->
<div>
<label for="txtName"> </label>
<input id="txtOrderSum" type="text" value="1000" />
<span>.</span>
</div>
<!-- -->
<div id="divDelivery">
<label for="selDelivery"></label>
</div>
<!-- -->
<div id="divOrder"></div>
<button onclick="calculateOrder()"></button>
</form>
</body>
</html>

121

5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" type="text/css" href="lab5.css" />
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript" src="xslt.js"></script>
<script type="text/javascript" src="xmltools.js"></script>
<script type="text/javascript">
/*
**
1. SOAP XML
**
Liquid XML Studio 2008 (Freeware)
** Tools --> Browse Web Service
** URL:
**
http://localhost/AJAX/labs/lab5/server/bookservice.wsdl
** ( URL,
** )
**
Test ,
**
XML Web-
**
[Next >>]
**
registerSession [Finish]
**
SOAP-
**
server/messages
**
"_-request.xml",
**
"registerSession-request.xml"
**
Liquid XML Studio 2008 (Freeware)
**
SOAP-
**
[Execute]
**
SOAP-
**
server/messages
**
"_-response.xml",
**
"registerSession-response.xml"
**
:
addToBasket, getBasket, emptyBasket
**
*/
// URL , WSDL
var serverBase = "server/";
var server = serverBase + "server.php";
//
var xmlBooks = null;
//
var sessionId = "";

//
function showBooks()
{
var selCategory =
document.getElementById("selectPlaceholder").firstChild;
if (!selCategory) return;

122


// getBooks-request
var msgGetBooks = loadXML(serverBase +
"messages/getBooks-request.xml");
setParameter("categoryId", selCategory.value, msgGetBooks);
//
sendMessage(msgGetBooks, "urn:SampleServer2-getBooks",
true, showBooksCallBack);
}
// showBooks
function showBooksCallBack(req)
{
//
xmlBooks = req.responseXML;
//
var xsltBooks = loadXML(serverBase + "xslt/getBooks.xsl");
//
document.getElementById("tablePlaceholder").innerHTML =
xsltTransform(xmlBooks, xsltBooks);
}

/*
**
2.
**
registerSession(),
**
SOAP- registerSession,
**
. URI
**
urn:SampleServer2-registerSession
**
registerSession-request.xml
(. showBooks())
**
**
server/server.php
**
( registerSession-response.xml)
**
:
**
<registerSessionResponse
**
xsi:type="xsd:string">...</registerSessionResponse>
**

**
sessionId
**
HTML
**
<div id="sessId"></div>
**

*/
function registerSession()
{
// registerSession-request
var msgRegSession = loadXML(serverBase +
"messages/registerSession-request.xml");
//
sendMessage(msgRegSession,
"urn:SampleServer2-registerSession",
true, registerSessionCallack);
}
//
function registerSessionCallack(req)
{
//
var xmlSessionId = req.responseXML;
// ID
sessionId =
xmlSessionId.getElementsByTagName("registerSessionResponse")[0].firstChild.no
deValue;
var divSessId = document.getElementById("sessId");

123


divSessId.innerHTML = sessionId;
}
/*
**
3.
**
addToBasket(),
**
SOAP- addToBasket,
**
. URI
**
urn:SampleServer2-addToBasket
**
addToBasket-request.xml
**
(. showBooks())
**
server/server.php
**

**
sessionId, bookId
**
XML .
**
(. addToBasket-response.xml)
**

**
addToBasketResponse. "true"
**

.
**
**

**

*/
function addToBasket(bookId)
{
// addToBasket-request
var msgAddToBasket = loadXML(serverBase +
"messages/addToBasket-request.xml");
setParameter("sessionId", sessionId, msgAddToBasket);
setParameter("bookId", bookId, msgAddToBasket);
//
sendMessage(msgAddToBasket,
"urn:SampleServer2-addToBasket",
true, addToBasketCallback);
}
//
function addToBasketCallback(req)
{
//
var xmlResult = req.responseXML;
//
var result =
xmlResult.getElementsByTagName("addToBasketResponse")[0].firstChild.nodeValue
;
if (result == "true")
{
// !
showBasket()
}
else
{
//
alert(" ");
}
}

124


/*
**
4.
**
showBasket(),
**
SOAP- getBasket,
**
. URI
**
urn:SampleServer2-getBasket
**
getBasket-request.xml
**
sessionId
**
(. showBooks())
**
server/server.php
**
(. getBasket-response.xmll)
**

**
XSL- getBasket.xsl
**
HTML
**
<div id="basketPlaceholder"></div>
*/
function showBasket()
{
// getBasket-request
var msgGetBasket = loadXML(serverBase +
"messages/getBasket-request.xml");
setParameter("sessionId", sessionId, msgGetBasket);
//
sendMessage(msgGetBasket,
"urn:SampleServer2-getBasket",
true, showBasketCallback);
}
function showBasketCallback(req)
{
//
var msgGetBasketResponse = req.responseXML;
//
var xsltBooks = loadXML(serverBase + "xslt/getBasket.xsl");
//
document.getElementById("basketPlaceholder").innerHTML =
xsltTransform(msgGetBasketResponse, xsltBooks);
}
/*
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
*/

5.
emptyBasket(),
SOAP- emptyBasket,
. URI
urn:SampleServer2-emptyBasket
emptyBasket-request.xml
sessionId
(. addToBasket())
server/server.php
(.
emptyBasket-response.xml)
emptyBasketResponse. "true"
.
,
<div id="basketPlaceholder"></div>

125


function emptyBasket()
{
// getBasket-request
var msgEmptyBasket = loadXML(serverBase +
"messages/emptyBasket-request.xml");
setParameter("sessionId", sessionId, msgEmptyBasket);
//
sendMessage(msgEmptyBasket,
"urn:SampleServer2-emptyBasket",
true, emptyBasketCallback);
}
function emptyBasketCallback(req)
{
//
var xmlResult = req.responseXML;
//
var result =
xmlResult.getElementsByTagName("emptyBasketResponse")[0].firstChild.nodeValue
;
if (result == "true")
{
//
document.getElementById("basketPlaceholder").innerHTML
= "";
}
else
{
//
alert(" ");
}
}
//
window.onload = function()
{
// getCategories
var msgGetCat = loadXML(serverBase +
"messages/getCategories-request.xml");
//
var msgGetCatResponse = sendMessage(msgGetCat,
"urn:SampleServer2-getCategories", false, null);
//
var xsltCat = loadXML(serverBase +
"xslt/getCategories.xsl");
//
document.getElementById("selectPlaceholder").innerHTML =
xsltTransform(msgGetCatResponse, xsltCat);
//
registerSession();
}
</script>
</head>

126


<body>
<h1> </h1>
<div id="sessId"></div>
<div id="container">
<form action="#" onsubmit="return false">
<div>
<label for=""></label>
<span id="selectPlaceholder"></span>
<button onclick="showBooks()"></button>
</div>
</form>
<div id="basketPlaceholder"></div>
<div id="tablePlaceholder"></div>
</div>
</body>
</html>

127

6.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<style type="text/css">
#divShadowScreen { display:none; position:absolute; top:0px;
left:0px; z-index:1; width:100%; height:100%; background-color:#000; opacity:
70%; filter:alpha(opacity=70); -moz-opacity: 0.7; }
#divFrmLogin { display:none; width:25em; position:absolute;
top:50%; left:50%; font-family:Verdana,Sans-serif; font-size:small; zindex:2; }
#frmLogin { border:1px solid #000; background-color:#fff;
padding:1em; position:relative; top:-10em; left:-12em; }
#frmLogin div { margin:1em; }
#frmLogin div label { display:block; width:8em; float:left; }
#divButtons { text-align:center; }
#divButtons button { margin:1em; width:6em; }
#divResult { margin:2em; }
</style>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript">
/*
**
*/
var server = "server/server.php";

/*
** Entropy
*/
function Entropy()
{
this.salt = arguments.length > 0 ? arguments[0] : "";
this.iterationCount = arguments.length > 1 ? arguments[1] :
"";
}
/*
** User
*/
function User()
{
//
this.name = arguments.length > 0 ? arguments[0] : "";
this.email = arguments.length > 1 ? arguments[1] : "";
this.password = arguments.length > 2 ? arguments[2] : "";
this.dbEntropy = new Entropy();
this.transferEntropy = new Entropy();
}
/*
** "" RFC2898
*/
function getSaltedHash(password, salt, iterationCount)

128


{
var saltedHash = password;
if (iterationCount < 1) iterationCount = 1;
for (var i=0; i<iterationCount; i++)
saltedHash = hex_md5(salt + saltedHash);
return saltedHash;
}
/*
** /
*/
function showHideLoginForm(visibility)
{
if (visibility)
{
document.getElementById("divShadowScreen").style.display = "block";
document.getElementById("divFrmLogin").style.display =
"block";
if (document.getElementById("txtEmail").value)
document.getElementById("txtPassword").focus();
else
document.getElementById("txtEmail").focus();
}
else
{
document.getElementById("divShadowScreen").style.display = "";
document.getElementById("divFrmLogin").style.display =
"";
}
}
/*
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**
**

1. "" .
:


.

"" -
.
, "",

.
E-mail
User. User,

, "". :
,
, ,

.

"" user.dbEntropy.salt
(user.dbEntropy.iterationCount)
""
user.transferEntropy.salt
(user.transferEntropy.iterationCount)
user.password

,

129


** ,
** user.name,
** .
**
**
**
** loginUser().
** "// User"
** User, email
** email
**
** ( - server)
** JSON .
**
** sendPassword,
**
** alert
** , .
**
** E-mail :
** vasyap@mail.ru, fedyas@mail.ru, masha@mail.ru
** - password
*/
function loginUser()
{
// E-mail
var email = document.getElementById("txtEmail").value;
// User
var user = new User("", email, "");
//
var jsonUser = JSON.stringify(user);
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
//
var challenge = JSON.parse(req.responseText);
//
sendPassword(challenge);
}
req.open("POST", server, true);
req.setRequestHeader("Content-Type", "text/plain");
req.setRequestHeader("Content-Length", jsonUser.length);
req.send(jsonUser);
//
showHideLoginForm(false);
}
/*
**
**
**
**
**
**
**
**
**

130

2.
"// "

( user.password) getSaltedHash().
"" user.dbEntropy.salt
user.dbEntropy.iterationCount
user.password
, ""
user.transferEntropy.salt
user.transferEntropy.iterationCount


** user.password
** user JSON-
**
** (URL - server).
**
** JSON . showUserData,
**
**
** alert
** , .
** user.name
** E-mail :
** vasyap@mail.ru, fedyas@mail.ru, masha@mail.ru
** - password
*/
function sendPassword(user)
{
//
user.password =
document.getElementById("txtPassword").value;
//
document.getElementById("txtPassword").value = "";
//
// 1- -
user.password = getSaltedHash(user.password,
user.dbEntropy.salt, user.dbEntropy.iterationCount);
// 2-
//
user.password = getSaltedHash(user.password,
user.transferEntropy.salt,
user.transferEntropy.iterationCount);
//
var jsonUser = JSON.stringify(user);
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
//
var response = JSON.parse(req.responseText);
//
showUserData(response);
}
req.open("POST", server, true);
req.setRequestHeader("Content-Type", "text/plain");
req.setRequestHeader("Content-Length", jsonUser.length);
req.send(jsonUser);
}
/*
**
**
**
**
**
**
**
**
*/

3
user.name

.
.
-
.
HTML
<div id="divResult"></div>

131


function showUserData(user)
{
//
var divResult = document.getElementById("divResult");
//
if (user.name)
{
//
divResult.style.color = "";
divResult.style.fontWeight = "";
divResult.innerHTML = "<strong>" + user.name +
"</strong>! !";
}
else
{
divResult.style.color = "red";
divResult.style.fontWeight = "bold";
divResult.innerHTML =
" /!" +
" ...";
}
}
</script>
</head>
<body>
<h1> </h1>
<form onsubmit="return false">
<button onclick="showHideLoginForm(true)"></button>
</form>
<div id="divFrmLogin">
<form id="frmLogin" onsubmit="return false">
<div>
<label for="txtEmail"> E-mail:</label>
<input id="txtEmail" type="text" />
</div>
<div>
<label for="txtPassword"> :</label>
<input id="txtPassword" type="password" />
</div>
<div id="divButtons">
<button onclick="loginUser()"></button>
<button
onclick="showHideLoginForm(false)"></button>
</div>
</form>
</div>
<div id="divResult"></div>
<div id="divShadowScreen"></div>
</body>
</html>

132

6.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" type="text/css" href="lab6.2.css" />
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript" src="xslt.js"></script>
<script type="text/javascript">
//
var serverXml = "server/get-section-xml.php";
var serverHtml = "server/get-section-html.php";
// XSLT
var fb2html;
/* 1.
** .
**
** divMessageLoad display = "block"
** GET
** serverXml ( ),
** no
** ( )
** XML showChapter,
**
** DOM
*/
function getChapter(no)
{
//
document.getElementById("divMessageLoad").style.display =
"block";
//
var req = getXmlHttpRequest();
req.onreadystatechange = function()
{
if (req.readyState != 4) return;
// DOM
var xmlDOM = req.responseXML;
// ...
if (xmlDOM) showChapter(xmlDOM, no);
}
req.open("GET", serverXml + "?no=" + no , true);
req.setRequestHeader("Content-Type", "text/xml");
req.send(null);
}
/*
**
**
**
**
**
**

2.
showChapter.
currentChapter
"" "",
.
getChapter(no).
divChapters

133


** XSLT
** ( xmlDOM)
** fb2html.
** xsltTransform(xmlDOM, fb2html)
** divResult
** ,
** display = "none"
** divMessageLoad
*/
function showChapter(xmlDOM, currentChapter)
{
//
var chapterCount =
xmlDOM.documentElement.firstChild.getAttribute("count");
// /
var divChapters = document.getElementById("divChapters");
var previousChapter = currentChapter - 1;
var nextChapter = currentChapter + 1;
divChapters.innerHTML = "";
if (previousChapter > 0) divChapters.innerHTML +=
'<a href="' + serverHtml + '?no=' + previousChapter +
'" onclick="getChapter(' + previousChapter +
');return false"> </a>&nbsp;';
if (nextChapter < chapterCount) divChapters.innerHTML +=
'&nbsp;<a href="' + serverHtml + '?no=' +
nextChapter +
'" onclick="getChapter(' + nextChapter +
');return false"> </a>';
//
var html = xsltTransform(xmlDOM, fb2html);
var divResult = document.getElementById("divResult");
divResult.innerHTML = html;
//
document.getElementById("divMessageLoad").style.display =
"";
}
/*
**
*/
window.onload = function()
{
//
var divMessageLoad =
document.getElementById("divMessageLoad");
divMessageLoad.style.display = "block";
// XSLT
var req = getXmlHttpRequest();
req.open("GET", "server/fb2html.xsl", false);
req.send(null);
fb2html = req.responseXML;
//
divMessageLoad.style.display = "none";
//
getChapter(1);

134


}
</script>
</head>
<body>
<h1> </h1>
<div id="divMessageLoad"> ...</div>
<noscript><a href="server/get-section-html.php?no=1">

</a></noscript>
<div id="divChapters"></div>
<div id="divResult"></div>
</body>
</html>

135