以留言本的开发打开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>
<body>
<div id="header"></div>
<div id="container">
<div id="list">
<!--<dl>
<dt>
<strong>zmouse</strong> 说 :
</dt>
<dd>内容</dd>
<dd class="t">
<a href="javascript:;" id="support">顶(<span>0</span>)</a>
|
<a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
</dd>
</dl>-->
</div>
<div id="showMore">显示更多...</div>
<div id="sidebar">
<div id="user" style="margin-bottom: 10px;">
<h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
</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文件代码
window.onload=function(){
var oUsername=document.getElementById("username1");
var overifyUserNameMsg=document.getElementById("verifyUserNameMsg");
var ouser=document.getElementById("user");
var ouserinfo=document.getElementById("userinfo");
var oreg=document.getElementById("reg");
var ologin=document.getElementById("login");
var olist=document.getElementById("list")
var oshowList=document.getElementById("showMore");
var iPage=1;
oUsername.onblur=function(){
ajax('get','guestbook/index.php','m=index&a=verifyUserName&&username='+this.value,function(data){
var d=JSON.parse(data);
overifyUserNameMsg.innerHTML=d.message;
if(d.code){
overifyUserNameMsg.style.color='red';
}
else{
overifyUserNameMsg.style.color='green';
}
})
}
var oPassword1 = document.getElementById('password1');
var oRegBtn = document.getElementById('btnReg');
oRegBtn.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(oUsername.value)+'&password='+oPassword1.value,function(data){
var d=JSON.parse(data);
alert(d.message);
})
}
var oUsername2=document.getElementById("username2");
var oPassword2 = document.getElementById('password2');
var obtnLogin = document.getElementById('btnLogin');
obtnLogin.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=login&username='+encodeURI(oUsername2.value)+'&password='+oPassword2.value,function(data){
var d=JSON.parse(data);
alert(d.message);
if(!d.code){
UpDateUsernameStates()
}
})
}
function getCookie(key) {
var arr1 = document.cookie.split('; ');
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split('=');
if (arr2[0]==key) {
return arr2[1];
}
}
}
UpDateUsernameStates();
function UpDateUsernameStates(){
var uid=getCookie('uid');
var username=getCookie('username');
if(uid){
ouser.style.display="block";
ouserinfo.innerHTML=username;
oreg.style.display="none";
ologin.style.display="none";
}
else{
ouser.style.display="block";
ouserinfo.innerHTML="";
oreg.style.display="block";
ologin.style.display="block";
}
}
var oLogout = document.getElementById('logout');
oLogout.onclick = function() {
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)
}
}
oshowList.onclick=function(){
showList();
iPage++;
}
function showList(){
ajax('get', 'guestbook/index.php', 'm=index&a=getList&n=2&page=' + iPage, function(data) {
var d = JSON.parse(data);
var data = d.data;
if (data) {
for (var i=0; i<data.list.length; i++) {
createList(data.list[i]);
}
}
else {
oshowList.style.display ="none";
}
});
}
}
关于这个php文件则是后端人员书写，所以对于具体的功能与代码这里不再进行详细的解释。
二：几个功能模块的解释
主要就是用户注册，登录，退出，留言，加载更多这五大模块，主要做法基本都是大同小异，都是根据需要传递什么参数就在ajax()中进行传递，并留意返回的数据。
这个就是刚开始出现的右边关于注册登录的界面
