码迷,mamicode.com
首页 > Web开发 > 详细

以留言本的开发打开ajax的世界

时间:2015-10-24 20:16:22      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

  之前就一直听后台人员说了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()中进行传递,并留意返回的数据。技术分享

这个就是刚开始出现的右边关于注册登录的界面

技术分享

 

 

上面的这个就是登录自己的账号之后出现的界面,之所以自己的名字会出现成这种情况,是因为登录的名字是中文字符,因为来不及进行装换,所以出现上面这种情况,之后有时间就会进行改进。
技术分享
上面显示的就是关于留言的界面,第一次只会显示两天留言,因为他默认的留言显示的是n=10,这里为了方便显示看到效果,所以将guestbook.js中的n=2,不断的点击加载更多,便会每次不停的加载两条留言,知道数据库中的留言没有了,显示更多的这个栏便也会消失了。技术分享
最后的这就是整体界面。
好了,关于ajax的应用就讲述到这里,具体后期的关于制作实例的会等后期再进行介绍。
技术分享

以留言本的开发打开ajax的世界

标签:

原文地址:http://www.cnblogs.com/jtxn/p/4907486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!