以留言本的开发打开ajax的世界 / 憋错料

　　之前就一直听后台人员说了ajax的强大的美丽，现在初步涉及，方才知道世界之大，无奇不有，我永远只是其中的一只菜鸟，现在就一个外表非常丑陋的界面来简单的介绍一下ajax制作的简易的留言本。

　　ajax，之前在我的印象中一直就是一个神奇的只可远观不可亵玩的东西，知道今天了解之后，才知道无非就只有一个功能，就是进行扒数据，就是从后台人员所写的文件进行扒数据，至于那文件的书写，就是后台人员的事情了。ajax之需要根据需要传递什么数据，并返回什么值，只要了解这些也就足够了。

　　以下就是ajax所要用到的几个文件，首先必不可少的当然就是html和css文件

　　html文件的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" style="text/css" href="css.css" />
<script src="ajax.js"></script>
<script src="guestbook1.js"></script>
</head>

<div id="list">

</div>
<div id="showMore">显示更多...</div>

<div id="reg">
<h4>注册</h4>
<div>
<p>用户名：<input type="text" name="username" id="username1"></p>
<p id="verifyUserNameMsg"></p>
<p>密码：<input type="password" name="password" id="password1"></p>
<p><input type="button" value="注册" id="btnReg" /></p>
</div>
</div>

<div id="login">
<h4>登陆</h4>
<div>
<p>用户名：<input type="text" name="username2" id="username2"></p>
<p>密码：<input type="password" name="password2" id="password2"></p>
<p><input type="button" value="登陆" id="btnLogin" /></p>
</div>
</div>

<div id="sendBox">
<h4>发表留言</h4>
<div>
<textarea id="content"></textarea>
<input type="button" value="提交" class="btn1" id="btnPost" />
</div>
</div>
</div>

</div>

</body>
</html>

然后就是css文件，因为本文章主要介绍的就是其利用ajax的功能，所以对于其中的css美化这一方面知识简单的带过而已。

@charset "utf-8";

body {
margin: 0; padding: 0;
background: url("images/bg.gif");
}

h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}

a {text-decoration: none; color: #444;}

.hide {
display: none;
}
.show {
display: block;
}

.btn1 {
padding: 0 12px; margin-left: 0px;
display: inline-block;
height: 28px; line-height: 28px; font-size: 14px;
border: 1px solid #D9D9D9; background-color: #FAFAFA;
}

#header {
position: relative;
height: 42px; background-color: #FFF; border-bottom: 1px solid #CCC;
}
#wrapper {
margin: 0 auto; overflow: hidden;
width: 1000px; height: 42px; border-right: 1px solid #EEE;
}
#wrapper a.loginNav {
padding: 0 10px; float: right;
width: 100px; height: 42px; border-left: 1px solid #EEE;
text-align: center; line-height: 42px;
}
#wrapper a.loginNav:hover {
color: #9A0000;
}

#container {
margin: 10px auto; position: relative;
width: 1000px;
}

#sidebar {
padding: 10px; position: absolute; top: 0px; right: 0px;
width: 300px; border: 1px solid #CCC; background-color: white;
}
#sidebar h4 {
padding: 5px;
height: 24px; line-height: 24px; background-color: #CCC;
}

#sendBox {
width: 300px;
}
#sendBox div {
margin: 5px 0;
}
#sendBox textarea {
margin-bottom: 5px;
width: 294px; height: 140px;
}

#list {
width: 660px;
}
#list dl {
margin: 0 0 10px 0; padding: 10px;
border: 1px solid #CCC; background-color: white;
}
#list dt {
height: 30px; line-height: 30px;
}
#list dd.t {
text-align: right;
}

#list dd.t a {margin: 0 5px;}

#showMore {
width: 640px;
margin: 0 0 10px 0; padding: 10px;
border: 1px solid #CCC; background-color: white; text-align: center;
cursor: pointer;
}

在进行完html与css的简单布局之后，现在就开始进入ajax的世界了，无非就是分成几部分，1，创建对象；2写open()方法；其中就是传递几个参数，一个是方法，分get与post两种方法，第二个人技术url，就是要请求服务器的链接网址；3无非就是true或false，代表是不是异步，至于异步这个概念，以后有时间再来详细的介绍。为了方便，便将其封装成一个ajax.js文件，直接在html文件中进行调用。

ajax.js文件内容如下

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}

if (method == ‘get‘ && data) {
url += ‘?‘ + data;
}

xhr.open(method,url,true);
if (method == ‘get‘) {
xhr.send();
} else {
xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(data);
}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert(‘出错了,Err：‘ + xhr.status);
}
}

}
}

最好就是guestbook.js文件，我的步骤就是在服务器中引进一个guestbook文件，然后里面有一个php文件，提供了每一个功能模块的接口，然后这个guestbook.js文件书写了一些方法来实现具体功能

guestbook.js文件代码

ajax(‘get‘, ‘guestbook/index.php‘, ‘m=index&a=logout‘, function(data) {

var d = JSON.parse(data);
alert(d.message);

if (!d.code) {
//退出成功
UpDateUsernameStates();
}

});

return false;

}
var ocontent=document.getElementById(‘content‘);
var obtnPost=document.getElementById(‘btnPost‘);
obtnPost.onclick=function(){
ajax(‘post‘,‘guestbook/index.php‘,‘m=index&a=send&content=‘+ocontent.value,function(data){
var d=JSON.parse(data);
alert(d.message);
if(!d.code){
createList(d.data,true);
}
})
}
function createList(data,insert){
var odl=document.createElement(‘dl‘);
var odt=document.createElement(‘dt‘);
var ostrong=document.createElement(‘strong‘);
ostrong.innerHTML=data.username;
odt.appendChild(ostrong);
var odd1=document.createElement(‘dd‘);
odd1.innerHTML=data.content;
var odd2=document.createElement(‘dd‘);
odd2.className=‘t‘;
var oa1=document.createElement(‘a‘);
var oa2=document.createElement(‘a‘);
oa1.innerHTML = ‘顶(<span>‘+data.support+‘</span>)‘;
oa2.innerHTML = ‘踩(<span>‘+data.oppose+‘</span>)‘;
odd2.appendChild(oa1);
odd2.appendChild(oa2);
odl.appendChild(odt);
odl.appendChild(odd1);
odl.appendChild(odd2);
if(insert&&olist.children[0]){
olist.insertBefore(odl,olist.children[0])}
else{
olist.appendChild(odl)
}
}