<!

DOCTYPE HTML PUBLIC

"

-//W3C//DTD HTML 4.0 Transitional//EN

"

>

<

html

>

<

head

>

<

title

>

Ajax GuestBook

<

/

title>

<

style type

=

"

text/css

"

>

.textline{

BORDER

-

BOTTOM: #e6e6d9 1px solid;

line

-

height :

150

%

;

}

//

定义样式

<!--

body { font

-

size:10pt;text

-

align:center;}

dl { margin:

0

;}

dt { background

-

color:#

666

;color:#fff;margin:1px;padding:

0

3px;}

dd { margin:3px;}

div { margin:auto;line

-

height:

150

%

;text

-

align:left;width:600px;border:1px solid #

666

;}

#postBox { margin

-

top:10px;}

//

给id为postBox定义样式

dd.button { text

-

align:center;}

dd.button input { margin:

0

20px;}

//

给dd 下的 button 和input 控件定义样式

//

-->

<

/

style>

<

script type

=

"

text/javascript

"

>

<!--

//

将用户输入异步提交到服务器

function

ajaxSubmit(){

//

获取用户输入

//

三种获取对象值的方式

var

title

=

document.forms[

0

].title.value;

var

author

=

document.all(

"

author

"

).value;

var

content

=

document.theForm.content.value;

//

创建XMLHttpRequest对象

alert(author);

}

//

将用户输入显示到页面

function

addToList(){

//

获取留言列表div容器

var

msg

=

document.getElementById(

"

msgList

"

);

//

创建dl标记及其子标记

var

dl

=

document.createElement(

"

dl

"

);

var

dt

=

document.createElement(

"

dt

"

);

var

dd

=

document.createElement(

"

dd

"

);

var

dd2

=

document.createElement(

"

dd

"

);

var

data

=

new

Date();

//

将结点插入到相应的位置

msg.insertBefore(dl,msg.firstChild);

dl.appendChild(dt);

dl.appendChild(dd);

dl.appendChild(dd2);

//

填充留言内容

dt.innerHTML

=

"

标题：

"

+

document.forms[

0

].title.value;

dd.innerHTML

=

"

作者：

"

+

document.forms[

0

].author.value

+

"

&nbsp;日期：

"

+

data.toLocaleString();

dd2.innerHTML

=

document.forms[

0

].content.value;

//

清空用户输入框

document.forms[

0

].title.value

=

""

;

document.forms[

0

].author.value

=

""

;

document.forms[

0

].content.value

=

""

;

}

//

-->

<

/

script>

<

/

head>

<

body

>

<

div id

=

"

msgList

"

>

<

dl

>

<

dt

>

标题：

<

/

dt>

<

dd

>

作者：

>

&

nbsp;日期：

><

/

dd>

<

dd

>

<

/

dd>

<

/

dl>

<

/

div>

<

div id

=

"

postBox

"

>

<

form name

=

"

theForm

"

method

=

"

post

"

>

<

dl

>

<

dt

>

发表您的留言

<

/

dt>

<

dd

>

标题：

<

input type

=

"

text

"

maxlength

=

"

150

"

size

=

"

45

"

name

=

"

title

"/

>

<

/

dd>

<

dd

>

作者：

<

input type

=

"

text

"

maxlength

=

"

50

"

size

=

"

45

"

name

=

"

author

"/

>

<

/

dd>

<

dd

>

内容：

<

textarea rows

=

"

5

"

cols

=

"

65

"

name

=

"

content

"

><

/

textarea>

<

/

dd>

<

dd class

=

"

button

"

>

<

input type

=

"

button

"

onClick

=

"

addToList()

"

value

=

"

提交

"/

>

<

input type

=

"

reset

"

value

=

"

重填

"

onClick

=

"

ajaxSubmit()

"/

>

<

/

dd>

<

/

dl>

<

/

form>

<

/

div>

<

p

>&

nbsp;

<

/

p>

<

/

body>

<

/

html>